JavaScriptでTensorFlow.jsを動的に読み込む方法｜HTMLに直接書かずに機械学習を実行する

HTMLに<script>を直書きしない理由

• 保守性：UIと依存関係の責務分離。JS側で読み込みを完結。
• 必要時ロード：初期表示を軽くし、必要になったら読み込む戦略が取りやすい。
• 順序制御：依存を伴う外部ライブラリをコードで厳密に制御。

最小実装：動的読み込み + tf.tensor()

以下が本記事の核心となるスニペットです。F12 のコンソールでも試せます。

const script = document.createElement("script");
script.src = "https://cdn.jsdelivr.net/npm/@tensorflow/tfjs";
script.onload = () => {
  const t = tf.tensor([1, 2, 3, 4]); // ← ロード完了後ならOK
  t.print();
};
document.head.appendChild(script);

仕組みの解説

1. script要素生成：document.createElement("script")
2. CDNを指定：script.src = "https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"
3. onloadで初期化：完全ロード後にTensorFlow.js APIを利用
4. DOMへ追加：document.head.appendChild(script)

この流れにより、HTMLを編集せずJavaScriptのみで導入できます。

応用：複数ライブラリやバージョン切替

Promiseで順序制御

function loadScript(src){
  return new Promise((resolve,reject)=>{
    const s=document.createElement("script");
    s.src=src; s.async=false; // 明示的に順序を維持
    s.onload=()=>resolve();
    s.onerror=()=>reject(new Error(`Failed to load ${src}`));
    document.head.appendChild(s);
  });
}

(async ()=>{
  //https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.22.0/dist/tf.min.js
  await loadScript("https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest");
  await loadScript("https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-vis@latest");

  const t = tf.tensor([1, 2, 3, 4]);
  t.print();
  // 可視化例（開発時のみ）
  if (window.tfvis) {
    tfvis.show.valuesDistribution({ name: "My Tensor" }, t);
  }
})();

必要なときだけ読み込む（遅延ロード）

let tfReady;
function ensureTF(){
  if (tfReady) return tfReady; // 2回目以降は同じPromiseを返す
  tfReady = new Promise((resolve)=>{
    const s=document.createElement('script');
    s.src='https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest';
    s.onload=resolve; document.head.appendChild(s);
  });
  return tfReady;
}

async function run(){
  await ensureTF();
  const t = tf.tensor([0,1,2,3]).reshape([2,2]);
  t.print();
}

// ボタン等のイベントで実行
// document.querySelector('#run').addEventListener('click', run);

バージョン固定・検証

// プロダクションは互換性のため固定推奨
await loadScript("https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.21.0");

よくあるエラーと対処

• tf.tensor is not a function：本体が未ロード。script.onload 内で呼ぶ。
• tfがundefined：CDNのURLやネットワーク、広告ブロッカーを確認。
• モジュールと混在：type="module" とCDNグローバルの併用は設計を分離。