dom_dom0700_005

外部スクリプトを 動的に読み込んで、読み込み後に初期化処理を行いたい。最も適切な方法はどれか。

  1. document.write(‘<script src=”x.js”></script>’) を使う
  2. <script src=”x.js” async> をHTMLに直書きし、直後に初期化コードを書く
  3. const s=document.createElement(‘script’); s.src=’x.js’; s.onload=init; document.head.appendChild(s);
  4. import ‘x.js’ を任意のJSファイルにそのまま書く
正解
  1. const s=document.createElement(‘script’); s.src=’x.js’; s.onload=init; document.head.appendChild(s);
解説

動的読み込みでは script 要素を生成して onload（または addEventListener(‘load’, …)）で完了を待つのが定石。document.write は避ける。async は完了順が不定で直後のコードでは依存関係を保証できない。import はモジュール環境前提。

使用例（サンプルコード）

[ html ]

<script>
  function init(){ console.log('loaded and initialized'); }
  const s = document.createElement('script');
  s.src = 'https://example.com/lib.js';
  s.defer = false; // 動的挿入時は実行タイミングは挿入即時
  s.onload = init;
  s.onerror = () => console.error('failed to load');
  document.head.appendChild(s);
</script>