JavaScriptのimport/export（ECMAScriptの場合）

（文と宣言）
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/export

名前付き import/export

変数を１個 export する。

const foo = "foo";
export{ foo };

関数も同様にexportできる。
そして、export を宣言の前に付けると、宣言と同時に export まで完了する。

export function hoge() {};

インポートする。

export const foo = "foo";
export function bar() { }

import { foo, bar } from "./sample_modules.js"

１つのモジュールは基本的に１つのファイルに対応させる（1モジュール = 1ファイル）。
上記の例のように、どのファイルから読み込むのかの指定は、from の後に記述する。
「名前付き」とは言うものの、これは自分で名前を付けるというのではなく、 export したい関数や変数の名前を使うことになる。
ただし、「名前付き」import/export には、エイリアス機能が使用できるため、これを使って明示的にモジュール名を変更した場合にはこの限りではない（＝自分で名前を付けられる）。

const internalFoo = "foo";
export { internalFoo as foo };

import { foo as myFoo } from "./named-export-alias.js";
console.log(myFoo); // => "foo"

エイリアスは import/export の両面から使うことができる。

import * as from './sample_modules.js';

「import * as …」で、モジュールをまとめてインポートすることもできる。

デフォルト import/export

デフォルトエクスポートは、モジュールごとに1つしかエクスポートできない特殊なエクスポートである。

const foo = "foo";
export default foo;

こちらも名前付きと同様に宣言と export を同時に行える。

export default function() {}

import するには、import する側で名前を付けてやる必要がある。

export default {
    baz: "baz"
};

import myModule from "./my-module.js";
console.log(myModule); // => { baz: "baz" }

export する側は「デフォルト」なので特に名前を付けたりはしない。
import する側はデフォルトエクスポートを読み込んだとしても、それをファイル内で使うため、参照できるように何らかの名前を付ける必要がある。

違う場合もあると思われるが、誤解を恐れずに言うと、

  • import する際に {} の中にモジュール名を指定する → 名前付きエクスポート
  • import する際に {} 無しでそのまま自分がファイル内で使うモジュール名を決めて書く → デフォルトエクスポート

という感じになるだろう。
ただ デフォルトをインポートする場合には大体 export した時と同じ名前を使うことが多いと思われるため、自分で名前を考えることはあまり無さそうである。

inserted by FC2 system