Daijiro Taira

学習・機械学習ブラウザで動く

ML Visual Academy

機械学習を中高生から専門レベルまで、数式だけでなく「動かして」学べる学習サイトです。

ツールを開く
ML Visual Academy の操作の様子
ホーム画面。上部にループアニメーションするニューラルネットワークのヒーローSVGと「ML Visual Academy」のタイトル、下にch01〜ch12・最終試験boss を結ぶスキルツリーが表示される。

1つの章の中に「日常のたとえ話（数式なし）」「触って動く実験コーナー」「数式とPythonコード」「実務での使われ方」の4段階が用意されていて、どこまで読んでもその範囲の知識はちゃんと身につきます。クイズに正解するとXPがもらえてレベルが上がり、章をクリアするとバッジが手に入るので、ゲーム感覚で12章＋最終試験を進められます。サーバーは一切使わず、ブラウザで index.html を開くだけで全部動き、学習の記録もこの端末の中にだけ保存されます。

使い方

  1. ホーム画面を開く

    ホーム画面を開く

    index.html を開いた直後の画面。上部ヘッダーに現在のレベル（Lv.1）とXPバー、中央にアニメーションするニューラルネットワークのヒーロー図、その下にスキルツリーが表示される。

  2. スキルツリーで章を選ぶ

    スキルツリーで章を選ぶ

    画面を下にスクロールすると「現在のステータス」（XPバー・獲得バッジ）「学習の進め方」（Lv1〜Lv4の4段階の説明）「全13ページ」の章カード一覧が並ぶ。各章カードをクリックするとその章のページ（chXX.html）に移動する。

  3. ch04 勾配降下法：損失カーブを転がるボール

    ch04 勾配降下法：損失カーブを転がるボール

    Lv2の「Lab 1: 損失カーブを転がるボール」。凸関数／非凸関数（局所解あり）をタブで切り替え、学習率ηスライダー（既定0.10）と「1ステップ進む」「停止」「リセット」ボタンでボールを動かせる。ステップ数・現在のx・損失f(x)・勾配f'(x)がリアルタイムに数値表示される。

  4. ch06 ニューラルネットワーク：NNプレイグラウンド

    ch06 ニューラルネットワーク：NNプレイグラウンド

    データセット（線形分離／同心円／XOR〈既定〉／渦巻き）、隠れ層の構成（1〜3層・各2〜8ニューロン）、活性化関数（tanh〈既定〉／ReLU／sigmoid）、学習率（0.05〜1.0、既定0.5）を選んで「学習開始」を押すと、右側の決定境界と重み（線の太さ・色で正負を表示）がリアルタイムに更新される。画像はXORデータセットを2325エポック学習し損失0.0005・正解率100%に到達した状態。

  5. ch12 強化学習：Q学習グリッドワールド

    ch12 強化学習：Q学習グリッドワールド

    6×8マスの迷路をロボット🤖がスタートからゴール🚩まで進む。壁（濃い色）は通れず、⚠️マスは「落とし穴」で通ると報酬にペナルティを受ける。探索率ε（既定0.30）・学習率α（既定0.50）・落とし穴の報酬（既定-10）をスライダーで調整し、「1エピソード」または「高速学習（50エピソード）」でロボットに練習させる。画像は51エピソード学習後、22ステップでゴール到達した状態。

設定項目

ch04 学習率η / カーブの種類
勾配降下法Labのパラメータ。ηを小さくすると収束が遅く、大きくすると振動・発散する。凸関数（通常の谷）と非凸関数（局所解あり）を切り替えると、開始位置によって別の谷に収束する様子を観察できる。
ch06 データセット / 隠れ層構成・活性化関数 / 学習率
NNプレイグラウンドのパラメータ。データセット（線形分離・同心円・XOR・渦巻き）ごとに必要な層の深さ・活性化関数が変わり、渦巻きデータはtanhよりReLUの方が学習が進みやすいとページ内で明記されている。
ch12 探索率ε / 学習率α / 落とし穴の報酬
Q学習ラボのパラメータ。εを上げるとランダムな行動（探索）が増え、落とし穴の報酬（ペナルティ）を大きくするほどロボットは遠回りしてでも安全なルートを学習するようになる。
仕組みと使った技術

