CNN と Transformer — データの構造を活かす設計

📐 コラム・イン・コラム：「224×224×3 → 150,528 次元」って何？ 図でゆっくり

① まず「224×224×3」の意味

カラー画像1枚は、コンピュータの中で 3つの数字の組合せ（縦×横×色チャンネル） として表されます：

• 224：縦のピクセル数（高さ）
• 224：横のピクセル数（幅）
• 3：色チャンネルの数 — R（赤）, G（緑）, B（青）の3枚を重ねたものがカラー画像

② 「次元のベクトル」 = 一直線に並べた数列

全結合層（MLP）は 「縦長の一直線の数値リスト」しか受け取れません。なので画像を扱うには、3次元の数値の塊（224×224×3）を 無理矢理 1列に並べ直す 操作（フラット化）が必要：

計算チェック：$224 \times 224 \times 3 = 50{,}176 \times 3 = 150{,}528$。1枚の画像が150,528個の数字に変換されました。

③ 「全結合層で処理する」とは — 1.5億個のパラメータの正体

全結合層（fully connected layer）は、入力の 全ての数値 が、出力の 全てのニューロン に 1本ずつ独立した重み線で繋がっている 層のこと：

④ なぜ「爆発」と表現するか

• たった 1層目だけ で 1.5 億個のパラメータ
• ChatGPT級の深さ（数十〜数百層）でこの調子だと、すぐ 数兆個 に到達
• 1パラメータあたり4バイトと仮定すると、1.5億 × 4 = 600 MB がこの1層のためだけにメモリに居座る
• 学習データもそのぶん必要（パラメータの数倍以上のデータがないと過学習）→ 現実的に学習不可能

一方、後で見る CNN なら、同じ画像を扱うのに カーネル（例：3×3×3 = 27個）を共有 するので、第1層のパラメータは 数百個〜数千個 で済みます。桁違いの効率です。

💡 1行まとめ： 「224×224×3 → 150,528 次元」は、カラー画像を全結合層が読める一直線の数字リストに変換したサイズ。 それを 1024 個のニューロンに全部繋ぐと、重みが 150,528 × 1024 ＝ 約1.5億個 必要になる、ということ。

2.4 パラメータ数で比較

150528次元（224×224×3 画像）→ 256チャンネル の中間層を作るとき：

方式	パラメータ数	比率
全結合層（フラット化）	約 38,500,000	1×
畳み込み層（3×3 × 256ch）	約 7,000	約 1/5500

5500倍も効率的。これがCNNが画像認識を可能にした最大の理由。

① 復習：勾配とは何だったか

第4章で見たように、勾配は「重み $W$ を少し動かしたら損失 $L$ がどれくらい変わるか」を表す数値（$\dfrac{\partial L}{\partial W}$）。 学習はこの勾配の 逆方向 に重みを動かすことで進みます：

ここで $\eta$（学習率）は小さい正の数（典型的に 0.001 など）。

② 勾配が「消える」とどうなる？

勾配 $\dfrac{\partial L}{\partial W} \approx 0$ になると：

重みがまったく動かない＝学習が止まる。これが「勾配が消えると問題」の核心です。

③ なぜ勾配が消えるのか — 掛け算の連鎖

誤差逆伝播法（§4.2 で詳述）では、各層の勾配は 後段の勾配 × 自分の偏微分 という形で繋がっています：

各偏微分項が 1未満の値（例：Sigmoid 活性化なら最大でも 0.25 程度）だと、層が深くなるほど 掛け算で指数的に小さくなる：

層数	各層の偏微分 $\approx 0.9$ のとき	各層の偏微分 $\approx 0.5$ のとき
10層	$0.9^{10} \approx 0.35$	$0.5^{10} \approx 0.001$
50層	$0.9^{50} \approx 0.005$	$0.5^{50} \approx 10^{-15}$
100層	$0.9^{100} \approx 0.0000266$	$0.5^{100} \approx 10^{-30}$

100層もあると、入力側に近い $W_1$ の勾配は 事実上ゼロ になります。

④ 何が実際に起きるか — アニメで見る

下の図は 勾配が右から左に流れていく様子 をアニメーションで表現したもの。 赤いパルス（=勾配の信号）が出力側（右）で発生し、左に伝わるたびに ×0.9 されて細くなっていきます。 入力側（左端）に着くころには 事実上消滅。

⑤ なぜそれが「有害」なのか

勾配消失が起きると、深いネットは 「浅いネットより悪化する」 という奇妙な状態になります：

