---
title: "TensorFlow.jsとは？ブラウザとNode.jsで動かすJavaScript機械学習の導入と使い方"
url: "https://www.issoh.co.jp/tech/details/7060/"
published: 2025-06-02
updated: 2026-09-27
categories: ["AI"]
publisher: "株式会社一創"
---

# TensorFlow.jsとは？ブラウザとNode.jsで動かすJavaScript機械学習の導入と使い方

TensorFlow.jsは、GoogleがオープンソースApache 2.0で公開しているJavaScript向けの機械学習ライブラリです。Pythonを使わずにブラウザやNode.jsだけでモデルの推論と学習を実行でき、ユーザーのカメラ映像や入力をサーバーへ送らずクライアント側で処理できる点が最大の特徴です。この記事では最新の安定版4.22系を前提に、CDNとnpmの導入手順、テンソル操作から推論までの最短コード、事前学習済みモデルの使い分け、Webアプリへの組み込み、つまずきやすいエラーまでを、実際に動くコードとともに整理します。

## まとめ：TensorFlow.jsの要点

- TensorFlow.jsはJavaScriptで機械学習を動かすライブラリ。ブラウザではWebGL/WebGPUでGPU計算を、Node.jsでは`@tensorflow/tfjs-node`がネイティブのlibtensorflowを使う。
- とりあえず試すならCDNの`tf.min.js`を読み込むだけ。本格的な開発やNode.js実行はnpmで`@tensorflow/tfjs`を入れる。
- 推論中心・データを外に出したくない用途はブラウザ、大規模学習や既存APIサーバへの組み込みはNode.jsが向く。
- 姿勢推定の`@tensorflow-models/posenet`は非推奨。現在は`@tensorflow-models/pose-detection`（MoveNet）を使う。

以下、定義から実装、運用時の注意点までを順に見ていきます。

## TensorFlow.jsとは何か（読み方とPython版TensorFlowとの関係）

TensorFlow.js（テンソルフロー・ジェイエス、略称tf.js）は、機械学習フレームワークTensorFlowをJavaScript/TypeScriptから使えるように移植したライブラリです。ブラウザとNode.jsの両方で動き、Webページに数行のスクリプトを足すだけで画像分類や姿勢推定などのAI機能を組み込めます。読み方は「テンソルフロー」で、TensorはAI計算で扱う多次元配列（テンソル）を指します。

### Python版TensorFlowとの違いと相互運用

本家のTensorFlowはPythonが中心で、GPUを積んだサーバーで大規模なモデルを学習する用途に強みがあります。TensorFlow.jsはその実行環境をブラウザとNode.jsに置き換えたもので、APIの設計はPython版のKeras APIに近く、`tf.sequential()`や`model.fit()`といった書き方が共通します。両者は分断されておらず、Pythonで学習したKerasモデルやSavedModelを`tensorflowjs_converter`でWeb形式（`model.json`＋重みファイル）に変換すれば、そのままブラウザで推論できます。TensorFlow本体の全体像は[TensorFlowの概要：TensorFlowとは何か、何に使うのか](/tech/details/3134/)で確認できます。

### ブラウザ機械学習でできること・できないこと

ブラウザ実行の利点は、インストール不要で配布でき、カメラ・マイク・入力データを端末内で処理するためプライバシーを保てる点です。一方で制約もはっきりしています。数百MB級の大型モデルは初回ダウンロードが重く、学習に必要なメモリと計算量はサーバーに遠く及びません。実務では「推論はブラウザ、重い学習はサーバー」と役割を分けるのが基本です。ブラウザで一からLLM級のモデルを学習させる、といった使い方は現実的ではありません。

## TensorFlow.jsの導入方法（CDNとnpmの2通り）

導入経路はブラウザ向けのCDNと、開発・Node.js向けのnpmの2つです。試すだけならCDN、TypeScriptやビルドツールを使う開発ならnpmを選びます。

### ブラウザ向け：CDNスクリプトを1行読み込む

最も速いのはjsDelivrなどのCDNから統合ビルドを読み込む方法です。バージョンを固定しておくと、後日の破壊的変更で動かなくなる事故を防げます。

```
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.22.0/dist/tf.min.js"></script>
<script>
  // 読み込めていれば tf.version が表示される
  console.log(tf.version.tfjs); // 4.22.0
</script>
```

