JavaScriptのモジュールは、ES2015で追加された仕組みです。今回は、モジュールの基本の書き方について勉強したことを書きます。クライアント側のJavaScriptでもモジュールが使えるようになり、便利になりました。
モジュールと名前空間
モジュールがあることで名前空間を分けることができます。つまり、同一ファイル内の変数名にだけ気を付ければ良いことになります。
モジュールなしのJavaScript
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>モジュール(ES Module形式)の練習</title> </head> <body> <h1 id="title"></h1> <script> const name = "タイトル!"; </script> <script> document.getElementById('title').textContent = name; </script> </body> </html>
scriptタグを分けても名前空間が同じなので、変数nameは定義したscriptタグ以外のscriptタグ内でも使えます。つまり、2つのスクリプトには依存関係があるので、コードが大量になったときに何がどこで影響しているのか把握するのは困難です。
モジュールありのJavaScript
scriptタグをtype="module"とすると、そのスクリプトはモジュールになります。そのため名前空間が別になり、変数nameは共有されなくなります。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>モジュール(ES Module形式)の練習</title> </head> <body> <h1 id="title"></h1> <script type="module"> const name = "タイトル!"; </script> <script type="module"> document.getElementById('title').textContent = name; </script> </body> </html>
上記の状態だとブラウザに何も表示されません。2つ目のscriptタグ内に変数nameを定義すると、ブラウザに文字列が表示されます。
モジュールにすることで2つのスクリプトの依存関係が無くなりました。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>モジュール(ES Module形式)の練習</title> </head> <body> <h1 id="title"></h1> <script type="module"> const name = "タイトル!"; </script> <script type="module"> const name = "タイトルです"; document.getElementById('title').textContent = name; </script> </body> </html>
モジュールの遅延実行
scriptタグを記述する場所は、bodyタグの閉じタグの直前が多いと思います。スクリプトをモジュールにすると遅延実行されるので、headタグ内に書けます。DOMに関する記述があっても問題ありません。そのため、以下のように記述できます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <script type="module"> const name = "タイトル!"; </script> <script type="module"> const name = "タイトルです"; document.getElementById('title').textContent = name; </script> <title>モジュール(ES Module形式)の練習</title> </head> <body> <h1 id="title"></h1> </body> </html>
モジュールの読み込み
モジュールを以下のようにして読み込みます。
<script type="module" src="./ファイル名.js"></script>
以下で2つのJavaScriptファイルを読み込みます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <script type="module" src="./a.js"></script> <script type="module" src="./b.js"></script> <title>モジュール(ES Module形式)の練習</title> </head> <body> <h1 id="title"></h1> </body> </html>
/* a.js */ console.log("a.jsです");
/* b.js */ const name = "タイトルです"; document.getElementById('title').textContent = name;
※モジュールファイルを読み込む場合、ローカルサーバを起動しないと動作を確認できません。
import/export
a.jsにb.jsを読み込みます。そうするとb.jsで定義した変数をa.jsで使えるようになります。
// a.js import { name } from "./b.js"; document.getElementById('title').textContent = name;
// b.js export const name = "タイトル!";
HTMLでは、a.jsのみを読み込みます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <script type="module" src="./a.js"></script> <title>モジュール(ES Module形式)の練習</title> </head> <body> <h1 id="title"></h1> </body> </html>
まとめ
モジュールによるメリットは以下です。
- 名前空間を分けられる
- コードの依存関係に悩まされない
- ファイルの読み込み順を気にしなくてすむ
- クライアントサイドの開発が楽になる
モジュールを取り入れると良いことが多いので、モジュールを意識したプログラミングをしていきたいです。現在、クライアント側とサーバ側でモジュールの書き方が違うようなので、サーバ側の勉強もしようと思います。今後、記述が統一されるかもしれませんが、どうなるか分からないので動向を見守りたいです。
