JavaScriptのexport

投稿日：2019年10月12日

JavaScriptのexportについて。

es6の大きなメリットとして、ライブラリをモジュール化して、外部から読み込むことができますが、読み込み方に少し癖があります。

気をつけるポイントとしては、以下２点です。

読みれる側にdefaultがあるかないか
名前の変更などがあるかないか

クラスを例にあげますが、関数や変数でも同様の扱いができます。

Contents

1 defaultがついている時
2 defaultがない場合

defaultがついている時

./lib/PersonClass.php

export default class PersonClass{
  constructor (id, name) {
    this.id = id
    this.name = name
  }
  printName(){
    console.log(`${this.name} クラスの中に入れている名前です。`)
  }
}

export default class PersonClass{

constructor (id, name) {

this.id = id

this.name = name

}

printName(){

console.log(`${this.name} クラスの中に入れている名前です。`)

}

defaultをつけますと外部から読み込む時にPersonClassが自動的に名前が付与されます。

./sample.js

//defaultクラスの読み込み
import PersonClass from './lib/personClass.js'
const person = new PersonClass(6,'yamada');
person.printName()

//defaultクラスの読み込み

import PersonClass from './lib/personClass.js'

const person = new PersonClass(6,'yamada');

person.printName()

ちなみに下記のように書くこともできます。

class PersonClass{
  constructor (id, name) {
    this.id = id
    this.name = name
  }
  printName(){
    console.log(`${this.name} クラスの中に入れている名前です。`)
  }
}
//自動名前つき
export default PersonClass

class PersonClass{

constructor (id, name) {

this.id = id

this.name = name

}

printName(){

console.log(`${this.name} クラスの中に入れている名前です。`)

}

//自動名前つき

export default PersonClass

defaultがない場合

defaultがついてない場合ですが、名前を import の際につける必要が出てきます。

./lib/memberClass.php

//exportで外から読み込めるようになる
export class MemberClass{
  constructor (id, name) {
    this.id = id
    this.name = name
  }
  printName(){
    console.log(`${this.name} メンバーの中に入れている名前です。`)
  }
}
export class MemberClass2{
  constructor (id, name) {
    this.id = id
    this.name = name
  }
  printName(){
    console.log(`${this.name} メンバー2の中に入れている名前です。`)
  }
}

//exportで外から読み込めるようになる

export class MemberClass{

constructor (id, name) {

this.id = id

this.name = name

}

printName(){

console.log(`${this.name} メンバーの中に入れている名前です。`)

}

export class MemberClass2{

constructor (id, name) {

this.id = id

this.name = name

}

printName(){

console.log(`${this.name} メンバー2の中に入れている名前です。`)

}

読み込む側ではそのままで読み込む時は{}をつける、名前を変更する場合はasをつけるなどの工夫が必要です。

//memberClassのみを読み込みたい時
import {MemberClass} from './lib/MemberClass.js'

//名前つきclass
//memer1を命名変更
import {MemberClass as m1, MemberClass2} from './lib/MemberClass.js'

//アスタリスクの使用
import * as mallobj from './lib/MemberClass.js'
const m1obj2 = new mallobj.MemberClass(17,'tanaka');

//memberClassのみを読み込みたい時

import {MemberClass} from './lib/MemberClass.js'

//名前つきclass

//memer1を命名変更

import {MemberClass as m1, MemberClass2} from './lib/MemberClass.js'

//アスタリスクの使用

import * as mallobj from './lib/MemberClass.js'

const m1obj2 = new mallobj.MemberClass(17,'tanaka');

通常のexport以外にも下記のような出力の仕方もできます。

class MemberClass{
  constructor (id, name) {
    this.id = id
    this.name = name
  }
  printName(){
    console.log(`${this.name} メンバーの中に入れている名前です。`)
  }
}

class MemberClass2{
  constructor (id, name) {
    this.id = id
    this.name = name
  }
  printName(){
    console.log(`${this.name} メンバー2の中に入れている名前です。`)
  }
}

export {
    MemberClass,
   //このように出力export時にasにしてエイリアスをつけることもできます。
    MemberClass2 as m2
}

class MemberClass{

constructor (id, name) {

this.id = id

this.name = name

}

printName(){

console.log(`${this.name} メンバーの中に入れている名前です。`)

}

class MemberClass2{

constructor (id, name) {

this.id = id

this.name = name

}

printName(){

console.log(`${this.name} メンバー2の中に入れている名前です。`)

}

export {

MemberClass,

//このように出力export時にasにしてエイリアスをつけることもできます。

MemberClass2 as m2

}