概要: このチュートリアルでは、ES6 モジュールについて、モジュールから変数、関数、クラスをエクスポートする方法、およびそれらを他のモジュールで再利用する方法を学びます。
ES6 モジュール入門
初期の頃、JavaScript は主に Web ページにインタラクティビティを提供する小さなスクリプトタスクに使用されていました。今日では、JavaScript はブラウザやサーバー（Node.js）で完全なアプリケーションを動かすように進化しました。
この成長に対応するためには、JavaScript コードをモジュール化し、アプリケーション全体で再利用できるようにする必要があります。
ES6 では、モジュールの概念が導入されました。モジュールとは、strict モードで実行される JavaScript ファイルです。つまり、モジュール内で宣言された変数や関数は、自動的にグローバルスコープに追加されることはありません。
良いニュースは、最新の Web ブラウザとNode.jsがネイティブの ES6 モジュールをサポートしていることです。このネイティブサポートにより、モジュールのロードが合理化され、パフォーマンスが最適化されます。
ES6 モジュールは、Node.js バージョン 13 以降でサポートされています。
ES6 モジュールの例
次のディレクトリとファイル構造を持つ新しいプロジェクトを作成します。
├── index.html
└── js
├── index.js
└── lib.jsCode language: plaintext (plaintext)まず、lib.js モジュールで display() という関数を定義します。
function display(message) {
const el = document.createElement('div');
el.innerText = message;
document.body.appendChild(el);
}Code language: JavaScript (javascript)display() 関数は、div 要素を作成して body 要素に追加することで、Web ページにメッセージを表示します。
次に、index.html ファイルに index.js ファイルをロードします。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ES6 Modules</title>
</head>
<body>
<script src="js/index.js"></script>
</body>
</html>Code language: HTML, XML (xml)index.js ファイルで lib.js ファイルの display() 関数を使用するには、ES6 モジュールを使用します。次の手順は、それを実現する方法を示しています。
ステップ 1. export ステートメントを使用して、lib.js ファイルで display() 関数をエクスポートします。
function display(message) {
const el = document.createElement('div');
el.innerText = message;
document.body.appendChild(el);
}
export { display };Code language: JavaScript (javascript)この例では、export キーワードの後に中括弧で囲んで関数名 display を配置します。これにより、display 関数を他のモジュールで使用できるようになります。
ステップ 2. import ステートメントを使用して、lib.js モジュールから display 関数をインポートし、display() 関数を呼び出して、Web ページに Hi メッセージを表示します。
import { display } from './lib.js';
display('Hi');Code language: JavaScript (javascript)この例では、インポートしたい display 関数名を中括弧で囲み、インポート元のモジュール名（lib.js）を指定します。
ステップ 3. index.html の script タグに type="module" を追加して、Web ブラウザに index.js ファイルをモジュールとしてロードするように指示します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ES6 Modules</title>
</head>
<body>
<script src="js/index.js" type="module"></script>
</body>
</html>Code language: HTML, XML (xml)Web ブラウザで index.html を開くと、Web ページに Hi メッセージが表示されます。
まとめ
- ES6 モジュールを使用すると、JavaScript ファイルをモジュールに整理できます。
- ES モジュールは、strict モードで実行される JavaScript ファイルです。
exportステートメントを使用して、変数、関数、およびクラスをエクスポートします。importステートメントを使用して、他のモジュールから変数、関数、およびクラスをインポートします。scriptタグでtype="module"を使用して、Web ブラウザに JavaScript ファイルをモジュールとしてロードするように指示します。