• 浅い層（入力に近い）の重みが固まる：低次の特徴（エッジなど）も学習できない
• 固まった重みの上に組み立てられる中間〜出力層は、貧弱な特徴をベースに学習せざるを得ない
• 結果として、深くした分は無駄+足を引っ張る（パラメータが増えただけで、初期値のランダム値が残るのと同じ）

深いネットの理論的な表現力は浅いネットより高いはずなのに、勾配消失のせいで実現できない — これが2014年頃までの深層学習の壁でした。ResNet（§3.2） が「ショートカットで勾配を直接届ける」アイデアでこの壁を打ち破ります。

4.1 RNNの限界

Transformer以前の系列モデルは RNN（リカレントNN）/ LSTM でした。 これは「1単語ずつ順番に処理」する構造：

"猫が魚を食べた"
   ↓
"猫" → 状態1 → "が" → 状態2 → "魚" → 状態3 → "を" → 状態4 → "食べた" → 状態5

問題：

• 並列化できない（順番に処理する必要がある）
• 長距離の依存関係が弱い（最初の単語の情報が、長い系列を経るとぼやける）
• 学習が遅い

4.4 Self-Attentionの数式

実際の計算は、各単語に対して 3つのベクトル を作って行います：

4.6 Transformerが侵食した領域

• 2017: 機械翻訳（元論文）
• 2018: 自然言語理解（BERT）、生成（GPT-1）
• 2020: 画像認識（ViT, Vision Transformer）
• 2021: タンパク質構造予測（AlphaFold2）
• 2022: 一般人にAIが浸透（ChatGPT）
• 2023〜: マルチモーダル（画像+言語、音声+言語）

「言語のためのアーキテクチャ」として生まれたが、今や あらゆる分野の事実上の標準 になっている。

ここまでの違いを JavaScript で並べると、各アーキテクチャの本質が一目で分かります。 数式や概念より、コードのほうが理解しやすいプログラマ向けの章末ボーナスです。

すべて 「forward pass（順伝播）」 の実装イメージ。 実際は tf.js や ONNX などのライブラリが行列演算を最適化していますが、ここでは 構造の対比 に集中するため 素のJSで愚直に 書いています。 補助関数 matVecMul / matMul / transpose / softmax などは別途定義されている前提です。

6.1 MLP — 全結合の基本

// MLP の順伝播
// x:       number[]       — 入力ベクトル
// weights: number[][][]   — 各層の重み行列 [layer][out][in]
// biases:  number[][]     — 各層のバイアス [layer][out]
function mlpForward(x, weights, biases) {
  let h = x;
  for (let layer = 0; layer < weights.length; layer++) {
    h = matVecMul(weights[layer], h);         // 行列ベクトル積（全結合）
    h = h.map((v, i) => v + biases[layer][i]);
    h = h.map(v => Math.max(0, v));           // ReLU 活性化
  }
  return h;                                    // 出力ベクトル
}

全結合：出力の各成分が、入力の全成分から影響を受ける。空間構造の概念がない。

6.2 CNN — カーネルが画像上を滑る

// 2次元畳み込みの順伝播
// x:       number[H][W][C_in]              — 画像
// kernels: number[K][K][C_in][C_out]       — 小さなフィルタ
// biases:  number[C_out]
function conv2dForward(x, kernels, biases) {
  const [H, W, Cin] = [x.length, x[0].length, x[0][0].length];
  const K = kernels.length;
  const Cout = kernels[0][0][0].length;

  const out = createZeros3D(H - K + 1, W - K + 1, Cout);

  for (let i = 0; i < H - K + 1; i++) {              // 画像をスライド
    for (let j = 0; j < W - K + 1; j++) {
      for (let cOut = 0; cOut < Cout; cOut++) {
        let sum = 0;
        // ★ 同じカーネルを画像全体で使い回す（パラメータ共有）
        for (let di = 0; di < K; di++)
          for (let dj = 0; dj < K; dj++)
            for (let cIn = 0; cIn < Cin; cIn++)
              sum += x[i + di][j + dj][cIn] * kernels[di][dj][cIn][cOut];
        out[i][j][cOut] = Math.max(0, sum + biases[cOut]);  // ReLU
      }
    }
  }
  return out;                                          // (H-K+1) × (W-K+1) × Cout
}

局所性 + パラメータ共有：カーネルは小さい範囲しか見ないが、それを 全位置で使い回す。 「猫の耳」が画像のどこにあっても認識できる平行移動不変性の正体。

