JavaScript 逆引き集 | 動的 import（コード分割）

動的 import（コード分割） — const mod = await import('./mod.js')

JavaScript の 動的 import は「必要なときにだけモジュールを読み込む」仕組みです。
通常の import はファイルの先頭で書き、ページ読み込み時に全部読み込まれますが、動的 import() を使うと 条件に応じて後から読み込むことができます。これにより コード分割（遅延ロード） が可能になります。

基本のコード例

async function loadModule() {
  // 必要になったときにモジュールを読み込む
  const mod = await import('./mod.js');
  mod.hello(); // mod.js 内の関数を呼び出す
}

loadModule();

async function loadModule() {
  // 必要になったときにモジュールを読み込む
  const mod = await import('./mod.js');
  mod.hello(); // mod.js 内の関数を呼び出す
}

loadModule();

• import('./mod.js') は Promise を返す。
• await を使うと読み込み完了後にモジュールを利用できる。
• mod はモジュールオブジェクト。export された関数や変数をプロパティとして持つ。

よく使うテンプレート集

条件付きでモジュールを読み込む

async function runFeature(flag) {
  if (flag) {
    const { feature } = await import('./feature.js');
    feature();
  } else {
    console.log("機能は無効です");
  }
}

async function runFeature(flag) {
  if (flag) {
    const { feature } = await import('./feature.js');
    feature();
  } else {
    console.log("機能は無効です");
  }
}

イベント発生時に読み込む

document.getElementById("btn").addEventListener("click", async () => {
  const { showDialog } = await import('./dialog.js');
  showDialog();
});

document.getElementById("btn").addEventListener("click", async () => {
  const { showDialog } = await import('./dialog.js');
  showDialog();
});

複数モジュールを動的に読み込む

async function loadAll() {
  const [math, util] = await Promise.all([
    import('./math.js'),
    import('./util.js')
  ]);
  console.log(math.add(2, 3), util.format("Hello"));
}

async function loadAll() {
  const [math, util] = await Promise.all([
    import('./math.js'),
    import('./util.js')
  ]);
  console.log(math.add(2, 3), util.format("Hello"));
}

例題: 画像編集機能を必要なときだけロード

<button id="edit">画像編集開始</button>
<script>
  document.getElementById("edit").addEventListener("click", async () => {
    // 画像編集モジュールを遅延ロード
    const { startEditor } = await import('./imageEditor.js');
    startEditor();
  });
</script>

<button id="edit">画像編集開始</button>
<script>
  document.getElementById("edit").addEventListener("click", async () => {
    // 画像編集モジュールを遅延ロード
    const { startEditor } = await import('./imageEditor.js');
    startEditor();
  });
</script>

• 効果: ページ読み込み時には imageEditor.js を読み込まず、ボタンを押したときだけロード。
• メリット: 初期表示が速くなる。不要な機能を後から読み込める。

実務でのコツ

• コード分割: 大きなアプリでは初期ロードを軽くするために動的 import が有効。
• Tree Shaking: 不要なコードを削除する仕組みと組み合わせるとさらに効率的。
• ブラウザ対応: モダンブラウザは対応済み。古い環境ではバンドラ（Webpack, Viteなど）が必要。
• Node.js: Node.js でも ESM 環境なら await import() が使える。

ありがちなハマりポイントと対策

• トップレベルで await が使えない:
  • 対策: 関数を async にしてその中で await import() を使う。
  • Node.js v14+ や一部ブラウザでは「トップレベル await」が使える。
• モジュールパスの間違い:
  • 対策: 相対パス ./mod.js を正しく指定。拡張子 .js を忘れない。
• 古いブラウザで動かない:
  • 対策: バンドラでビルドして対応。

練習問題（言語切り替え）

async function loadLang(lang) {
  const mod = await import(`./lang/${lang}.js`);
  console.log("メッセージ:", mod.message);
}

loadLang("ja"); // lang/ja.js を読み込む

async function loadLang(lang) {
  const mod = await import(`./lang/${lang}.js`);
  console.log("メッセージ:", mod.message);
}

loadLang("ja"); // lang/ja.js を読み込む

• 効果: 言語コードに応じてモジュールを切り替え、国際化対応ができる。

直感的な指針

• 通常の import = 最初から全部読み込む。
• 動的 import() = 必要なときにだけ読み込む。
• Promiseを返すので await で待つ。
• コード分割や遅延ロードに使うとアプリが軽くなる。

これを覚えれば「条件付き機能」「イベント時ロード」「多言語対応」など、効率的なモジュール管理ができるようになります。