可視化で学ぶ

擬似言語ステッパー

基本情報 科目B風の擬似言語を1行ずつ実行し、変数の値の変化を可視化。if/for/while/配列対応で、コードは自由に書き換え可能。トレース練習に。

リバースプロキシの可視化

中継と隠蔽・負荷分散・ヘルスチェック・SSL終端・キャッシュ・パス振り分けを、リクエストを送って体感。フォワードプロキシとの違いも。

SSL/TLS証明書の可視化

HTTPSの🔒の裏側。TLSハンドシェイクと「信頼の連鎖（サーバー証明書←中間CA←ルートCA）」、公開鍵と共通鍵の使い分けをステップ表示。「証明書のやり取りは毎回起きる？」も。

証明書チェーン検証の可視化

サーバー証明書→中間CA→ルートCAをたどる検証を可視化。期限切れ・ドメイン不一致・自己署名・失効で、なぜブラウザ警告が出るかをシナリオ別に体感。

公開鍵暗号とディジタル署名の可視化

「暗号化は相手の公開鍵、署名は自分の秘密鍵」を、鍵を選んで正解・不正解を体感するクイズ形式で。なぜその鍵か、間違うとどうなるか、改ざん検知まで確かめられる。

ネットワーク境界の可視化

ファイアウォール・DMZ・フォワード/リバースプロキシを1枚の構成図で。通信が流れる/遮断される様子をシナリオ別にステップ表示。

DNS名前解決の可視化

ドメイン名からIPアドレスを引くまで。ブラウザ→リゾルバ→ルート→TLD→権威DNSの問い合わせの流れをステップ表示。キャッシュの役割も。

プライベートIP⇄グローバルIPの可視化

プライベートIPの端末がNATルーターで1つのグローバルIPに変換されてインターネットへ出る動きを、NAT変換テーブルとともにステップ表示。NAPTも。

IPアドレスとMACアドレスの可視化

PC→ルーター→PCへパケットが届くまでを1ステップずつ。宛先IPは端から端まで一定、宛先MACは1ホップごとに書き換わる関係とARPを、IPヘッダとフレームを見比べて理解。

ポート番号の可視化

1台のサーバーがポート番号ごとに別サービス（HTTP/HTTPS/SSH/DNS）を待ち受け、届いたパケットを正しいサービスへ振り分ける様子と、接続を識別するソケット（4つ組）を体感。

通信プロトコルの階層マップ

HTTP・TCP・IP・DNS・ARPなど主要プロトコルが、TCP/IPの4階層のどこで・何をするかをクリックして確認。役割・ポート番号・TCP/UDPの別・関連可視化へのリンクも表示。

TCPコネクションの可視化

3ウェイハンドシェイク（SYN→SYN/ACK→ACK）からデータ転送とACK、4ウェイの切断（FIN）まで1ステップずつ。シーケンス番号やTCPの状態遷移もわかる。

スイッチのMAC学習の可視化

L2スイッチが送信元MACと受信ポートを学習してMACアドレステーブルを作る様子。宛先が未知ならフラッディング、学習後はユニキャスト転送する違いをステップ表示。

OSI参照モデルの可視化

データが7層を下りてヘッダが付き（カプセル化）、受信側で上って外れる流れをステップ表示。各層の役割・プロトコル・機器・PDU名がわかる。

OSI 7層エクスプローラー

OSIの7層をクリックして1層ずつ深掘り。役割・身近なたとえ・プロトコル・PDU・対応機器に加え、「Webを開くとその層で何が起きるか」の具体例も表示。

OSIの動きを実物で可視化

各層のとき、実際のPC・ソフト・OS・NIC・LANケーブル・スイッチ・ルーターの「どこ」が動くかを機器ハイライトで表示。ブラウザやファイル共有(SMB)の具体例で体感。

ルーティング構築パズル

ルーター・L2スイッチ・ホストに自分で経路を設定し、パケットを通すパズル。静的ルートとデフォルトルートを手を動かして理解。

ソートアルゴリズム可視化

バブル/選択/挿入/シェル/クイック/マージ/ヒープの7種類を、アニメーションと音で体感。比較回数・交換移動回数も表示。

探索アルゴリズム可視化

線形探索 vs 二分探索。整列済みなら二分探索が圧倒的に速いことを比較回数で体感。lo/mid/hiの動きも表示。

二分探索をツリーで可視化

ソート済み配列の二分探索を「決定木」の姿で表示。中央値がルート、左右が部分木になり、探索は木を上からたどる動きに。比較回数＝木の深さ＝log₂n で、なぜO(log n)かが目で分かる。配列ビューと連動。

ユークリッドの互除法の可視化

最大公約数を「余りで割り続ける」で求める古典アルゴリズム。b=0になったら答え、というループをフローチャートと連動して1ステップずつ。

エラトステネスの篩の可視化

素数を求めるアルゴリズム。小さい素数から順に倍数を消していき、残った数が素数。数のグリッドとフローチャートを連動して1ステップずつ。

配列の合計と最大値の可視化

配列をループで1つずつ走査して合計と最大値を求める基本形。i<n?の繰り返しとa[i]>最大?の分岐を、フローチャートと連動して1ステップずつ。科目Bのトレース対策に。

スタックとキューの可視化

スタック（LIFO：後入れ先出し）とキュー（FIFO：先入れ先出し）を、プッシュ／ポップ・エンキュー／デキューで操作。同じ順で入れても取り出す順が逆になる様子を体感。データ構造の対策に。

2分探索木の可視化

2分探索木（BST）に値を挿入・探索し、中間順巡回で昇順に並ぶ様子をアニメで確認。「左＜親＜右」で大小をたどるしくみと、偏るとO(n)になる弱点まで。木構造の対策に。

ハッシュ法の可視化

キー mod 7 でインデックスを計算して格納し、別のキーが同じ場所になる衝突（シノニム）をチェイン法でつなぐ流れをアニメで確認。平均O(1)のしくみと弱点まで。ハッシュ法の対策に。

ハノイの塔の可視化

円盤を1手ずつ動かして、再帰（小さい同じ問題に分ける考え方）と、最小手数が2ⁿ−1になるしくみ、1枚増えるだけで手数が倍増する指数的な増え方を体感。再帰・計算量の対策に。

論理回路シミュレータ

AND/OR/NOT/XOR/NAND/NOR/XNORを、入力0/1のクリックで動かせる。出力と真理値表が連動。半加算器も。MIL記号・論理回路の対策に。

2進数・基数変換の可視化

ビットをクリックしてオン/オフすると、10進数・16進数・8進数がリアルタイムに変化。各桁の重みの合計として理解でき、符号付き（2の補数）表示にも切り替え可能。

サブネット分割の可視化

1つのネットワークを分割すると、アドレスがどう割れるかを帯グラフで確認。各サブネットの範囲・ホスト数も表示。