導入
Webサイトを制作していると、ページが重くなってしまうことはありませんか？その原因の多くは、最初からすべてのJavaScriptファイルを読み込んでいることにあります。そこで役立つのが「Dynamic import（動的インポート）」です。これを使うと、必要なタイミングで必要なコードだけを読み込めるため、サイトの初期表示速度を劇的に向上させることができます。
基礎知識
通常、JavaScriptのimport文（静的インポート）はファイルの先頭に書きます。これはページを開いた瞬間にすべてのコードを読み込むため、ファイルが大きくなると表示が遅くなります。
一方、Dynamic importは関数のような形で記述し、import()という構文を使います。これにより、ボタンを押した時や特定の画面が表示された時に初めてファイルを読み込むことが可能になります。これを「コード分割（Code Splitting）」と呼び、現代のフロントエンド開発では必須のテクニックです。
実装・解決策
Dynamic importはPromiseを返すため、async/await構文と組み合わせると非常に直感的に記述できます。以下の手順で実装します。
1. 読み込みたい機能を別ファイルとして用意する。
2. 実行したいタイミングで import() を呼び出す。
3. 返されたモジュールを使って関数や変数を実行する。
サンプルプログラム
ボタンをクリックした時にだけ、計算処理を行うモジュールを読み込む例です。
math.js（読み込まれる側のファイル）
export function add(a, b) {
return a + b;
}
main.js（実行側のファイル）
// ボタン要素を取得
const button = document.getElementById(‘calc-btn’);
// ボタンが押されたら動的に読み込みを実行
button.addEventListener(‘click’, async () => {
try {
// import()を使って必要な時に読み込む
const mathModule = await import(‘./math.js’);
// 読み込んだモジュールの関数を実行
const result = mathModule.add(10, 20);
console.log(‘計算結果:’, result);
} catch (error) {
// 読み込みに失敗した場合の処理
console.error(‘モジュールの読み込みに失敗しました’, error);
}
});
応用・注意点
Dynamic importを使う際は、以下の点に注意してください。
1. ネットワークエラーへの備え
通信環境が悪いとファイルの読み込みに失敗することがあります。必ずtry…catch文で囲み、読み込み失敗時のユーザー体験（エラー表示など）を考慮しましょう。
2. バンドラーの活用
現代のWeb開発ではViteやWebpackといった「バンドラー」を使用するのが一般的です。これらのツールは import() を検知すると、自動的にファイルを分割してビルドしてくれます。手動で細かく分ける必要はありません。
3. やりすぎに注意
何でもかんでも分割すれば良いわけではありません。分割しすぎると、読み込みリクエストの回数が増えすぎて逆に遅くなることがあります。「ユーザーが頻繁に使わない大きな機能」を優先的に分割するのが現場での鉄則です。