nn-anatomy

レッスンプラン (lesson-plans)

本シミュレータに同梱している Lesson1 〜 Lesson8 を、教室での進行に 沿って詳しく展開したノート。各レッスンは以下の形で書く:

1. 狙い — 何を体感してほしいか (1〜2 行)
2. UI の初期状態 — Lesson セレクタで選んだ直後の設定
3. 進行 (5〜10 分) — どのボタンをどの順で押すか、どこを見るか
4. 観察ポイント — 画面のチェック 3 項目を補足した読み方
5. 詰まりやすいところ — つまずいたときの介入ポイント

すべて「同じ seed + 同じ操作」で再現可能になるように設計してある (設計書 §8 / §9)。板書用の数式は math-notes.md を 参照。

共通の前置き (3 分)

• UI 左上の Lesson セレクタから Lesson を選ぶと、sizes / activation / loss / lr / dataset / seed / initScheme が 全部一度に上書き され、Reset が走る。学生が触った LR を元に戻したいときは Reset to Lesson ボタンで一発復帰できる。
• seed の右に「seed: 123」というバッジがある。教室で投影したときに 全員が同じ絵を見る根拠 はこの seed が同じだから、という点を最初に 1 回伝える。
• ノード / エッジ / バイアスバッジは クリックで選択、ダブルクリックで数値を直接編集 できる (B3)。編集後は Forward / Backward 結果は一旦捨てて phase=idle に戻る。

---

Lesson1. 1 ノードの線形変換 (z = w x + b)

• 狙い: ネットワークを「重みと切片が 1 本だけ」まで落として、$z = w x + b$ という最小の Forward を味わう。
• UI: sizes=1-1 / linear / MSE / lr=0.1 / seed=1 / LINEAR_1D (y=2x の 5 点)。
• 進行:
  1. Sample セレクタで x=0.0 を選んで Forward。$z=0+b=b$、$a=z$ (linear) の 2 行の展開を右パネルで読む。
  2. 同じまま x=1.0 に切り替えて Forward。$z = w \cdot 1 + b$ になっているのが [段3] の数値で分かる。
  3. Backward を押し、出力ノードをクリック。$\delta = \partial L/\partial a \cdot \varphi’(z) = (\hat{y} - y) \cdot 1$ の板書が出る。
  4. エッジを選んで $\partial L/\partial w = x \cdot \delta$、バイアスを選んで $\partial L/\partial b = \delta$ を確認。
• 観察:
  1. $w$ を変えると $a$ が比例変化する (傾き)。
  2. $b$ を変えると $a$ がそのまま平行移動する (切片)。
  3. Backward の数式が「$x$ と $\delta$ の掛け算」だけで書けている。
• 詰まり: linear のときは $\varphi’(z) = 1$ になるので「なんで消えてるの?」と聞かれがち。活性化の [段2] 注釈 “(linear)” をクリックで展開させる。

Lesson2. 活性化関数 (sigmoid) を通す

• 狙い: 同じ $z$ でも $\varphi$ が変わると形が変わる。飽和領域では $\varphi’(z)$ が小さくなる (勾配消失の萌芽)。
• UI: sizes=1-1 / sigmoid / MSE / lr=0.5 / seed=2 / SIGMOID_1D。
• 進行:
  1. Forward を x=-2.0, -1.0, 0.0, 1.0, 2.0 と順に押す。$z$ と $a$ の表が右の 式の展開 で読める。
  2. x=2.0 と x=-2.0 でそれぞれ Backward してノードを選ぶ。$\varphi’(z) = a(1-a)$ の [段3] 数値が、$a$ が 0 か 1 に近いほど小さいことを見せる。
  3. w をダブルクリックして 5 に書き換える → 学生に「このあと Backward するとどうなる?」を予想させる。$z$ が $\pm 10$ オーダになり、$\varphi’(z)$ がほぼ 0 になる。
• 観察:
  1. $a$ が 0〜1 に圧縮される。
  2. 飽和領域で $\varphi’(z)$ が急激に 0 に近づく (= 勾配が死ぬ)。
  3. $w$ を大きくすると学習に使える勾配が消える。
• 詰まり: $\varphi’(z)$ を $z$ で書くか $a$ で書くかの違い。画面は $a(1-a)$ の形で出すので、一度黒板で $\varphi’(z) = \varphi(z)(1-\varphi(z))$ と書き直す 30 秒があると良い。

Lesson3. 小さな MLP の Forward (2→2→1)

