JavaScript

ES2015のモジュール機能(import/export)

ES2015のimport/exportについて

何を実現できるのか

  • 別ファイルの内容をimportして取り込める
  • 自ファイルの内容をexportして公開できる

サンプル

  • 説明するより動きを見たほうが理解できると思うので
User.js
export default 'Ozaki';
export const name1 = 'Mike';
export const name2 = 'John';
Hello.js
import User, { name1, name2 } from './User';

console.log(User); // Ozaki
console.log(name1); // Mike
console.log(name2); // John
Hello2.js
import aaa, { name1 as bbb, name2 as ccc } from './User';

console.log(aaa); // Ozaki
console.log(bbb); // Mike
console.log(ccc); // John

サンプルの解説

  • export defaultで公開した値は
    • 中括弧なしでimportできる
    • どんな名前でimportしてもよい
  • exportで公開した値は
    • 中括弧をつけてimportする
    • export時の変数名でimportする
    • { xxx as yyy }とすることで任意の変数名に変えることができる

その他

  • export defaultで公開できるのは1ファイル1つ
  • 変数でも関数でもclassでもexportできる