この`@tensorflow/tfjs`統合ビルドには、WebGLバックエンドとCPUバックエンドが同梱されます。WebGPUやWASMを使う場合は後述のとおり追加パッケージを読み込みます。

### npm／Node.js向け：tfjsとtfjs-nodeの使い分け

ビルド環境ではnpmでインストールします。ブラウザ向けバンドルに含めるなら`@tensorflow/tfjs`、Node.jsで実行するなら`@tensorflow/tfjs-node`を選びます。後者はGoogleが配布するネイティブライブラリlibtensorflowをC言語バインディング経由で呼ぶため、WebGL依存のブラウザ実行より高速になることが多く、GPUを使う場合は`@tensorflow/tfjs-node-gpu`（CUDA対応）を使います。

```
# ブラウザ向けバンドルに含める場合
npm install @tensorflow/tfjs

# Node.js（CPU）で実行する場合
npm install @tensorflow/tfjs-node
```

```
// Node.js の場合は tfjs-node を読み込むだけでバックエンドが切り替わる
const tf = require('@tensorflow/tfjs-node');
console.log(tf.getBackend()); // tensorflow
```

tfjs-nodeはビルド時にネイティブアドオンをコンパイルするため、Node.jsのバージョンによっては失敗することがあります。切り替えて検証したいときは[Nodebrewとは？Node.jsのバージョン管理・インストール・切り替えを入門解説](/tech/details/3343/)が役立ちます。

## ブラウザ実行とNode.js実行の違い（バックエンドと選び方）

TensorFlow.jsの速度と挙動は「どのバックエンドで計算するか」で決まります。GSCでも「node.js vs tensorflow」「tensorflow.js node.js」といった比較クエリで表示されており、実行環境の選択は多くの読者が迷う論点です。

### バックエンドの種類と選び方（WebGL・WebGPU・WASM・CPU）

バックエンドは計算を実際に行う演算エンジンです。ブラウザには主に4種類あり、用途で選びます。

| バックエンド     | 実行環境    | 特徴                           |
| ---------- | ------- | ---------------------------- |
| WebGL      | ブラウザ    | 既定。GPUで計算。対応環境が広い            |
| WebGPU     | ブラウザ    | 次世代GPU API。Chrome M113で既定有効  |
| WASM       | ブラウザ    | GPU非対応環境向け。小型モデルで高速          |
| tensorflow | Node.js | tfjs-nodeがlibtensorflowを直接呼ぶ |

WebGPUはWebGLの後継となる新しいAPIで、Chromeでは2023年5月2日リリースのM113から既定で有効になりました。使うには専用バックエンドを追加し、明示的に切り替えます。

```
import * as tf from '@tensorflow/tfjs';
import '@tensorflow/tfjs-backend-webgpu';

await tf.setBackend('webgpu');
await tf.ready();
console.log(tf.getBackend()); // webgpu
```

WebGPU非対応の古いブラウザに配布する場合は、WebGLへ自動でフォールバックする設計にしておくと安全です。

### ブラウザとNode.jsのどちらで動かすかの判断基準

迷ったら次の基準で切り分けます。推論が中心で、ユーザーの画像・音声・入力を外部に送りたくないならブラウザ実行が正解です。カメラ映像をその場で処理するデモや、インストール不要で配りたいツールもブラウザが向きます。逆に、大量データでモデルを学習させる、既存のNode.js製APIサーバーに推論を組み込む、といった用途はNode.js（tfjs-node）を選びます。tfjs-nodeはネイティブ実装のぶんブラウザより速いことが多く、サーバー側のバッチ処理に適します。

採用すべきでない使い方もはっきりしています。数百MBの大型モデルをブラウザで毎回ダウンロードさせると初回表示が数秒〜数十秒かかり、UXが崩壊します。大規模な学習をブラウザで回すのもメモリと速度の面で非現実的です。これらはサーバー側のtfjs-nodeやPython版TensorFlowに任せ、ブラウザには軽量な推論だけを置くのが定石です。

## TensorFlow.jsの基本的な使い方（テンソルから推論まで）

