JavaScript

Webページ上でボタンを押したときに、必要な JavaScriptコードを読み込んで実行するサンプル

投稿日:2021年9月28日 更新日:

1. 必要になったときに JavaScript コードを読み込んで実行する

あるWebページ上にボタンが設置されており、これを押すと何かしらの JavaScript コードが実行されるとします。

この場合、Webページにアクセスした際にその JavaScript コードを読み込んでおく必要はありません。「ボタンを押したとき」に読み込んで実行すればよいわけです(速度に問題がなければ)。これなら、Webページの読み込み&表示の高速化にもつながります。

この動作を実現するための、JavaScript の動的インポートを利用したコード例を紹介します。 「動的インポート」というのは、「必要なときに読み込んで実行する」といった意味になります。

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 ファイル内の一番外側の “{“, “}” で表されたオブジェクトが、この moduledefault プロパティに代入されます。ですので、utils.js ファイル内の say メソッドを、module.default.say として呼び出すことができます。
  • これが、JavaScript の動的インポートです。exportimport の書き方は、このコード例以外にもいくつかあります。
  • 一度読み込んでしまえば、もう一度ボタンを押しても再度ファイルが読み込まれることはありません。

以上になります。

この例の場合、say メソッドの処理が少ないため メリットが分かりにくいですが、ここに大量のコードが記述されている場合を想像してみてください。Webページにアクセスした際に、その大量のコードを読み込まずに済むとなると、当然 Webページの読み込み&表示の速度は改善されるはずです。

3. 各ブラウザの「動的インポート」サポート状況

JavaScript modules: dynamic import() | Can I use… で確認すると、主要なブラウザでは既にサポートされていることが分かります。

4. おわりに

JavaScript コードはできるだけ分割して、モジュールとして実装するのが良さそうです。そして、必要なモジュールを必要なときに読み込んで使うという方針です。イベントが起きてからモジュールをダウンロードするので、多少レスポンスの速さは犠牲になりますが、それが問題になる箇所では、ページアクセス時に読み込ませるか、目的のイベントより先に発生するイベントで先読みさせておくなどの対策が考えられます。

5. 参考

📂-JavaScript

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

JavaScript

JSON.stringify() の引数に関する忘備録

JavaScript でよく使う JSON.stringify()メソッドですが、第二引数と第三引数の意味を忘れがちなので本ページに記録しておきます。

JavaScript

Luminous を使ってみる

ウェブページ上の画像をポップアップ表示する JavaScript ライブラリである Luminous の使い方について説明します。

Web Security

JavaScript の alert は CPUにたいした負荷を掛けないしタブを閉じれば終了します

以下の話題について書きます。 不正プログラム書き込み疑い補導 03月04日 20時04分 クリックすると同じ画面が表示され、消えなくなる不正なプログラムのアドレスをインターネットの掲示板に書き込んだと …

JavaScript

【JavaScript】 async / await の使い方

本サイトの JavaScriptで一定時間待ってから処理を開始する方法 でも少し使ったのですが、JavaScript の async / await の使い方についてこちらのページにまとめておきます。 …

JavaScript

Node.js のバージョン管理ツール nvm の使い方

目次1. nvm とは?2. nvm の導入1. すでに nvm がインストールされているかチェックする2. nvm をインストールします3. Node.js のインストール4. nvm の便利なコマ …