JavaScriptで機械学習アルゴリズムを実装して、ブラウザで動かす

結論を先に。機械学習の基礎アルゴリズムは、Pythonがなくても、ライブラリすら使わずにブラウザのJavaScriptだけで実装できます。しかもブラウザなら、損失が下がる・決定境界が育つ・重心が動く、といった学習過程をそのまま目で見られます。実際に作った4つの可視化デモを、仕組みの要点とあわせて紹介します。

なぜJavaScriptで実装するのか

学習の可視化には、その場で動いて誰でも触れるブラウザが向いています。サーバもインストールも要らず、リンクを開けば動く。アルゴリズムの中身（更新式）はほんの数行なので、JSでも十分に書けます。理解を深める目的なら、自分で一から書くのがいちばん効きます。

勾配降下法（線形回帰）

直線 y = w·x + b の w, b を、損失（予測と正解の差の二乗平均）が小さくなる方向に少しずつ動かします。更新式はこれだけです。

const e = (w * x + b) - y;   // 誤差
w -= lr * 2 * e * x;         // 勾配の向きに更新
b -= lr * 2 * e;

学習率 lr を上げると速く収束し、上げすぎると発散します。動かして確かめられます。

🔗 勾配降下の可視化（線形回帰）を試す →

ニューラルネットの逆伝播

入力2 → 隠れ層（tanh）→ 出力（sigmoid）の小さなネットでも、非線形な境界を学習できます。肝は、出力の誤差を隠れ層へ逆向きに伝える誤差逆伝播です。

const dOut = out - target;                 // 出力層の誤差
const dHidden = dOut * W2 * (1 - h*h);     // tanh を通して隠れ層へ伝播
// それぞれの重みを勾配の向きに更新

学習が進むと、背景の決定境界がぐにゃりと曲がっていきます。

🔗 ニューラルネットで分類（決定境界が育つ）を試す →

k-meansクラスタリング

教師なしで点をk個に分けます。やることは2つの繰り返しだけです。

1. 各点を、最も近い重心のグループに割り当てる
2. 各グループの重心を、所属する点の平均位置へ動かす

重心が動かなくなったら収束です。

🔗 k-meansクラスタリングの可視化を試す →

パーセプトロン

2クラスを分ける直線を学習する、最も基本的なモデルです。間違えた点があるたびに、その点の方向へ重みを少し動かします。

if (sign(w·x) !== label) {   // 誤分類のときだけ更新
  w += lr * label * x;
}

データが直線で分けられるなら、有限回で誤分類ゼロに収束します。

🔗 パーセプトロン学習の可視化を試す →

まとめ

• 勾配降下・逆伝播・k-means・パーセプトロンは、どれもJSで数行から実装できる
• ブラウザなら学習過程をリアルタイムで可視化でき、理解が深まる
• 大規模学習はPython＋GPUの領分だが、基礎を体で掴むにはJS＋ブラウザが手軽で強い

上の4つは、すべてライブラリ無しのプレーンJSで書いています。コードの中身が気になる人は、各ページのソースを覗いてみてください。