AIの中身を、
手を動かして理解する
自分だけのノート。
ニューラルネットワークの構造、手書き数字の認識、畳み込みによる特徴抽出、ソートアルゴリズム。読むだけでは掴みにくい概念を、触って・描いて・動かして確かめるためのリファレンスです。
↓ scroll — 各ノートは実際に操作できます
ニューラルネットワークは層の重なりでできている
入力層に入った数値が、重み付きの接続を通って隠れ層を伝わり、出力層で「答え」になります。層やニューロンの数を変えて、ネットワークの形がどう変わるか試してみてください。ニューロンにマウスを乗せると、その接続だけが浮かび上がります。
本実装メモ: 実サイトでは重みの値を可視化したり、TensorFlow.js で本物の学習過程(損失が下がる様子)をその場で再生できます。
AIは手書き数字を28×28個の数値として見ている
左の枠に数字(0〜9)をマウスや指で描いてみてください。人間には「7」に見える線も、AIにとっては 28×28 = 784個の明るさの数値でしかありません。描いた数字はMNISTと同じ流儀で正規化(最長辺を20pxに縮小し、重心を中央へ移動)してからCNNに入力され、右のスコアは学習済みモデルの本物の推論結果です。
① あなたが描いた数字
② AIが見ている 28×28(正規化後)
③ 出力層のスコア(学習済みCNNの本物の推論)
重み埋め込み型の小型CNN(3×3畳み込み×2+全結合、5,258パラメータ)による推論です。TensorFlow.jsが読み込めた環境ではTF.jsで、読み込めない環境では同じ重みを純JSで計算します。学習データはこのモック用に合成した手描き風数字4.4万枚(検証精度99.9%)。本番ではMNIST学習済み重みにそのまま差し替え可能です。
特徴量は小さなフィルタで取り出される
CNN(畳み込みニューラルネットワーク)は、3×3などの小さな数値の窓「カーネル」を画像の上で滑らせ、縦線・横線・輪郭といった特徴を取り出します。カーネルを切り替えて、同じ画像から違う特徴が浮かび上がる様子を確かめてください。
入力画像
カーネル(3×3)
特徴マップ(出力)
本実装メモ: カーネルの9つの数値をユーザーが直接編集できるようにすると「自分でフィルタを設計する」体験まで作れます。
アルゴリズムの性格の違いは動きに表れる
同じ「並べ替え」でも、アルゴリズムによって手順はまったく違います。青は比較、オレンジは交換。比較回数を見比べると、計算量 O(n²) と O(n log n) の差が体感できます。
OpenCV 前処理リファレンス
画像処理の定番前処理を、パラメータ操作とリアルタイム生成コードで学ぶ章。すべてブラウザ内で本物の演算が動き、そのまま使えるOpenCV(Python)コードも自動生成されます。
OpenCVの前処理をその場で試す
グレースケール・二値化・色ROI抽出・モルフォロジー変換(収縮/膨張/オープニング/クロージング)を、パラメータを動かしながら試せます。下にはそのまま使えるOpenCV(Python)コードが、スライダーの値に合わせてリアルタイムに生成されます。手持ちの画像を読み込んで試すこともできます。
入力画像(クリックで色を採取)
パラメータ
結果
OpenCV (Python) コード — 操作に連動して更新されます
本実装メモ: 操作カタログはこの形式(デモ+パラメータ+生成コード)のカードを1操作=1ページで増やしていけます。ぼかし・Canny・輪郭検出・射影変換なども同じ器で追加できます。
ぼかし:ノイズを消す3つの方法 やさしい
ぼかしはノイズ除去の基本です。単純平均(ボックス)、中心を重視するガウシアン、そして「エッジを残したままノイズだけ消す」バイラテラルの3種を比較します。ノイズを乗せた画像で効き目の違いを見てください。特にバイラテラルが輪郭を保つ様子に注目です。
入力
結果
OpenCV (Python) コード
Cannyエッジ検出:輪郭線だけを抜き出す ふつう
Cannyは、ぼかし→勾配計算→細線化→2つのしきい値でつなぐ、という多段処理で「途切れず太すぎない」輪郭を得ます。強いエッジ(上限超え)を起点に、弱いエッジ(下限〜上限)がつながっていれば採用する、という2段しきい値が特徴です。スライダーで検出される線の量が変わる様子を確認してください。
入力
エッジ
白い線がエッジです。しきい値が低すぎるとノイズも拾い、高すぎると輪郭が途切れます。ちょうど良い塩梅を探すのがコツ。
OpenCV (Python) コード
輪郭検出:物体を囲んで数える ふつう
二値化した画像から白い塊の境界線をたどるのが輪郭検出です。物体の個数を数えたり、面積・重心・外接矩形を求めたりできる、検査や計数の基本技術です。しきい値を動かすと検出される物体の数が変わり、各物体に外接矩形と番号が付きます。
入力(二値化後)
検出結果
計測
OpenCV (Python) コード
リサイズと補間:拡大するとなぜボケる? やさしい
小さい画像を拡大すると、元になかった画素を作り出す必要があります。最近傍法は一番近い画素をそのままコピー(カクカク・高速)、バイリニアは周囲4画素を混ぜてなめらかに、バイキュービックはさらに広く見てくっきりなめらかにします。小さな画像を大きく拡大して違いを見比べてください。
元画像(16×16)
OpenCV (Python) コード
便利ツール
開発中にそのまま使える小さな道具箱。まずはカラーピッカーから。カーネルエディタやリサイズ計算機もここに増やせます。
RGBとHSVを行き来するカラーピッカー
スライダーでもカラーパレットでも色を選べて、RGB / HSV / HEX が同期して表示されます。OpenCV欄は「H: 0〜179、S・V: 0〜255」のOpenCVスケールで表示され、その色を抜き出すための cv2.inRange レンジの目安コードも自動生成されます。EXHIBIT 05 の入力画像をクリックしても、ここに色が入ります。
↑ クリックでOSのカラーパレットが開きます
cv2.inRange レンジの目安
ディープラーニング ノート
損失・最適化・評価・過学習・活性化・逆伝播——「学習のしくみ」を動かして理解する章です。
損失関数は「間違い」を1つの数値にする
モデルの予測と正解のズレをどう数値化するかで、学習の性格が決まります。スライダーで直線を動かすと、各点からの残差(点線)と損失の値が変わります。オレンジの外れ値はドラッグ可能。「MSEで自動フィット」と「MAEで自動フィット」を見比べると、MSEが外れ値に強く引っ張られる様子が一目でわかります。
回帰:直線のあてはめ(外れ値はドラッグできます)
損失の値
MSEは誤差を二乗するため、大きな誤差(外れ値)ほど強烈に効きます。MAEは線形にしか効かず外れ値に頑健。Huberは小さな誤差にはMSE、大きな誤差にはMAEのように振る舞う折衷案です。
誤差の大きさと損失の形
分類:交差エントロピー
正解の確率を低く見積もるほど、損失は対数的に急増します。「自信を持って間違える」ことへの強いペナルティです。EXHIBIT 01 のソフトマックス出力と組み合わせて使われます。
本実装メモ: 2次元の損失地形(等高線)の上をパラメータが動く版や、EXHIBIT 01 のネットワークと接続した「学習の再生」も同じ器で作れます。
学習とは、損失の谷を下っていくこと
勾配降下法は「いまいる場所の傾きを調べて、下り方向に学習率ぶんだけ進む」を繰り返すだけの方法です。学習率を変えて試してください。小さすぎるとなかなか進まず、大きすぎると谷を飛び越えて発散します。手前の浅い谷(局所解)に捕まることも。グラフをクリックするとスタート地点を変えられます。
画像の「似ている」を測る MSE・PSNR・SSIM
元画像に劣化を加えて、3つの指標の反応の違いを観察できます。おすすめの実験:「明るさシフト」はMSEが大きく悪化してもSSIMは高いまま——SSIMが画素の差ではなく構造の類似を見ている証拠です。逆に「ぼかし」はMSEのわりにSSIMが大きく下がります。
元画像
劣化画像
指標(元画像との比較)
MSE: 画素差の二乗平均(小さいほど良い)。PSNR: MSEをdB化した指標(30dB以上がきれいさの目安)。SSIM: 輝度・コントラスト・構造の類似度(1が最良)。SSIMのバーだけ「高いほど良い」向きです。
過学習を目で見る
多項式の次数(モデルの複雑さ)を上げていくと、訓練データ(●)への当てはまりは良くなり続けます。しかしテストデータ(○)への誤差は、ある次数を境に悪化に転じます。これが過学習——訓練データの「ノイズまで暗記」してしまった状態です。
平均二乗誤差(×10⁻³)
次数1〜2は単純すぎて両方の誤差が大きい(未学習)。3〜5あたりでテスト誤差が最小になり、それ以上ではテスト誤差だけが悪化していきます。この「ちょうどよい複雑さ」を探すのがモデル選択です。
本実装メモ: エポックを横軸にした学習曲線(訓練/検証lossの推移)や、正則化・ドロップアウトの効果比較も同じ形式で追加できます。
活性化関数の形と勾配を見比べる
実線が関数そのもの、破線がその微分(勾配)です。誤差逆伝播では各層でこの微分が掛け合わされるため、微分の小さい関数を深く重ねると勾配がどんどん消えていきます(勾配消失)。右の「層の数」を動かして、シグモイドとReLUの差を体感してください。
勾配消失シミュレーション(x=1の微分をn層分掛ける)
誤差は出力から入力へ逆向きに流れる
学習の1サイクルは「順伝播で予測 → 損失を計算 → 勾配を出力側から逆流(逆伝播) → 重みを更新」の繰り返しです。再生ボタンで、青い信号が右へ、オレンジの勾配が左へ流れる様子を確認してください。各重みは「自分が損失にどれだけ影響したか」に応じて更新されます。
SGD・モーメンタム・Adamの下り方のクセ
細長い谷(等高線)を、3つの最適化手法が同じスタート地点から下ります。素のSGDは急な方向に振動しながらジグザグ進み、モーメンタムは「勢い」で振動を均しながら加速し、Adamは方向ごとに歩幅を自動調整して最短距離に近いコースを進みます。
機械学習 ノート
ディープラーニング以前から使われてきた「学習」の考え方を、動かして理解する章です。クラスタリング・分類・次元削減・生成モデル・強化学習・言語モデルまで、それぞれ手を動かせます。
k-means:似たものを自動でグループ分け やさしい
正解ラベルなしで、データを k 個のまとまりに分ける手法です。「各点を一番近い重心に割り当てる → 重心を割り当てられた点の平均へ動かす」を繰り返すだけ。重心(★)が動かなくなったら収束です。グラフをクリックで点を追加できます。
k-NN:近くの多数決で分類する やさしい
新しい点を、最も近い k 個の学習データの多数決で分類します。学習という学習をせず、丸暗記して近さで判断する最もシンプルな分類器です。背景の色は「その場所に点を置いたらどう分類されるか(決定境界)」を表します。k を変えると境界の滑らかさが変わります。グラフをクリックすると赤クラスの点を追加できます(Shift+クリックで青)。
k=1 は個々の点に過敏(過学習気味)で境界がギザギザに、k を大きくすると滑らかになりますが、細かい構造は捉えられなくなります。これも複雑さのトレードオフです。
決定木:質問を重ねて絞り込む やさしい
「Xは0.5より大きい?」のような Yes/No の質問で領域を縦横に分割していく分類器です。深さを増やすほど細かく分けられますが、増やしすぎると1点ずつ囲い込む過学習になります。左が分割された空間、右が木構造です。
線形回帰:データに最もフィットする直線 やさしい
NOTE 07 が損失の違いに注目したのに対し、こちらは「最小二乗法が一発で最適解を出せる」ことを見ます。点をドラッグすると、最適な直線(赤)がリアルタイムで追従します。決定係数 R² は「直線がデータのばらつきをどれだけ説明できたか(1が完璧)」です。
点はドラッグで動かせます。外れ値を1つ大きく動かすと、直線全体が引きずられる様子(最小二乗法の外れ値への弱さ)も確認できます。
オートエンコーダ:圧縮して復元する ふつう
入力を一度うんと小さな次元(潜在空間)に押し込め、そこから元に戻すよう学習するネットワークです。「戻せる範囲で最大限圧縮する」ため、データの本質的な特徴が潜在変数に凝縮されます。ここでは手描き風の数字を2次元に圧縮する学習済みモデルで、①潜在空間の地図、②スライダーで潜在変数を動かして数字を生成、の2つを試せます。
① 潜在空間マップ(2次元に圧縮された数字たち)
近くにある数字ほど「似ている」と判断されています。クリックするとその地点の潜在変数から数字を生成します。
② 潜在変数から生成(デコーダ)
本実装メモ: このデモは軽量化のため潜在2次元のオートエンコーダを模した生成器です。本実装では TensorFlow.js で本物のVAE(変分オートエンコーダ)を動かし、なめらかな潜在空間の補間まで見せられます。
PCA:データが最もばらつく方向を見つける ふつう
主成分分析は、データの分散が最大になる軸(第1主成分)を見つけて、その軸に沿って情報を圧縮する次元削減の代表格です。楕円状に広がったデータの上に、2本の主成分軸が引かれます。データの形をドラッグで変えると、軸が追従します。第1主成分だけに射影(影を落とす)と、2次元が1次元に減る様子もわかります。
強化学習:試行錯誤でゴールへの道を学ぶ ふつう
エージェント(●)が迷路を動き回り、ゴール(★)にたどり着くと報酬をもらいます。どの場所でどちらへ動けば良いかを表す「Q値」を、成功・失敗の経験から少しずつ更新します(Q学習)。学習が進むと、各マスの矢印(=学習した方針)がゴールへの最短路を指すようになります。
色は各マスの価値(明るいほどゴールに近い=価値が高い)、矢印はそのマスで選ばれる行動です。壁(グレー)と落とし穴(×、罰)を避ける経路を、誰も教えていないのに自力で見つけます。
意味をベクトルで捉える ふつう
単語や文を数値ベクトルに変換すると、「意味の近さ」を距離や角度で測れるようになります。これがセマンティック検索やRAGの土台です。単語を選ぶと、ベクトルの近い順に並べ替わります。「王 − 男 + 女 ≒ 女王」のような意味の足し算も試せます。
に意味が近い順
意味の足し算(単語ベクトル演算)
本実装メモ: ここでは説明用に2次元へ手配置したミニ埋め込みを使っています。本実装では実際の埋め込みモデル(Universal Sentence Encoder 等)をTF.jsで動かし、入力文の検索まで実演できます。
n-gram:次の文字を確率で予想する やさしい
「直前の n 文字から次の1文字を予測する」——ChatGPTのような言語モデルの最も素朴な祖先です。学習文からどの文字の後にどの文字が来やすいかを数えるだけ。下のボタンで、学習した確率に従って文章を自動生成できます。n を増やすと学習文に忠実に、減らすとデタラメになります。
次の文字の予測確率(現在の末尾から)
学習文は日本語の童話・ことわざの断片です。テキストエリアに自分の文章を入れて学習させることもできます。
単純ベイズ:単語の確率でスパム判定 やさしい
迷惑メール判定の古典です。「無料」「当選」などの単語がスパムに出やすいか、通常メールに出やすいかを学習し、新しい文に含まれる単語の確率を掛け合わせて判定します。下の文を書き換えると、各単語がどちらへ何ポイント寄与したか、最終判定がどう変わるかがリアルタイムに見えます。
各単語の「スパムらしさ」を表示しています。1語ずつは弱い手がかりでも、掛け合わせると強い判定になります。これが「単純(ナイーブ)」=単語が互いに独立と仮定する、の意味です。
SVM:2つのグループをいちばん余裕をもって分ける ふつう
直線で分ける引き方は無数にあります。SVMは「どちらのグループからも最も離れた、余裕(マージン)が最大の線」を選びます。境界のすぐそばで線の位置を決めている点をサポートベクトルと呼びます(丸で強調)。点をドラッグして、境界とマージンがどう動くか試してください。
ランダムフォレスト:たくさんの木の多数決 ふつう
決定木(NOTE 17)は1本だと過学習しがちです。そこでデータや使う質問を少しずつ変えた木をたくさん育て、多数決で決めるのがランダムフォレストです。木の本数を増やすと、1本ではギザギザだった境界がなめらかで信頼できるものになります。背景の濃さは「何本の木が同じ判定をしたか=自信」を表します。
混同行列:どこで間違えたかを数える やさしい
分類の成績は正解率だけでは不十分です。特に「見逃し」と「誤検知」は重みがまるで違います。混同行列はこれを4マスで整理し、適合率(Precision)・再現率(Recall)・F1を計算します。判定しきい値を動かすと、これらがトレードオフ(片方を上げると片方が下がる)であることが体感できます。
青=実際に陽性、灰=実際に陰性の分布です。縦線がしきい値で、右側を「陽性」と判定します。しきい値を下げると見逃しは減りますが誤検知が増えます。
次元削減:高次元データを2次元の地図に むずかしい
数字画像は784次元、単語ベクトルは数百次元——そのままでは見られません。t-SNEやUMAPは「もとの空間で近いものは2次元でも近くに」を保つよう点を配置し直します。ここでは高次元上に3つのかたまりを持つデータを、PCA(直線的な圧縮)とt-SNE風(近所関係を重視)で並べ、見え方の違いを比べます。
高次元(擬似的に生成した6次元データ)を2次元に配置します。t-SNE風は近所を保つため、かたまりがくっきり分かれます。
用語集
学んだことばを自分の言葉で貯めていくページ。各ノートからも随時リンクします。
自分だけの用語集を育てていく
学んだ用語を自分の言葉で書き溜めるコーナーです。検索とカテゴリで絞り込めます。下のフォームから自分の用語も追加できます(モックのため、ページを離れると消えます — 本実装ではアカウントに保存されます)。