defaultの有無

export default で書き出した値は、中括弧なしでimport できる。

export で書き出した値は、中括弧ありでimport する。

そしてさらに少しややこしくなるが、export で書き出した値は { xxx as yyy } とすることで任意の変数名に変えることができる。

とのこと。

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

実際に動かしてみた

上記の参考とまんまだが、実際に動かしてみた。

export default "uchida hyakken";
export const firstNaMe = "hyakken";
export const lastName = "uchida";
import name, { firstNaMe, lastName } from "./export";

console.log("name", name); // name uchida hyakken
console.log("firstNaMe", firstNaMe); // firstNaMe hyakken
console.log("lastName", lastName); // lastName uchida

下に小さくあるconsole ボタンを押して見ていただければ成功していることが確認できる。

うん、動かすことで理解が深まった。

export / import を使いこなすことで、ファイル管理を楽にしていこう。