全体の流れ

  1. index.html（ホーム）＋ ch01.html〜ch12.html（12章）＋ boss.html（最終試験）の計14ページからなるビルド不要のマルチページ静的サイト。各ページは相対パスで shared/theme.css と shared/game.js を読み込み、file:// で開いてもfetch/XHRを一切使わずに完全動作する。
  2. 各章ページは共通のAPIしか呼ばない: MLA.initPage() でヘッダー（ホームへ戻るリンク・XPバー・章タイトル）と章末ナビ（前の章／ホーム／次の章）を自動描画し、MLA.renderQuiz() が選択式クイズを描画・採点する。localStorageへの直接アクセスは禁止され、進捗はすべてこのAPI経由で1キー mla_progress_v1 にJSONとしてまとめて保存される。
  3. 進捗データ（xp・level・badges・quizzes・chapters）はlocalStorageが使えない環境（プライベートブラウジング等）でもエラーにならず、メモリ内フォールバックの state オブジェクトで動作を継続する。
  4. クイズは1問ずつ表示され、回答するとボタンが無効化されて正誤と解説が表示される。正解ごとにXPを加算し、全問正解時のみボーナスXPと「章クリア」フラグ（chapters[chapterId]=true）と専用バッジを付与する。ホーム画面のスキルツリーは、このchaptersフラグとクイズキーの前方一致でクリア済み／挑戦済みを判定して描画する。
  5. 章別アクセント色は body[data-chapter="chXX"] に対する CSS変数（--accent / --accent-soft）の上書きだけで実現しており、.lab・.quiz-box・.formula などの共通コンポーネントクラスはどの章でも自動的にその章の色を継承する。
  6. Pythonコードブロックのシンタックスハイライトは外部ライブラリを使わず、game.js内の正規表現（コメント・文字列・数値・キーワードの4種）で自作している。

使った技術

HTML / CSS / JavaScript（Vanilla）
全14ページの構造・スタイル・ロジック。ビルド工程・外部CDN・フレームワーク不使用（ES2020可、モダンChrome/Edge対象）
SVG / Canvas
各章のヒーローアニメーション、Lab内の図（損失カーブ、NNの重みグラフ、迷路グリッドワールド等）の描画。SMILの<animate>によるループアニメーションも使用
localStorage
学習進捗（XP・レベル・バッジ・クイズ解答・章クリア状況）を単一キー mla_progress_v1 にJSONでまとめて保存。使用不可時はメモリ内フォールバック

実装の工夫

  • Phase A（先行・同期）で shared/theme.css・shared/game.js・index.html・README.md という共通基盤を先に確定させ、Phase B で6体のSonnet builder subagentを並列起動して章を分担実装（B1: ch01-03 / B2: ch04-05 / B3: ch06-07 / B4: ch08-09 / B5: ch10-11 / B6: ch12+boss）、Phase Cで統合QA（リンク整合・API誤用・コンソールエラー・レスポンシブ確認）を行うという3フェーズの実装フローで作られている。
  • 章担当builderには「shared/とindex.htmlの変更禁止」「外部CDN・fetch・confirm/alert/prompt禁止」「localStorage直接アクセス禁止（MLA API経由のみ）」「他章のファイルに触らない」という共通禁止事項が課され、13人（6並列＋Phase A/C）が同時に触っても状態管理とデザインが一貫するようにしている。
  • 数式はMathJax等の外部ライブラリを使わず、.formula カード内にHTML/Unicode（上付き・下付き・Σ・∂等）で組み、必ず日本語の「読み下し」文を添える方針で統一されている。

用語

Lv1〜Lv4
全章共通の4段階構造。Lv1直感（数式なし・比喩とSVG図解）→ Lv2しくみ（インタラクティブLabで動きを体験）→ Lv3数学（数式の読み下し文＋Pythonコード＋ブラウザ内シミュレーション）→ Lv4プロの視点（実務での使われ方・落とし穴）の順に深掘りする。
XP / レベル / バッジ
shared/game.js が管理する進捗指標。クイズの正解1問ごとにXPが加算され、全問正解でボーナスXPと章クリアバッジが付与される。XPが100貯まるごとにレベルが1上がる。
スキルツリー
ホーム画面のSVG図。ch01→ch12→bossを曲線で結び、クリア済みの章は章別アクセント色で光り、挑戦済み・未クリアの章は破線の輪郭で示される。
Lab（実験ラボ）
各章のLv2に1〜2個ある、スライダーやドラッグ操作で図がその場で更新されるインタラクティブな体験コーナー。達成条件を満たすとMLA.awardXPでXPが加算される。
勾配降下法
損失関数の勾配（傾き）の逆方向にパラメータを少しずつ動かして損失を最小化するアルゴリズム。ch04のテーマ。
Q学習
状態と行動の組み合わせごとに「将来どれくらい良いか」を表すQ値を持ち、実際に得た報酬をもとにQ値を更新していく強化学習の代表的な手法。ch12のテーマ。
決定境界
分類モデルが「どちらのクラスと判定するか」の境目を表す線・面。ch06のNNプレイグラウンドでは学習の進行に応じてこの境界がリアルタイムに変形する。