javascriptのimport文を使用するモジュール機能ですが、いままでNext.jsやReactのサンプルコードなどで多く使用されていたためあまり考えずに使用していましたが後輩に簡単に説明できるぐらいに知っておこうと思い調べてみました。
WEBブラウザ上では外部javascriptファイルを読み込むときにはその都度、scriptタグで読み込むしかありませんでした。しかし、WEBブラウザがjavascriptの新しいバージョンに対応していくうちにjavascriptでも外部ファイルを読み込むことができるようになり、これからはjsファイルの分割化が通常になっていくと思われます。
モジュールとはなにか？
javascriptの分割されたコードの塊のことを「モジュール」と呼びます。javascriptの一般的なブラウザ対応バージョンES5ではモジュール機能はありません。IE11を除くことで利用可能になるES5の次のバージョンES2015ではモジュール機能は標準装備されるようになりました。
モジュールパターン
ES2015ができるまではモジュールがなかったのでモジュールのように使うために「モジュールパターン」という疑似的に生み出すコードの工夫でモジュールのように使えるようにしていました。
しかし、このモジュールパターンはjavascriptによくある問題「グローバル変数の汚染」というデメリットをもっていました。
そのデメリットを解消しようとあらたに「CommonJS」「AMD」などの仕様が生まれました。
これによってモジュールは実現に近づきましたがCommonJS、AMDはECMAScript標準とは違う枠組みで策定されたのでブラウザが解釈（使用）できませんでした。
そのため、CommonJS、AMDを使用して作成されたモジュールはBrowserifyやRequireJSなどのモジュールバンドラを使用してブラウザでも解釈可能なコードに変換する必要がありました。
ES5標準のブラウザ環境時代（IE11 がはびこる時代）ではjavascriptのモジュール化はかなり面倒くさいことになっていたのです。
ES2015でモジュールが標準仕様に追加
ES5の次のバージョンES2015ではモジュール機能が標準仕様に追加されたのでブラウザでもモジュールがモジュールバンドラを使用せずに使えます。さらに2022年6月のIE11のサポート対象外化によってモジュール使用がグッと身近になってきました。
ただしモジュールを使用するにあたって注意があります。これをあらかじめ知らないとハマる可能性があるので頭の隅にいれておくかノートアプリに保存しておくとよいでしょう。
モジュール使用時の注意点
- scriptタグにtype=”module”属性を追加しないと動かない
- ローカルで呼び出すとクロスオリジン制約に引っかかってエラーになる
２を詳しくいうとデスクトップなどにフォルダを作ってindex.html、index.js、module.jsのファイルを作成してテストした場合（htmlファイルをダブルクリックでブラウザで読み込んだ場合）httpから始まっていないのでＣＯＲＳに引っかかり意図しない結果になります。これはhttpからはじまるようにサーバーを立ててテストすれば解消されます。
サーバーの立て方はいろいろありますが例えば、
- npm でbrowser-syncを使う
- dockerでnginxもしくはapachでwebサーバーを用意する
- xampp、mampを使う
- 実際にサーバーにアップする
などが考えられます。 browser-syncかdockerがおすすめです。