• 狙い: MLP の Forward で、各中間ノードが Σ で入力を畳み込んでから活性化にかける流れを ノード 1 つずつ 辿る。
• UI: sizes=2-2-1 / sigmoid / MSE / lr=0.5 / seed=3 / AND。
• 進行:
  1. x=(1,1) (AND データの最後の行) を Sample セレクタで選んで Forward。
  2. 中間層 L1N0 → L1N1 → 出力 L2N0 の順にクリックして [段3] を読む。$\Sigma$ の中身が $w[x_1 \to L1N0] \cdot x_1 + w[x_2 \to L1N0] \cdot x_2$ と展開されている。
  3. 同じ流れで x=(0,0) も見る。中間ノードの $a$ がおよそ $\sigma(b)$ の値に近いことを確認。
• 観察:
  1. 各中間ノードの $\Sigma$ が左から右に積み上がっている (式展開 [段3])。
  2. 出力 $\hat{y}$ が a(h1) * w1 + a(h2) * w2 + b の sigmoid になっている。
  3. 入力を切り替えたときに中間層と出力がそれぞれどう変わるか。
• 詰まり: 「どうして bias が必要なの?」→ $x=(0,0)$ のケースを見せる。重みからの寄与が 0 なので、$z = b$ のみで決まる。バイアスが無いと $(0,0)$ で動けない。

Lesson4. 損失と勾配 (MSE)

• 狙い: 損失 $L$ の定義と「1 エッジ動かすと $L$ がどう動くか」の対応を数値で実感する。
• UI: Lesson3 と同一 + seed=4。
• 進行:
  1. Forward → Backward。
  2. 任意のエッジをクリック。$\partial L/\partial w = a \cdot \delta$ の数値が出る。
  3. そのエッジを ダブルクリック して、表示されている $w$ を少し 大きい方向 に動かす。Forward した $\hat{y}$ と $L$ の値 (イベントログに出る) が、勾配の符号と逆方向に動いたか確認。
• 観察:
  1. $L = \sum 0.5 \cdot (\hat{y} - y)^2$ の数値。
  2. 選んだエッジの $\partial L/\partial w$ の符号と、$w$ をどちらに動かすと $L$ が減るかの対応。
  3. $\hat{y}$ と $y$ の差が小さいサンプルでは勾配が小さい ($\delta$ が小さいため)。
• 詰まり: 符号が直観と逆になる (たとえば $w$ を増やしたのに $L$ が減らない) ケースは、隣の層の $\delta$ が効いて符号が反転 している可能性が高い。中間層ノードを選んで $\delta$ を見せる。

Lesson5. Backward の連鎖律

• 狙い: 後段の $\delta$ から前段の $\delta$ が $(\sum_k w \cdot \delta_k) \cdot \varphi’(z)$ で決まる、という 連鎖律の核 を粒アニメと数値の両方で確認する。
• UI: Lesson3 と同一 + seed=42 (教員事前選定で 2 相が出やすい)。
• 進行:
  1. Forward → Backward。粒が右から左に流れるアニメが出るのでスピードを 1.0× で見せる。2 回目以降は 0× (アニメなし) で構わない。
  2. 中間層ノード L1N0 をクリック。[段3] に $(w[L1N0 \to L2N0] \cdot \delta(L2N0)) \cdot \varphi’(z)$ の数値が並ぶ。
  3. $\varphi’(z) = a(1-a)$ の箇所に注目させる。中間層ノードの $a$ が 0.5 に近いほど $\varphi’$ が大きく、0 や 1 に近いほど $\varphi’$ が小さい。
• 観察:
  1. アニメで「粒が右 → 左に流れる」= 逆伝播が目視できる。
  2. 中間層ノードの [段3] で $\Sigma_k w \cdot \delta_k$ がきれいに並ぶ。
  3. 出力層 → 中間層の順にしか $\delta$ が埋まらないことを時系列で追える。
• 詰まり: 「出力が 1 ノードなら $\sum_k$ の $k$ は 1 つだけじゃないの?」→ その通り。2-2-1 の構成で出力 1 つなので $k \in {0}$ の 1 項のみ。$k$ の和を視覚化したいなら一時的に sizes を 2-2-2 に変えて再 Forward すると項が 2 つになる。

Lesson6. 1 step Update (Δw の向き)

• 狙い: $\Delta w = -\eta \cdot \partial L/\partial w$ は 必ず勾配の逆向き を向くことを、古い $w$ と新しい $w$ を並べて確認する。
• UI: Lesson3 と同一 + seed=6。
• 進行:
  1. Forward → Backward。エッジを 1 本クリックして $\partial L/\partial w$ (赤) の値を覚える。
  2. そのまま Update。青で $\Delta w$ が追記され、w : old → new の old→new が [段3] に出る。
  3. UI で LR を 0.1 にして Reset → 同じ流れ。$\Delta w$ の絶対値が 1/5 になっているはず。