TensorFlow.jsのすべての計算は、多次元配列であるテンソルを介して行われます。まずテンソルの生成と演算、次に学習済みモデルを読み込んで推論する流れを押さえれば、実装の基礎は固まります。

### テンソルの生成と基本演算

テンソルは`tf.tensor()`で作ります。JavaScriptの配列とは別物で、計算はGPU上で行われるため、結果を取り出すときは`dataSync()`や非同期の`data()`を使います。

```
import * as tf from '@tensorflow/tfjs';

const a = tf.tensor([1, 2, 3, 4], [2, 2]); // 2x2 行列
const b = tf.tensor([5, 6, 7, 8], [2, 2]);
const c = a.matMul(b);   // 行列積
c.print();               // コンソールに出力
console.log(c.dataSync()); // Float32Array で値を取得
```

### 事前学習済みモデルを読み込んで推論する最短コード

自分で層を組まなくても、公開されている学習済みモデルを読み込めばすぐ推論できます。次はMobileNetで画像を分類する例です。

```
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.22.0"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet"></script>
<img id="img" src="cat.jpg" />
<script>
  const run = async () => {
    const model = await mobilenet.load();
    const preds = await model.classify(document.getElementById('img'));
    console.log(preds); // [{className:'tabby cat', probability:0.9...}, ...]
  };
  run();
</script>
```

## 事前学習済みモデルの選び方（画像分類・物体検出・姿勢推定）

TensorFlow.jsには公式の学習済みモデルがnpmパッケージとして揃っており、用途ごとに選びます。ここは古い解説記事が最も陳腐化しやすい領域なので、現行のパッケージ名で押さえておきます。

### 画像分類と物体検出：mobilenetとcoco-ssd

画像に写る物が何かを1つのラベルで返すなら`@tensorflow-models/mobilenet`、画像内の複数の物体を位置（バウンディングボックス）付きで検出するなら`@tensorflow-models/coco-ssd`を使います。coco-ssdはCOCOデータセットの80カテゴリに対応し、リアルタイムの物体検出に向きます。どちらも数MB規模で、ブラウザ実行に現実的なサイズです。

### 姿勢推定：PoseNetは非推奨、pose-detection（MoveNet）へ

人体の関節位置を推定する姿勢推定では、かつて`@tensorflow-models/posenet`が定番でしたが、これは非推奨になり、単体パッケージの最終公開は2020年頃で止まっています。現在の推奨は`@tensorflow-models/pose-detection`で、この統合パッケージからMoveNet・BlazePose・（互換用の）PoseNetを選べます。MoveNetは17個のキーポイントを検出し、最近のノートPCやスマートフォンで50fps以上で動くため、Webカメラを使ったリアルタイム処理に適します。古い記事のコードをそのまま流用すると動かないので、姿勢推定を実装するときは必ずpose-detection側のAPIを確認してください。

## TensorFlow.jsで独自モデルを学習・保存する

既製モデルで足りない場合は、Layers APIで自分のモデルを定義して学習させます。書き味はPython版Kerasにそっくりで、層を積んでコンパイルし、`fit()`で学習します。

### モデルの定義と学習（Layers API）

```
const model = tf.sequential();
model.add(tf.layers.dense({units: 16, activation: 'relu', inputShape: [4]}));
model.add(tf.layers.dense({units: 3, activation: 'softmax'}));
model.compile({optimizer: 'adam', loss: 'categoricalCrossentropy', metrics: ['accuracy']});

await model.fit(xs, ys, {
  epochs: 50,
  callbacks: {onEpochEnd: (e, logs) => console.log(e, logs.loss)}
});
```

学習データはテンソルとして渡します。ブラウザで学習する場合はデータ量とエポック数を抑え、重い学習はNode.jsやPython側に寄せるのが実務上の判断です。

### モデルの保存と再読み込み

学習したモデルは`model.save()`で保存できます。保存先はブラウザのローカルストレージ、IndexedDB、ダウンロード、Node.jsのファイルシステムなどをURLスキームで指定します。次回はそのパスから`tf.loadLayersModel()`で読み戻すだけで、再学習は不要です。

```
// ブラウザのローカルストレージへ保存
await model.save('localstorage://my-model');
// 読み込み
const loaded = await tf.loadLayersModel('localstorage://my-model');
```

## WebアプリケーションやReactへの組み込み

