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で公開できるのは１ファイル１つ - 変数でも関数でもclassでもexportできる