Edited at

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

More than 1 year has passed since last update.


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できる