実際のプロダクトでは、素のscriptタグよりReactやVueなどのフレームワーク内で使うことが多くなります。ReactではuseEffect内でモデルを一度だけロードし、useRefでvideo/canvas要素を参照して推論結果を描画する構成が基本です。モデルの読み込みは重い処理なので、コンポーネントの再レンダリングのたびに再ロードしない設計が重要です。サーバー側でモデルを保持し、ブラウザには軽い推論だけを任せるハイブリッド構成を採る場合は、描画とデータ取得の責務分担を意識すると保守しやすくなります。Reactのレンダリング設計を見直す際は[React Server Componentsの基本概要と機能の紹介](/tech/details/4003/)も参考になります。

## TensorFlow.jsのよくあるエラーと対処

導入直後につまずきやすいポイントは、原因が数パターンに集中します。

- **tfが未定義（tf is not defined）**：CDNの読み込み順が原因。`tf.min.js`を先に読み込み、モデルパッケージを後に置く。
- **テンソルの形状不一致**：入力テンソルの`shape`がモデルの`inputShape`と合っていない。`reshape()`や`expandDims()`で次元を揃える。
- **WebGL非対応・制限環境**：古い端末やGPU無効環境ではWebGLが使えない。`tf.setBackend('wasm')`でWASMへ切り替える。
- **メモリ使用量が増え続ける**：WebGLバックエンドのテンソルはGPU上にあり自動解放されない。`tf.tidy()`で計算を囲むか、不要になったテンソルを`dispose()`で明示解放する。

特にメモリリークは、ループ内で毎フレーム推論するリアルタイム処理で顕在化します。`tf.tidy()`で囲むだけで中間テンソルが自動解放されるため、実装の早い段階で組み込んでおくと安全です。

## よくある質問（FAQ）

### TensorFlow.jsは無料で使えますか？

はい。TensorFlow.jsはApache License 2.0で公開されているオープンソースソフトウェアで、商用利用を含めて無料で使えます。利用にあたってライセンス料やアカウント登録は不要です。ただし事前学習済みモデルの中には個別のライセンスや利用規約が設定されているものもあるため、商用で使う際は各モデルの配布元の条件を確認してください。

### Python版TensorFlowで作ったモデルをブラウザで動かせますか？

動かせます。Pythonで学習したKerasモデルやSavedModelを、変換ツール`tensorflowjs_converter`でWeb形式（`model.json`と重みファイル）に変換すれば、`tf.loadLayersModel()`や`tf.loadGraphModel()`でブラウザから読み込めます。学習はサーバー、推論はブラウザという分担が一般的な構成です。

### TensorFlow.jsの最新バージョンは何ですか？

2026年時点の安定版は4.22系です。CDNやnpmで導入するときはバージョンを固定しておくと、将来の破壊的変更で既存コードが動かなくなる事故を防げます。最新の正確なバージョンはnpmの`@tensorflow/tfjs`ページや公式リポジトリで確認してください。

### スマートフォンのブラウザでも動きますか？

動きます。iOS SafariやAndroid ChromeでもWebGLバックエンドで実行でき、MoveNetのような軽量モデルはスマートフォンでもリアルタイムに近い速度で動作します。ただし端末の性能差が大きいため、モデルサイズを小さく保ち、GPUが使えない環境ではWASMバックエンドへ切り替えるフォールバックを用意しておくと安定します。

### PoseNetは今も使えますか？

単体の`@tensorflow-models/posenet`は非推奨で、最終公開は2020年頃で更新が止まっています。現在は`@tensorflow-models/pose-detection`に統合され、こちらからMoveNetやBlazePose、互換用のPoseNetを選ぶ形になりました。新規実装ではMoveNetを使うのが標準です。

## 関連記事

- [TensorFlowの概要：TensorFlowとは何か、何に使うのか](/tech/details/3134/)
- [Nodebrewとは？Node.jsのバージョン管理・インストール・切り替えを入門解説](/tech/details/3343/)
- [React Server Componentsの基本概要と機能の紹介](/tech/details/4003/)

---

出典: [TensorFlow.jsとは？ブラウザとNode.jsで動かすJavaScript機械学習の導入と使い方](<https://www.issoh.co.jp/tech/details/7060/>)（株式会社一創）