• 観察:
  1. 各エッジの $\Delta w$ (青) が、Backward の $\partial L/\partial w$ (赤) と 逆符号。
  2. w: old → new が損失を下げる方向に動いている。
  3. $\eta$ を変えると $\Delta$ の絶対値が比例。
• 詰まり: 「Update を連続で押すと $\delta$ も動くの?」→ 動かない。$\delta$ は最後に Backward した時点の値のまま残る。1 Step を使えば毎回 Backward も走る。

Lesson7. XOR を解く (決定境界が曲がる)

• 狙い: 隠れ 3 ノードで XOR を解かせ、平坦域 → 崖状の急降下 という 2 相の loss 曲線と、直線では分けられない決定境界を観察する。
• UI: sizes=2-3-1 / sigmoid / MSE / lr=2.0 / seed=7 / XOR / runN=2000。
• 進行:
  1. Run (既定で 2000 epoch)。約数秒で完走するはず。アニメを見たければ Speed を 1.0× にして Run 200 くらいから始める。
  2. 右パネル Loss タブで曲線を見る。横軸は累積ステップ数。最初の数百エポックは loss ≈ 0.125 で平坦、その後 崖のように 落ちる。
  3. 決定境界 タブで、x1×x2 平面のヒートマップを見る。学習前は直線 (bias 由来)、学習後は曲線的な境界になっている。
  4. 各中間ノードをクリックして重みを読む。ノードごとに「$x_1$ OR $x_2$」「$x_1$ AND $x_2$」的な役割に分化するケースが seed=7 では出やすい。
• 観察:
  1. Loss 曲線の 2 相 (平坦 → 急降下)。
  2. 決定境界が直線から曲線に変わる。
  3. 中間ノードの機能分化。
• 詰まり: Run を途中で止めたあとにもう一度回したくなったら Run を押せば続きから学習する (Reset は押さない)。完全にやり直したいときだけ Reset to Lesson。

Lesson8. 活性化による違い (Sigmoid / Tanh / ReLU)

• 狙い: 同じ XOR + 同じ構成で活性化を切り替え、Sigmoid の飽和、ReLU の dying 現象、Tanh の勾配大きさを比較する。
• UI: sizes=2-3-1 / relu / MSE / lr=0.3 / seed=8 / he / runN=500。
• 進行:
  1. まずそのまま Run 500。ReLU は seed 次第で dying ノードが出ることがある。中間層ノードを 1 つずつクリックして $a$ と $\delta$ を確認。$a = 0$ のノードは勾配が 0。
  2. Activation を sigmoid に変えて Reset。同じ seed でも Init が he のままだと分散が大きすぎるので、Init を xavier に変えて Reset → Run 500。飽和で動きが遅いはず。
  3. tanh + xavier でやり直す。勾配が残っているので ReLU ほど止まらない。
• 観察:
  1. Sigmoid: 飽和でスローダウン。
  2. ReLU: $z \le 0$ の中間ノードは学習が止まる。
  3. Tanh: $\varphi’(z) = 1 - a^2$ なので $a=0$ 付近で最大の勾配。
• 詰まり: 「ReLU が Lesson8 の初期状態で死んでない」場合は seed を 3〜4 変えて試させる。死んだ瞬間に $\delta$ が 0 になり更新が止まる様子が見える。

---

授業全体の流れ (90 分例)

1. 共通の前置き + Lesson1 (8 分): UI に慣れさせる。
2. Lesson2 (8 分): 活性化が話題に入る。
3. Lesson3 + Lesson4 (15 分): Forward と損失。
4. Lesson5 (15 分): 連鎖律のコア。ここが肝なので粒アニメをゆっくり見せる。
5. Lesson6 (10 分): Update で損失が下がる。
6. Lesson7 (20 分): XOR と決定境界。Run で学習を体感。
7. Lesson8 (10 分): 活性化比較 (時間があれば)。
8. 余白 4 分: export JSON で学習済みモデルを学生に配る / 次回までに復習する形をアナウンス。

配布物として学習済みモデルを渡す

Export JSON (B7) で配布した JSON を、次回の授業冒頭に学生が Import JSON すると、seed・W・b までそのまま復元される。 Lesson7 の収束後を配ると「触ってみろ、誤分類するサンプルはあるか?」 型の課題にできる。