@ledsun blog

無味の味は佳境に入らざればすなわち知れず

ブラウザからJavaScriptモジュールをjQueryとともに使う

Web JavaScript 技

ブラウザでJavaScriptモジュールが使えるようになりました。 <script type="module">って書くやつです。 これを使うとimport/exportを使ってモジュール感の依存関係が解決できます。 これまでは人間がscriptタグの順番を決めるか、Webpackのようなモジュールバンドラーで事前処理する必要がありました。 さらにそれ以前は、jQueryのようなグローバル変数を使って、依存関係を解決していました。

jQuery時代の依存関係解決からJavaScriptモジュールに一気にジャンプ出来るのでしょうか？ それとも一度Webpackのようなモジュールバンドラーを経由する必要があるのでしょうか？ ということを試してみます。 次のindex.htmlではJavaScriptモジュールとして、index.jsを読み込みます。

<head>
  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
    crossorigin="anonymous"></script>
  <script type="module" defer>
    import init from './index.js'
    init()
  </script>
</head>

<body>
  <div id="hoge"></div>
</body>

index.jsではすでに読み込まれているはずのjQueryを参照します。

export default function () {
  $("#hoge").text("hello");
}

これが動くのかというと、動きます。 次のようにHTTPサーバーで起動します。

python3 -m http.server
open htttp://localhost:8000

f:id:ledsun:20220316085625p:plain
helloが表示されます。

HTTPサーバーを起動しないと、index.jsをローカルファイルから読もうとします。 これはエラーになります。

f:id:ledsun:20220316085920p:plain
ローカルのスクリプトファイル読み込みエラー

モジュールバンドラーを使っていなくても、<script type="module">を使ってWeb標準の依存関係解決をやっていけることがわかりました。