JavaScriptのexportについて。
es6の大きなメリットとして、ライブラリをモジュール化して、外部から読み込むことができますが、読み込み方に少し癖があります。
気をつけるポイントとしては、以下2点です。
- 読みれる側にdefaultがあるかないか
- 名前の変更などがあるかないか
クラスを例にあげますが、関数や変数でも同様の扱いができます。
Contents
defaultがついている時
./lib/PersonClass.php
1 2 3 4 5 6 7 8 9 |
export default class PersonClass{ constructor (id, name) { this.id = id this.name = name } printName(){ console.log(`${this.name} クラスの中に入れている名前です。`) } } |
defaultをつけますと外部から読み込む時にPersonClassが自動的に名前が付与されます。
./sample.js
1 2 3 4 |
//defaultクラスの読み込み import PersonClass from './lib/personClass.js' const person = new PersonClass(6,'yamada'); person.printName() |
ちなみに下記のように書くこともできます。
1 2 3 4 5 6 7 8 9 10 11 |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
//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をつけるなどの工夫が必要です。
1 2 3 4 5 6 7 8 9 10 |
//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以外にも下記のような出力の仕方もできます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
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 } |