6.3 RNN — 時刻ループで状態を持ち越す

// RNN の順伝播
// xSequence: number[T][nInput]             — T時刻の系列
// Wxh:       number[nHidden][nInput]
// Whh:       number[nHidden][nHidden]      — 隠れ状態の自己結合
// bh:        number[nHidden]
function rnnForward(xSequence, Wxh, Whh, bh) {
  const T = xSequence.length;
  const nHidden = Wxh.length;
  let h = new Array(nHidden).fill(0);                // 初期状態
  const outputs = [];

  for (let t = 0; t < T; t++) {                      // ★ 時刻ループ（並列化不可）
    const xt = xSequence[t];
    // 前の状態 h と現在の入力 xt から、新しい状態 h を作る
    const Wxh_xt = matVecMul(Wxh, xt);
    const Whh_h  = matVecMul(Whh, h);
    h = Wxh_xt.map((v, i) => Math.tanh(v + Whh_h[i] + bh[i]));
    outputs.push(h);
  }
  return outputs;                                     // T × nHidden
}

時間軸の再帰：for (let t = 0; t < T; t++) ループの中で、前の h を使って次の h を計算。 この 順次処理が必須 なので、並列化できない（＝学習が遅い、長距離依存が弱い）。

6.4 Transformer (Self-Attention) — 全位置を一発で並列計算

// Self-Attention の順伝播
// xSequence: number[T][dModel]             — T位置の系列
// Wq, Wk, Wv: 重み行列（Q/K/V を作る）
function selfAttentionForward(xSequence, Wq, Wk, Wv) {
  const dK = Wq[0].length;

  // ★ 各位置の Q, K, V を一発で並列計算（時刻ループなし！）
  const Q = matMul(xSequence, Wq);                   // T × dK
  const K = matMul(xSequence, Wk);                   // T × dK
  const V = matMul(xSequence, Wv);                   // T × dV

  // ★ 全位置間の Attention スコアを行列演算で一気に
  const scores = matMul(Q, transpose(K))             // T × T
    .map(row => row.map(v => v / Math.sqrt(dK)));
  const attnWeights = scores.map(softmax);           // 行ごとに softmax

  // 重み付き和
  return matMul(attnWeights, V);                     // T × dV
}

並列化と長距離依存：時刻ループがなく、すべての位置間の関係を 1回の行列演算 で取れる。 位置 1 と位置 1000 の関係も、隣同士と同じコストで学べる（RNNなら情報が薄れる）。これが Transformer の革命。

6.5 4アーキテクチャの違いを表で

アーキテクチャ	入力の形	核心ループ	並列化	パラメータ共有
MLP	(n,) 1次元	層の直列	○	なし
CNN	(H, W, C) 2D + ch	空間スライド (i, j)	○	★ カーネルを位置で共有
RNN	(T, n) 系列	★ 時刻 t（順次）	×（時刻方向）	★ 重みを時刻で共有
Transformer	(T, d) 系列	行列演算（ループなし）	○ 全位置同時	★ Q/K/V重みを位置で共有

6.6 NNUE（将棋AI）のJavaScript版

第1章〜第6章 で何度も登場した NNUE は、本質的に MLP です。ただし、差分更新 という工夫があります：

// NNUE の評価関数
// position:        現在の局面
// prevAccumulator: 前局面の第1層活性化（メモ化、再利用する）
function nnueEvaluate(position, prevAccumulator) {
  // ★ 工夫1: 差分更新 — 全再計算しない
  const diff = computeChangedFeatures(position);   // 変化した特徴ビットだけ抽出
  const accumulator = [...prevAccumulator];
  for (const idx of diff.added)   for (let k = 0; k < accumulator.length; k++) accumulator[k] += W1[k][idx];
  for (const idx of diff.removed) for (let k = 0; k < accumulator.length; k++) accumulator[k] -= W1[k][idx];

  // 工夫2: あとは普通のMLP（ただし整数演算 int8/int16）
  const h1 = clippedRelu(accumulator);
  const h2 = clippedRelu(vecAdd(matVecMul(W2, h1), b2));
  const h3 = clippedRelu(vecAdd(matVecMul(W3, h2), b3));
  const score = dot(W4, h3) + b4;                  // スカラー出力

  return { score, accumulator };                   // accumulator は次局面に持ち越す
}

これがCPU上で 秒間数百万局面 を可能にする理由。「1手進めるたびに変化する数ビットだけW1の列を加減算する」 という、極めてプログラマ的な工夫です。