ラボラジアン 目次
1. 必要になったときに JavaScript コードを読み込んで実行する
あるWebページ上にボタンが設置されており、これを押すと何かしらの JavaScript コードが実行されるとします。
この場合、Webページにアクセスした際にその JavaScript コードを読み込んでおく必要はありません。「ボタンを押したとき」に読み込んで実行すればよいわけです（速度に問題がなければ）。これなら、Webページの読み込み＆表示の高速化にもつながります。
この動作を実現するための、JavaScript の動的インポートを利用したコード例を紹介します。 「動的インポート」というのは、「必要なときに読み込んで実行する」といった意味になります。
2. コード例
(1) JavaScript モジュールの記述
ボタンが押されたときに実行する JavaScript コードを単独の JavaScript ファイルに記述するのですが、今回ファイル名は、utils.js とします。内容は以下です。
export default {
say: (msg) => {
alert(msg);
}
};
sayという名前のメソッド (関数) を定義しています。受け取ったメッセージを、アラート表示するだけのメソッドです。- ここでは 1つのメソッドしか記述していませんが、複数のメソッドを記述することもできます。
このファイルは、他のファイルから読み込んで貰うために、「JavaScript モジュール」として記述しています。詳細は省きますが、export と書くことによって「以下のオブジェクトを外部にエクスポートします」という意味になっており、そのエクスポートされたモジュールを外部からインポートして貰うというイメージです。
(2) HTMLファイル側の記述
HTML ファイル側に、「ボタンそのもの」と「ボタンが押されたときに、utils.js を読み込んで実行するコード」を記述します。
ボタンは <button> タグで記述し、id 属性（値は “btn”）を指定します。そして、ボタンを押したときのイベントリスナーの中で、utils.js を読み込んで実行するコードを記述します。
（省略）
<button id="btn">モジュールを読み込んで実行する</button>
（省略）
<!-- 以下を body タグの最後に記述する -->
<script>
// ボタンを押したときのイベントリスナー
document.querySelector('#btn').addEventListener('click', () => {
// モジュールを読み込む
import("./utils.js").then((module) => {
// 読み込んだモジュールを実行する
module.default.say("Hello, Dynamic Import!");
});
});
</script>
（省略）
import()で JavaScript ファイルを読み込むと、そのファイルがモジュールとしてmoduleに代入されます。そして、utils.jsファイル内の一番外側の “{“, “}” で表されたオブジェクトが、このmoduleのdefaultプロパティに代入されます。ですので、utils.jsファイル内のsayメソッドを、module.default.sayとして呼び出すことができます。- これが、JavaScript の動的インポートです。
exportとimportの書き方は、このコード例以外にもいくつかあります。 - 一度読み込んでしまえば、もう一度ボタンを押しても再度ファイルが読み込まれることはありません。
以上になります。
この例の場合、say メソッドの処理が少ないため メリットが分かりにくいですが、ここに大量のコードが記述されている場合を想像してみてください。Webページにアクセスした際に、その大量のコードを読み込まずに済むとなると、当然 Webページの読み込み＆表示の速度は改善されるはずです。
3. 各ブラウザの「動的インポート」サポート状況
JavaScript modules: dynamic import() | Can I use… で確認すると、主要なブラウザでは既にサポートされていることが分かります。
4. おわりに
JavaScript コードはできるだけ分割して、モジュールとして実装するのが良さそうです。そして、必要なモジュールを必要なときに読み込んで使うという方針です。イベントが起きてからモジュールをダウンロードするので、多少レスポンスの速さは犠牲になりますが、それが問題になる箇所では、ページアクセス時に読み込ませるか、目的のイベントより先に発生するイベントで先読みさせておくなどの対策が考えられます。
