こんにちは！エンジニアのワカツキです！
モダンなJavaScript（ES6）でよく見かける、モジュールの「import」と「export」ですが、使い方を詳しく理解していますか？
今回はES6に導入された便利なモジュールを扱う上で基本となるimportについて、わかりやすく解説していきたいと思います！
importとは
ES6では、JavaScriptオブジェクトをモジュール化して管理できます。モジュール化を行うと、機能の再利用を行えるほか、保守性を高めたり、変数名が被ってしまうのを防ぐことができます。
importは、あるモジュールでエクスポートされた、関数やオブジェクト、プリミティブ値を別モジュール内にインポートするために使う文法です。
以下のように記述します。
import {モジュール名} from "インポート元"
importの使いかた
モジュールにはdefaultモジュールとnamed（名前付き）モジュールがあります。
これについては、次の「モジュールのexportを行う」の中で詳しく説明します。
まずは、default exportされたモジュールと、named exportされたモジュールの読み込みを行ってみましょう。
import {ModuleA, ModuleB} from "modules";
// ModuleAとModuleBというnamedモジュールをインポート
import Default from 'modules2';
// defaultモジュールとnamedモジュールを分けてインポート
1行目では、modulesというファイルから、ModuleAとModuleBという二つのnamedモジュールをインポートしています。
2行目では、modules2というファイルから、defaultモジュールをインポートしています。
以上が基本的なimportの書き方ですので、しっかりと覚えておきましょう。
モジュールのexportを行う
関数やオブジェクト、プリミティブ値をモジュールとしてエクスポートするためには、exportを使用します。
試しに、関数をdefault exportしてみましょう。
// alert.js
export default function () {
alert("default module called!");
};
これで、デフォルトモジュールとしてエクスポートできました。
次に、named exportしてみましょう。
// utils.js
export function sum(x, y, z) {
return x+y+z;
}
export function multiply(x, y) {
return x*y;
}
sum、multiplyという名前のモジュールをエクスポートできました。
以下のように呼び出して、関数を利用できます。
import { sum, multiply } from 'utils'; // sumモジュールをインポート
console.log(sum(1, 2, 3));
console.log(multiply(5, 8));
実行結果：
-> 6 -> 40
importの注意点
・CommonJSとの区別
CommonJSは、主にウェブブラウザ環境外での使用を策定するためのプロジェクトです。こちらにもimportやexportを使用するモジュール機能があるので、混同しないように注意しましょう！
・複雑なモジュール構成は非推奨
Effective JavaScriptの著者・David Herman氏によると、モジュールは単一のdefaultのみでのエクスポートを推奨しており、named exportを使用する場合もなるべく簡単な構成にするべきだということです。
まとめ
いかがでしたか？
今回は、ES6のモジュール化で使われるimportとexportの使い方について学習しました！
モジュール化はモダンなJavaScriptのコーディングで重要なポイントです。
今回学んだことを生かして、より良いJavaScriptのプログラムを書くように心がけましょう！
