🧠 Interactive Neural Network
詳細設計書

1. 概要

1.1 目的

本文書は、ブラウザ上で動作するインタラクティブ・ニューラルネットワーク学習ビジュアライザ neural_network.html の詳細設計を記述する。 XOR問題を題材に、3層フィードフォワードNNの順伝播・逆伝播をフルスクラッチ実装し、 Canvas上にリアルタイムで可視化する。

1.2 スコープ

1.3 機能一覧

2. システム構成図

本システムは単一HTMLファイルに全コードが格納されたクライアントサイドアプリケーションである。

図2-1: システム全体構成図

3. ニューラルネットワーク アーキテクチャ

3.1 ネットワーク構造

3層フィードフォワードネットワーク（入力層 → 隠れ層 → 出力層）を採用する。

図3-1: ネットワークトポロジー（隠れ層4ノードの例）

3.2 層仕様

3.3 パラメータ数

入力→隠れ 重み : 2 × H
隠れバイアス   : H
隠れ→出力 重み : H
出力バイアス   : 1
──────────────────
合計パラメータ : 4H + 1

3.4 重み初期化

全重み・バイアスを U(-1, 1) の一様乱数で初期化する。

const rand = () => Math.random() * 2 - 1;

4. クラス設計

図4-1: クラス図

4.1 NeuralNetwork クラス

4.2 プロパティ詳細

5. 順伝播（Forward Propagation）

図5-1: 順伝播データフロー

5.1 隠れ層の計算

for (let j = 0; j < H; j++) {
  let z = wIH[0][j] * x0 + wIH[1][j] * x1 + bH[j];
  hOut[j] = act(z);    // act = sigmoid | tanh | relu
}

5.2 出力層の計算

let zO = bO;
for (let j = 0; j < H; j++) zO += wHO[j] * hOut[j];
const out = sigmoid(zO);  // 出力層は常にSigmoid

6. 逆伝播（Backpropagation）

図6-1: 逆伝播による勾配の流れ

6.1 誤差と出力層の勾配

const err = target - out;           // 誤差
totalLoss += err * err;             // 二乗誤差 (MSE用)
const dO = err * dsigmoid(out);     // 出力層δ

6.2 隠れ層への勾配伝播

for (let j = 0; j < H; j++) {
  dH[j] = dO * wHO[j] * dact(hOut[j]);
}

6.3 パラメータ更新

for (let j = 0; j < H; j++) {
  wHO[j]    += lr * dO   * hOut[j];   // 隠れ→出力 重み
  wIH[0][j] += lr * dH[j] * x0;       // 入力→隠れ 重み (x₁側)
  wIH[1][j] += lr * dH[j] * x1;       // 入力→隠れ 重み (x₂側)
  bH[j]     += lr * dH[j];            // 隠れバイアス
}
bO += lr * dO;                         // 出力バイアス

7. 活性化関数

7.1 関数選択ロジック

function getAct(name) {
  if (name === 'tanh')  return [tanhAct, dtanh];
  if (name === 'relu')  return [relu,    drelu];
  return [sigmoid, dsigmoid];   // デフォルト
}

8. シーケンス図

8.1 自動学習フロー

図8-1: 自動学習シーケンス図

8.2 テスト推論フロー

図8-2: テスト推論シーケンス図

8.3 活性化関数モーダル表示フロー

図8-3: モーダル表示シーケンス図

9. 状態遷移図

図9-1: アプリケーション状態遷移図

10. UIコンポーネント構成

図10-1: UIコンポーネントツリー

10.1 レスポンシブ対応

11. Canvas 描画仕様

11.1 描画レイヤー順序

11.2 結線の色・太さルール

αは |tanh(w)| × 0.7 + 0.1 で算出。重みの絶対値が大きいほど色が濃く、線が太くなる。

11.3 パーティクルアニメーション

11.4 高DPI対応

dpr = window.devicePixelRatio || 1;
canvas.width  = W * dpr;
canvas.height = H * dpr;
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);

11.5 ノード配置アルゴリズム

function nodePositions() {
  // padX=100, padY=60 の余白を確保し
  // 各層を X 方向に等間隔配置
  // 各層内のノードを Y 方向に均等分配
  const x = padX + (usableW / 2) * layerIndex;
  const y = padY + (usableH / (nodeCount + 1)) * (nodeIndex + 1);
}

12. データ仕様

12.1 学習データ（XOR）

const XOR = [[0,0,0], [0,1,1], [1,0,1], [1,1,0]];

12.2 損失関数

平均二乗誤差（MSE）を使用する。

loss = (1/N) × Σ (target - output)²
     = (1/4) × Σ (target_i - ŷ_i)²

12.3 収束判定

本実装では明示的な収束判定は設けず、ユーザーが Loss 値を目視確認して停止する設計。 典型的には Loss < 0.001 で実用的に収束とみなせる。

13. イベント一覧

14. 非機能要件

15. 用語集