こんにちは！エンジニアのワカツキです！
モダンなJavaScript（ES6）でよく見かける、モジュールの「import」と「export」ですが、使い方を詳しく理解していますか？
今回はES6に導入された便利なモジュールを扱う上で基本となるimportについて、わかりやすく解説していきたいと思います！
importとは
ES6では、JavaScriptオブジェクトをモジュール化して管理できます。モジュール化を行うと、機能の再利用を行えるほか、保守性を高めたり、変数名が被ってしまうのを防ぐことができます。
importは、あるモジュールでエクスポートされた、関数やオブジェクト、プリミティブ値を別モジュール内にインポートするために使う文法です。
以下のように記述します。
import {モジュール名} from "インポート元"
【なかなかエラーが解決できない…そんな悩みを解決します！】
登録無料で始められるプログラミングスクール「侍テラコヤ」
・回答率100%のQ&A掲示板でエラーを解決！
・現役エンジニアとのオンライン相談で悩みを解決！
・50種類以上の教材で複数言語を習得！
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のプログラムを書くように心がけましょう！
