ES6におけるimport/exportメモ
ちゃんと知らなかったので、自分用にメモ程度。もちろん同じことを説明してる記事はたくさんあるけど、自分の言葉で書いてみることが大事だと思っている。
間違いとかあったらご指摘いただけるとうれしいです。
概要
- ES6から搭載された、JavaScriptにおけるモジュール機能。今までは機能を分割するという概念がなかった
- commomn.jsやnode.jsではrequire関数が定められ、import/exportに似た機能は他のライブラリなどでは実装されていた
- ようやくこれらの機能が言語仕様として実装された
modules (import/export)の使い方
- modulesの概念では、別のファイルに渡す変数や関数のことを「モジュール」と呼ぶ
- 複数のモジュールを別のファイルに渡す際は、
export
することで呼び出し元で扱えるようにする - 呼び出し元では
import
を使うことで、そのファイル内でモジュールを有効化できる
Named export (名前付きのモジュール受け渡し)
- 以下の
module.js
で、外部のファイルで利用できるようにexportする - アロー関数の書き方、return文や括弧の省略などは以下を参照
// module.js export const myStritg = "myString" // ES5の古い書き方 // export var mergeString = function(str1, str2) { // return str1 + str2 // } // ES6のアロー関数を使った書き方 export const mergeString = (str1, str2) => `${str1}${str2}`
- 以下の
main.js
で、モジュールを利用するためにimportする - importの構文は、
import [importするファイルで利用する変数名] from '[モジュールのファイルパス]'
- exportされたオブジェクトに対し、エイリアスを設定することができる。その場合、
import [元のオブジェクト名/関数名] as [エイリアス] from '[モジュールのファイルパス]'
// main.js import { myString, merger as mergeString } from 'path/to/module' console.log(myString) // myString console.log(merger(myString, 'is here.')) // myString is here
- 上記のimport文で
*
を使うことで、一つのオブジェクトのプロパティとしてモジュールを受け取ることができる - 構文は、
import * as [importするファイルで利用するオブジェクト名] from '[モジュールのファイルパス]'
// main.js import * as mod from 'path/to/module' console.log(mod.myString) // myString console.log(mod.mergeString(myString, 'is here.')) // myString is here
Default export (モジュールを一つだけ受け渡しする場合)
- ファイル内でモジュールを一つだけ渡す場合、
export default
を利用する export default
は、一つのファイルの中で一度しか呼び出すことができない- モジュールを受け取る側の記述が簡潔でわかりやすくなるため、通常利用する場合はなるべく
export default
を利用する export default
を使用する場合、var, let, constは利用できない- Default exportの場合は、importの際に自由な名前を設定できる。一つのモジュールにつき一つしか存在しないため、名前をexport側と合わせなくてもよい
export defalut
でオブジェクトや関数に対して名前を設定していないこともある。そのため、Default exportの場合はimportした先で名前をつけてあげるという感覚
// module.js export default (str1, str2) => `${str1}${str2}`
// main.js import merger from 'path/to/module' console.log(merger('aaa', 'bbb')) // aaabbb
- また、クラス(正確にはprototypeの拡張だが)を渡すこともできる
- Default exportなので、クラスもimportした先で名前を変えることができる
- クラスについては以下を参照
- クラス内のgetter/setterはES5、メソッド定義はES6の構文。詳しくは以下を参照
// class.js export default class User { constructor(name) { this.name = name } get name() { return this._name } set name(name) { this._name = name } displayName() { console.log(`現在のユーザーは${this._name}です。`) } }
// main.js import User from 'path/to/class' const user = new User('Bob') console.log(user.name) // Bob user.displayName() // 現在のユーザーはBobです。 user.name = "Michael" user.displayName() // 現在のユーザはMichaelです。