はじめに
アプリケーションが大きくなると機能を切り分けてモジュール化して管理していく必要が出てくる。
モジュールとは機能ごとにクラスや関数を１つのファイルにまとめたものである。
機能ごとにモジュールを分けていくと、モジュールで外部の別のモジュールの機能を使用したい場面も出てくる。そういった時にimportとexportを利用することで、モジュール間で機能をやりとりすることができる。
importを利用することで、外部から他のモジュールを読み込むことができ、読み込ませたい要素にexportを記述してあげることでimportが可能になる。
1つの要素をexport / importする
↓下記のモジュールのクラスを他のモジュールでも使えるようにしていく
util.js
// ファイルパスは ./lib/util.js とする
class Member {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
getName() {
return this.firstName + this.lastName
}
}
export（デフォルトexport）
クラスを外部でも読み込めるようにするためにexport defaultを記述する。
util.js
// クラスMemberをexport
export default class Member {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
getName() {
return this.firstName + this.lastName
}
}
import
importで外部のモジュールにクラスを読み込む。
index.js
// import クラス名 from 'ファイルのパス名'
import Member from '@/lib/util';
// export defaultした場合、importでクラス名とは別の変数名をつけることも可能
import MyMember from '@/lib/util';
これで、クラスMemberが外部のモジュール（index.jsファイル）でも使用できるようになる。
複数の要素をexport / importする
↓下記のモジュールの2つのクラスを他のモジュールでも使えるようにしていく
util.js
// ファイルパスは ./lib/util.js とする
// ↓ クラスMember
class Member {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
getName() {
return this.firstName + this.lastName
}
}
// ↓ クラスProduct
class Product {
constructor(name) {
this.name = name;
}
}
export（名前付きexport）
それぞれのクラスでexportを記述する方法
export class クラス名と記述することでそれぞれのクラスをクラス名付きでexportできる。
util.js
// クラスMemberをexport
export class Member {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
getName() {
return this.firstName + this.lastName
}
}
// クラスProductをexport
export class Product {
constructor(name) {
this.name = name;
}
}
最後にまとめてexportを記述する方法
宣言したクラスを最後にまとめてexportすることも可能。
util.js
class Member {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
getName() {
return this.firstName + this.lastName
}
}
class Product {
constructor(name) {
this.name = name;
}
}
// クラスMemberとクラスProductをexport
export { Member, Product };
import
複数の要素をimportする場合は{ }で囲む。
index.js
// クラスMemberとクラスProductをimport
import { Member, Product } from '@/lib/util';
これで、クラスMemberとクラスProductが外部のモジュール（index.jsファイル）でも使用できるようになる。