JSの import/export をすぐ忘れるのでいい加減まとめてみた
はじめに
なんか JS の import/export って覚えにくい。。。
よく忘れるのでまとめてみました👇
ECMAScript モジュールと CommonJS モジュール
CommonJS って何よ
JavaScript の仕様というと ECMAScript を連想する方も多いと思いますが、ECMAScript はブラウザ上での JavaScript の仕様と標準を作っているのに対し、CommonJS ではブラウザ上だけでなく、サーバーサイドやクライアントでのCUI、GUI で JavaScript を使う際の仕様を作成しています。
単に仕様を作っているだけなので、ECMAScript に組み込まれるとかがない限り、それが JavaScript の標準になるというわけではないようです。
ちなみに CommonJS で作成された仕様は複数のソフトウェアによって実装が行われることで勧告段階に移るみたいです。
CommonJS の仕様を実装しているソフトウェアの中にはあの有名な node.js があります。
ふむふむ。
ECMAScript はブラウザレベルのJSの仕様であるのに対して、CommonJS はより広い範囲を扱う仕様なんだと。
そして、みんな大好き Node.js もこの仕様に従っているのでアプリの中で CommonJS の import/export を見る機会は多いということみたいですね🧐
ECMAScript と CommonJS では import/export の書き方が違うのでここは別々に見る必要があります。
ECMAScript の場合
「名前付き」と「デフォルト」があります。
名前付き import/export
変数を１個 export する。
const foo = "foo";
export{ foo };
関数も同じようにいけます。
そして、 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/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 した時と同じ名前を使うことが多いと思いますので、自分で名前を考えることはあまり無さそうですね。
CommonJS の場合
こちらは簡単にご紹介します。
export
module.exports の後に続けて export したい関数やクラスを定義します。
module.exports = hoge() {
console.log('これが CommonJS の export 方法です');
}
import
require の後に読み込みたいモジュールがあるファイルのパスを指定します。
その戻り値を変数に代入し、 import したファイルの中ではその変数名を使って参照します。
const hogeModule = require('./hoge.js')
hogeModule();
名前付きとかデフォルトとか、そういう概念は無さそうです。
強いて言うなら、デフォルトに近いでしょうか。
今回はここまでにしておきます🍴
参考にさせて頂いた記事
Discussion