zukai-blog / engineering-notes

ずかいブログ

むずかしい仕組みを、手を動かしながら理解するノート。

FIG-129 ネットコード — 遅れて届く世界で、ズレをどう隠すか 回線を行き来するパケットを見ながら、自分のキャラを先に動かすClient Prediction、撃った人の過去まで巻き戻して判定するLag Compensation、相手の入力を予想して外れたらやり直すRollbackを試す。
FIG-128 ステートマシンとBehavior Tree — 敵AIは、毎Tick何を考えているのか 巡回・追跡・攻撃・逃走する敵に近づいて、頭の中で調べられる条件を見る。FSMは今の状態から出る矢印だけを、BTは毎回上の枝から順に調べる。行動を増やすと、矢印は掛け算、枝は足し算で増えていく。
FIG-127 ゲームループとTick処理 — 遅いPCでも、壁をすり抜けないために フレームレートの違う2台のPCで、同じコードのキャラを壁まで走らせる。1フレームごとに進めると速さがずれ、経過時間をかけるとカクついた瞬間に壁をすり抜ける。固定Tickで刻むとどちらも起きない。
FIG-126 ファインチューニング・LoRA・RLHF — 全部書き直すか、付箋を貼るか、褒めて育てるか 32×32の重みのマスで、全部を書き換えるフルFT、元を凍結して細い2枚の行列だけ学習するLoRA、2つの答えから良いほうを選ぶRLHFを比べる。アダプタの付け替えや、選ぶたびに答え方の確率が動く様子も試せる。
FIG-125 CSR・SSR・SSG・ISRとHydration — 見えているのに、押せない時間 4つの方式で同じ商品ページを開き、「見える」と「押せる」の時刻を比べる。表示された瞬間にいいねを連打するとHydrationまでの無反応が分かり、在庫を減らして時計を進めると作り置きの古さとISRの作り直しも確かめられる。
FIG-124 データウェアハウス — 川から直接汲むか、ダムに貯めてから配るか 各部署の分析を本番DBに直接つなぐか、ETLで集めてDWH(ダム)に貯めてから配るかを配管で切り替える。本番DBの負荷・お客さんの注文画面の応答・答えの鮮度がどう変わるかを比べる。
FIG-123 ベクトル検索と埋め込み — 「犬」と「猫」がお隣さんの、言葉の星屑マップ 言葉を3次元に置いた星屑の地図を回しながら、「わんちゃん」「麺類が食べたい」で探す。文字が一致しないキーワード検索は0件でも、座標の近い星を拾うベクトル検索なら意味の近い言葉が見つかる。
FIG-122 グラフデータベース — 友達の網を、引っ張ってたどる 友達関係のクモの巣をドラッグで引っ張り、起点から1人先・2人先・3人先へと線をたどる。表では1段ごとに JOIN が増え、グラフDBはたどった線の分だけで済む違いを、SQLとCypherを並べて見比べる。
FIG-121 WAL(先行書き込みログ) — 台帳を書き換える前に、裏紙にメモする 振込を1手ずつ進め、好きなところで停電させる。台帳を直接書き換えると1000円が消え、先にログへメモしておけば COMMIT 済みの振込だけを再生して、書きかけは捨てられる。
FIG-120 NoSQLとRDBMS — カチッとした表か、何でも入る段ボールか 形の違う5人分の会員データを、スキーマのある表とドキュメントDBに同時に入れる。表は入口で断り、段ボールは受け取る。年齢の平均や名前の一覧を出すと、検品の仕事が読む側に回ってくるのが分かる。
FIG-119 シャーディングとパーティショニング — 引き出しを仕切るか、タンスごと分けるか 48件の注文を、月別の棚に仕切る・会員番号で3台に分けるの2通りで並べ替える。「5月の注文」「会員#7の注文」を探して調べた件数と台数を比べ、注文の殺到に耐えられるのはどちらかも試す。
FIG-118 分散トレーシング — どの配送センターで遅れたか、伝票番号で追う探偵ゲーム 遅かった注文の記録をガントチャートで再生し、犯人のサービスをクリックで当てる。一番長い棒ではなく、子で埋まっていない「すき間」が手がかりになる。
FIG-117 CQRSとイベントソーシング — 残高を書かずに、明細を再生する 入金・出金・取り消しを記録に書き足し、再生して残高を作る。スライダーで過去に戻り、書く係と読む係を分けたときの反映待ちや、あとから新しい画面を作れる様子も試す。
FIG-116 レイヤードとクリーンアーキテクチャ — ケーキの層か、芯を守る玉ねぎか 同じアプリをケーキ型と玉ねぎ型で作り、画面やDBを替えてみる。変更は依存の矢印を逆にたどって広がり、DBを一番下に敷いたケーキは大事なルールまで崩れる。
FIG-115 イベント駆動アーキテクチャ — ピストルが鳴った瞬間だけ走り出す運動会 何度も聞きに行くポーリングと、合図で走り出すイベント駆動を、注文を入れて比べる。速さと空振りのつり合い、そして休んでいた係が合図を聞き逃す弱点と、イベントログによる取り戻しを試す。
FIG-114 マルチテナント — 一戸建てか、巨大マンションの家賃の割り勘か 入居する会社の数を変えて1社あたりの家賃を比べ、1社に大セールをさせて「うるさい隣人」を体験する。条件1行で他社の注文が見えてしまう、データ分離の落とし穴も試せる。
FIG-113 エッジコンピューティング — 本社に聞かず、現場のカメラがその場で決める 防犯カメラの映像を本社で判断するか、お店の小さなコンピュータで判断するか。不審者を出して、警報までの時間・回線に流す量・回線が切れたときの動きを比べる。
FIG-112 ログローテーション — 古いページを破り捨てる、自動の日記帳 切り替えのタイミング・残す冊数・圧縮を変えて、ディスクのメーターを見守る。アクセス急増への強さと、名前を変えてもアプリが古いファイルに書き続ける落とし穴も1手ずつ確かめる。
FIG-111 ブロック・ファイル・オブジェクトストレージ — 升目と本棚と直置き倉庫 同じ写真を3つの置き場に保存し、一部だけ直す・3台から使うを試す。違いは、ストレージ自身が「何を知っているか」にある。
FIG-110 冗長化構成 — 2人同時に戦うか、ベンチで交代を待つか アクティブ-アクティブ、ホットスタンバイ、コールドスタンバイのヒーローを1人ずつ倒して、交代までの時間・失ったリクエスト・残りの負荷を比べる。2人で戦うなら、1人でも勝てる量までしか使えない。
FIG-109 死活監視とアラート — 心電図は、波形が消えたときこそ鳴らす しきい値と継続時間を変えて、一瞬の山・じわじわ悪化・サーバー停止を起こす。鳴りすぎと見逃しのバランス、そして数値のルールでは止まったサーバーに気づけない理由が分かる。
FIG-108 Immutable Infrastructure — 直さずに、丸ごと取り替える パッチや緊急対応を起こすと、直しながら使うサーバーは中身がずれていく。イメージに焼いて入れ替える方式なら、全台がいつも同じで、戻すのも一瞬。
FIG-107 IaCとTerraform — 完成図を書くだけで、街が建つ 設計図のコードを書き換えて plan と apply を押すと、差分だけが工事される。手作業のズレが戻る様子と、何回実行しても同じ結果になる理由も試せる。
FIG-106 オンプレミスとクラウド — 発電機を買うか、コンセントから買うか 需要のパターンと買う台数を変えて、3年間の総額を比べる予算シミュレーター。安いほうは、需要の形しだいで入れ替わる。
FIG-105 マイクロサービスとモノリス — 天才シェフ1人か、完全分業の厨房か 同じ4つの出来事を2つの厨房で起こし、表を埋めて比べる。分業が強いのは「一部だけ」の出来事で、その代わり受け渡しと管理の手間を払う。
FIG-104 KubernetesのHPAとService — 増えても入れ替わっても、窓口は1つ アクセス数のスライダーでHPAがPodの数を計算し直す様子を見る。ローリングアップデートでは、Serviceの振り分け先の一覧だけが静かに書き換わる。
FIG-103 ゼロトラスト — 「社内だから安全」をやめる 境界防御とゼロトラストで同じ9通りのアクセスを試し、判断ミスの数を比べる。乗っ取られた社内PCがどこで止まるかが見える。
FIG-102 SSO — 1枚のゴールドカードで、街中のVIPルームへ 3つのサービスにSSOあり・なしで入り比べると、パスワードがIdPにしか渡らないことが分かる。SAMLとOIDCの通行証の中身も見比べられる。
FIG-101 OSI参照モデル — 7階建てビルで封筒を重ねる 送信側のビルを降りながら封筒を1枚ずつ重ね、受信側で1枚ずつ剥がす。スイッチやルーターが「何階まで開けるか」も比べられる。
FIG-100 SSH — 秘密鍵は見せずに、署名だけを見せる 公開鍵認証のログインを1手ずつ進めると、秘密鍵が一度も回線に出ないことが分かる。偽のサーバーの検知と、ポートフォワーディングも体験できる。
FIG-099 gRPC と Protocol Buffers — 辞書を共有すれば、名前は送らなくていい JSONを1項目ずつProtobufのバイト列に変換すると、57バイトが19バイトに縮む。辞書がないと読めないことや、gRPCの呼び出しの裏側も追える。
FIG-098 GraphQL — 欲しい具材だけ、メモで1回 画面に出したい項目にチェックを入れて注文すると、RESTは窓口を何度も回って具材を捨て、GraphQLは頼んだ形のまま1回で届く。
FIG-097 HTTPリクエストの流れ — 「ください」の前に3往復 URLを打ってからページが出るまでを1段階ずつ進める。RTTのスライダーと「2回目」の切り替えで、どこに時間がかかり、どこが省けるかが分かる。
FIG-096 ヘッダーとボディ — 伝票を読み終えてから、箱を受け取る 届いたHTTPレスポンスを1行ずつ読み、空行で伝票が終わるのを確かめる。空行を抜くと壊れ、Content-Typeを変えると同じ中身の扱いが変わる。
FIG-095 パケットキャプチャ — 空中の手紙を、虫眼鏡で読む カフェのWi-Fiを流れるパケットを1行ずつ覗くと、スパイの手帳が埋まっていく。HTTPならパスワードまで、HTTPSでも行き先までは見える。
FIG-094 マルチキャストとブロードキャスト — 全校放送か、部員だけのインカムか 送り方を切り替えて放送すると、送る回数と「関係ないのに起こされる端末」が入れ替わる。部員をクリックで増減できる。
FIG-093 IPv4とIPv6 — 教室が満席になったので、体育館へ 年代を進めると43億の席が埋まり、廊下に行列ができ、NATの相席でしのぐ。IPv6の体育館では、教室まるごとが1マスに縮む。
FIG-092 ルーティング(OSPF / BGP) — 地図を持つか、うわさを信じるか 道路をクリックして渋滞・通行止めにすると、最短経路が引き直される。BGPでは偽の標識ひとつで、銀行宛てのパケットが奪われる。
FIG-091 実行計画(EXPLAIN) — 索引が速いとは限らない 条件に当たる行の割合を動かすと、選ばれる道順がSeq ScanとIndex Scanでひっくり返る。実行して触った場所も見える。
FIG-090 Kubernetes — 宣言した数に、勝手に戻し続ける Podをクリックして壊し、ノードごと落としても数が戻る。手順ではなく状態を宣言するという考え方を体験できる。
FIG-089 DDoS攻撃 — 壊すのではなく、入り口を塞ぐ 攻撃者の数をスライダーで増やすと、どこかで本物のお客さんが入れなくなる。対策を切り替えて、どの規模まで持つかを試せる。
FIG-088 コネクションプール — 受話器を上げたまま、使い回す 回線の本数を変えて6件を流すと、待ち行列が伸びたり消えたりする。毎回つなぎ直すと接続の固定費だけで時間が溶ける。
FIG-087 キャッシュ戦略 — 速いほうを読む、ということ キャッシュとDBを自分で読み書きすると、書いた直後にズレが生まれ、TTLが切れた瞬間に直る。Cache AsideとWrite Throughを比べられる。
FIG-086 VPN — 公道に、自分専用のトンネルを1本掘る スイッチを入れると封筒が二重になり、経路上の覗き見役に何が見えなくなるかが切り替わる。出口から先は隠れないことも分かる。
FIG-085 パイプとファイルディスクリプタ — 縦棒1本が、何をつなぎ替えているのか 1ステップずつ進めると、土管が1本作られ、左のfd1と右のfd0がつなぎ替わる。行が流れ、stderrだけがパイプに乗らない。
FIG-084 プロキシとリバースプロキシ — 同じ箱を、どちら側に置くか 直接/フォワード/リバースを切り替えて送ると、パケットの送信元IPが書き換わる。隠れるのがクライアントかサーバーかが反転する。
FIG-083 UDP — 返事を待たずに、投げっぱなしにする パケットロス率を変えて同じ5個を流すと、TCPは再送で待たされ、UDPは先に着く。かわりに欠落と追い越しがそのまま残る。
FIG-082 メモリリーク — GCがあるのに、なぜ溢れるのか 機能を実行するたびヒープが埋まる。参照を残すとGCが何度回っても1マスも空かず、手放した瞬間に一気に回収される。
FIG-081 CI/CDパイプライン — 関所を落ちたら、先には進まない pushするとBuild/Test/Deployが流れる。テストを壊すとDEPLOYがスキップされ、並列と直列で待ち時間の差も比べられる。
FIG-080 Anycast — 同じIPが世界中にある 世界地図をクリックすると、同じ宛先IPなのに一番近い拠点へ吸い込まれる。拠点を止めると行き先が自動で移る。
FIG-079 サーバーレス — 注文が入った瞬間だけ現れる屋台 リクエストを送ると実行環境が立ち上がり、放っておくと消える。コールドスタートと課金の違いをその場で比べる。
FIG-078 レプリケーション — 影武者が書き写すのを待つか、待たないか 同期/非同期を切り替えて書き込み、直後にレプリカを読むと古い残高が返ってくる様子を体験できる。
FIG-077 HTTP/1.1 vs 2 vs 3 — 詰まりをどこまで外せたか 同じ12ファイルを3バージョンで読み込むレース。パケットを1つ落とすと、HTTP/2は全部が止まりHTTP/3は1本だけが止まる。
FIG-076 トランザクション分離レベル — 他人の途中経過は、どこまで見えるのか 2つのトランザクションを1ステップずつ動かし、ダーティリードやファントムが起きる瞬間とMVCCが防ぐ様子を見る。
FIG-075 RAID — 分けて速くするか、重ねて守るか RAID 0/1/5/10 を切り替え、ディスクをクリックで壊してデータが生き残るか試せる。
FIG-074 TCPの信頼性制御 — 落としても、必ず届ける パケットロス率を変えて荷物を落としながら、ACK・再送・輻輳ウィンドウの動きを1ラウンドずつ追える。
FIG-073 CSS Grid — 先にマス目を引き、そこへ置く grid-template-columns や gap、span を切り替えるとマス目が引き直され、生成CSSも同時に確認できる。
FIG-072 衝突判定とQuadtree — 近いものだけ比べれば足りる 飛び回る点の数を増やしながら、総当たりとQuadtreeで距離計算の回数がどれだけ変わるかを見比べる。
FIG-071 CSRF — 押した覚えのない送金が通ってしまう 罠サイトのボタンから銀行へPOSTを飛ばし、CSRFトークンとSameSiteのON/OFFで攻撃が止まる瞬間を試す。
FIG-070 楽観的ロックと悲観的ロック — 待たせるか、やり直させるか 2人が同じ行を同時に更新する様子をステップ実行し、ロック待ちとversion衝突検知の違いを掴む。
FIG-069 デプロイ戦略 — トラフィックをいつ新版へ移すか Blue-Green / カナリア / ローリングを切り替えてステップ実行し、切り替えの速さと切り戻しの重さを見比べる。
FIG-068 仮想メモリ — 机が足りなければ床に下ろす 4枠しかない物理フレームに8枚の仮想ページをやりくりさせ、ページフォルトとスワップが起きる瞬間を体験する。
FIG-067 Gitの3エリア — add と commit は別々の引っ越し Working/Staging/Repository間を add・commit・restore でファイルが移動する様子を操作して、3エリアの役割を掴む。
FIG-066 ブラウザの描画パイプライン — どこからやり直すか DOM→CSSOM→Layout→Paint→Compositeをステップ実行し、width/color/transformで再描画範囲がどう変わるかを体感する。
FIG-065 パスワードはなぜソルトを足すのか 本物のSHA-256で保存ハッシュを計算し、ソルトのON/OFFでレインボーテーブルの逆引きが成功/失敗するのを試す。
FIG-064 Attention — どの単語が、どの単語を見ているか 文中の単語をクリックすると、その語が他のどの語に注目しているかを重みの濃淡で可視化する。
FIG-063 REST API — 同じURLでもメソッドで意味が変わる GET/POST/PUT/DELETE を送ると、サーバーのコレクションとレスポンスがどう変わるかを操作してCRUDを掴む。
FIG-062 Dockerのレイヤーとキャッシュ — 変えた行から下だけ作り直す Dockerfileを上から「ビルド」し、2回目はキャッシュ、1行変えると以降が作り直しになる順序の効きを体感する。
FIG-061 XSS — 入力した文字が、コードとして実行される コメント欄に攻撃文字列を投稿し、そのまま表示(脆弱)とエスケープ(安全)で結果がどう変わるかを試す。
FIG-060 WebSocket — かけっぱなしの糸電話 ハンドシェイクで線を張り、その後クライアント発・サーバー発の双方向通信が流れる様子を操作する。
FIG-059 スタックとヒープ — 値を渡すか、地図を渡すか コードを1行ずつ実行し、値型のコピーは独立、参照型は同じ実体を共有することを体感する。
FIG-058 プロセスとスレッド — 共有メモリは速いが危ない 2スレッドに共有カウンターを増やさせ、ロック無/有で「失われた更新」が起きる/防げる様子を動かす。
FIG-057 CAP定理 — 分断のとき、一貫性か可用性か 回線を分断して CP/AP を切り替え、書き込みの拒否 vs 値の食い違い→結果整合性での収束を操作する。
FIG-056 Virtual DOM — 違う部分だけを実DOMに当てる リストを編集して新旧を比較し、維持・更新・新規・削除の色分けとDOM操作回数の差を体感する。
FIG-055 状態管理 — データは一方通行でしか流れない ボタンを押すと Action→Reducer→Store→View のサイクルが時計回りに一周する様子を動かして学ぶ。
FIG-054 OAuth 2.0 — パスワードを渡さず「許可証」だけ貸す 4者のキャッチボールを1ステップずつ追い、アプリに鍵を渡さず時間限定トークンを得る流れを体験する。
FIG-053 データベースのインデックス — 半分ずつ捨てて探す巻末索引 同じ検索を全表スキャンと索引で走らせ、比べた回数が桁違いになる様子を実測する。
FIG-052 コンパイラとインタプリタ — 先に全部訳すか、その場で訳すか 繰り返し回数スライダーを動かして、起動は速いインタプリタと、回すほど速いコンパイラの逆転を見比べる。
FIG-051 勾配降下法 — 坂を下って誤差の谷を探す ボールを1歩ずつ転がして谷底へ。学習率スライダーを上げすぎると行き過ぎて発散する様子を体感する。
FIG-050 traceroute — 寿命を1ずつ延ばして経路をあぶり出す TTLを1,2,3…と増やしたプローブを送り、時間切れの返信で1ホップずつ道のりを描き出す様子を体験する。
FIG-049 コンシステントハッシング — ノードを足しても引っ越しは最小 リング上でノードを追加・削除し、引っ越すキーが「% 台数」方式よりずっと少ないことを実数で見比べる。
FIG-048 Trie(トライ木) — 同じ書き出しは道を共有する 単語を挿入すると木が育ち、共通の接頭辞でノードが共有される。検索は根から1文字ずつ経路が光る。
FIG-047 プロトタイプチェーン — 自分に無ければ、上に聞く dog.toString() などを選ぶと、見つかるまで __proto__ を1段ずつ上に辿る探索アニメーションを動かせる。
FIG-046 ダイクストラ法 — いちばん安い道から確定する グリッド迷路をステップ実行。コスト最小の候補から探索を広げ、砂地を避けた最短経路が引かれる様子を見る。
FIG-045 コンテナとVM — OSを抱えるか、共有するか VMとコンテナを起動して、メモリ使用量と起動の速さを比較。重いVMと軽いコンテナの差を体感する。
FIG-044 SQL JOIN — 2つの表を、どこまで残してくっつける? INNER/LEFT/RIGHT/FULLを切り替えると、残る行と結果表・NULLの出方が連動して変わる。
FIG-043 RAG — LLMに「カンニングペーパー」を渡す 質問に関係する資料を検索してプロンプトに詰め込む流れを操作。資料あり/なしで答えがどう変わるかを確かめる。
FIG-042 CDN — 本店まで行かず、近所で受け取る 各地のエッジにファイルをキャッシュ。初回はミスで本店まで往復、2回目からは近くのヒットで一瞬になるのを体験する。
FIG-041 ブロックチェーン — 1つ書き換えると、後ろが全部壊れる ブロックのデータを書き換えると、本物のSHA-256で計算された鎖が切れて以降が赤く染まる。改ざん検知の連鎖を体験する。
FIG-040 レートリミットとリトライ — 断るのは優しさ トークンバケツが流量を制限し、429で弾かれたら指数バックオフで投げ直す様子を操作する。
FIG-039 正規化 — 1つの事実は、1か所だけに書く 非正規形→1NF→2NF→3NFとステップを進め、重複セルがどこで消えるかをハイライトで追う。
FIG-038 ポート番号 — 1つの住所、たくさんの号室 ポート番号を選んでドアをノックすると、応答する住人(サービス)が入れ替わる様子を体験する。
FIG-037 NAT / NAPT — 1つの住所を皆で分け合う 複数の機器から送信し、1つのグローバルIPがポート番号で見分けて配り分ける様子を見る。
FIG-036 トランザクションとACID — 振込の巻き戻しボタン 振込を途中で失敗させ、ロールバックで元に戻す。「全部成功か、全部なかったことか」を体感する。
FIG-035 JWT — 読めるのに偽造できない通行証 中身を書き換えてから検証すると、署名(ハンコ)が合わずに弾かれる様子を本物のHMACで体験する。
FIG-034 トークナイズ — LLMは文章をどう刻んで読むか 文章を打つとリアルタイムでトークンに分割。英語と日本語でトークン数がどう変わるか見比べる。
FIG-033 環境変数 — コードを変えずに接続先を切り替える 環境スイッチを切り替えると、同じコードのまま接続先のデータベースだけが変わるのを試す。
FIG-032 クロージャ — 関数が変数を抱えたまま外へ出る カウンター工場を動かして、各関数が自分専用のcountを覚え続ける様子を体験する。
FIG-031 二分探索木 — 小さければ左、大きければ右 数値を挿入すると木が育つ。検索で左右どちらに降りるかをステップ実行し、探索が速い理由を体感する。
FIG-030 Cookieとセッション — サーバーはどうやって「あなた」を覚えるか ログインしてリクエストを送信。Cookieを送る/消すを切り替えて、覚えてもらえるかどうかが変わるのを試す。
FIG-029 ハッシュ関数 — 1文字変えると、全部変わる 入力を打つと本物のSHA-256が即計算される。1文字いじるだけで出力が激変する「雪崩効果」を体感する。
FIG-028 Pub/Sub — 1回の発行が全員に届く 「配信」を押すと購読者全員へ一斉に届くファンアウトを体験。購読をON/OFFして届く相手が変わる様子を見る。
FIG-027 BFSとDFS — 広く探すか、深く潜るか 同じグラフをステップ実行で探索。待ち箱がキューかスタックかで訪問順がどう変わるかを体感する。
FIG-026 Flexbox — 主軸と交差軸さえ掴めばいい justify-content・align-items を切り替えると、カードが動いて並び直す。実物のCSSも一緒に見える。
FIG-025 CPUキャッシュ階層 — 近いほど速いが、小さい データを要求してL1→L2→L3→RAMの探索を動かし、再アクセスが一瞬になる局所性を体感する。
FIG-024 CSSの詳細度 — なぜか色が変わらない、の正体 競合するルールをON/OFFして、点数(a,b,c)と勝者・ボタンの色がどう決まるかを試す。
FIG-023 ブルームフィルタ — 「絶対に無い」だけ即答する門番 単語を登録するとビットが立つ。問い合わせて「確実に無い」と偽陽性(あるかも)の違いを体験する。
FIG-022 メッセージキュー — 行列が速さの違いを吸収する 発行を連打しても発行者は待たされない。行列がバッファになり、処理係が自分のペースでさばく様子を体感する。
FIG-021 ガベージコレクション — 辿れないものはゴミ 参照の線を切って、ルートから到達できないオブジェクトがマーク&スイープで回収される様子を動かす。
FIG-020 二分探索 — 真ん中を見て、半分を捨てる カードを選んでステップ実行し、1回比べるたびに候補が半分に減るのを体感する。
FIG-019 公開鍵暗号 — 盗聴者の前で南京錠を配る 「閉める鍵」と「開ける鍵」を分けると、なぜ盗聴者の前でも秘密を渡せるのかを7ステップで体験する。
FIG-018 ロードバランサー — 次のお客さんはどの窓口へ? リクエストを送って、ラウンドロビンと最小接続数で配り方がどう変わるか見比べる。
FIG-017 ソートアルゴリズム — 同じ並び替えでも手間が違う バブル/選択/クイックを切り替えてステップ実行し、「比べた回数」の差を体感する。
FIG-016 サーキットブレーカー — 落ちた相手と共倒れしない 相手サービスを故障・復旧させて、Closed/Open/Half-Openの状態遷移を動かして学ぶ。
FIG-015 SQLインジェクション — 入力欄に呪文を混ぜて扉を破る 脆弱なログインフォームに攻撃文字列を入れて認証突破を再現し、プレースホルダで防ぐ。
FIG-014 デッドロック — お互いの一足を待ち続ける2人 2つのスレッドにロックを取らせて膠着を再現し、発生4条件と防ぎ方を体感する。
FIG-013 N+1問題 — 職員室に10回も聞きに行かない 「1人ずつ聞く」と「名簿をまとめてもらう」を実際に走らせて、往復11回 vs 1回を体感する。
FIG-012 HTTPSの鍵渡しパズル — 盗聴者の前で南京錠を配る 盗聴者が見ている道で共通鍵を安全に渡すTLSハンドシェイクを、8ステップで操作しながら学ぶ。
FIG-011 DHCP — Wi-Fiにつないだ瞬間のチェックイン手続き ホテルのフロントで空き部屋の鍵=IPを借りるDORAの4往復を、8ステップで操作しながら学ぶ。
FIG-010 CORSはなぜ怒るのか — ブラウザ先生の検問所 別オリジンへのfetchが検問される様子を、プリフライト〜許可まで8ステップで操作しながら学ぶ。
FIG-009 スタックとキュー — 積む山と、並ぶ行列 同じ順番で荷物を入れて、出てくる順番が逆になる(LIFO/FIFO)のを体験する。
FIG-008 IPアドレスとサブネットマスク — どこまでが「町名」か スライダーで境界線を動かすと、32ビットの住所が町名と番地に光り分かれる。
FIG-007 LRUキャッシュ — 机からあふれた本はどれを返す? 本をクリックして、ヒット・ミス・追い出しと「LRUの弱点」まで体験する。
FIG-006 HTTPステータスコードはカフェ店員の返事 コードのボタンを押すと店員さんの反応が変わる。百の位で責任の所在をつかむ。
FIG-005 DNS名前解決 — 質問のバケツリレー ルート→TLD→権威サーバーをめぐる旅とキャッシュ即答を、8ステップで操作しながら学ぶ。
FIG-004 JavaScriptはなぜ「待てる」のか — イベントループ タスクキューにタスクを積んで、ループが回る様子を観察する。
FIG-003 Gitのブランチは「付箋」だと思えばいい コミットのグラフを自分で伸ばして、マージを体験する。
FIG-002 ハッシュテーブルはなぜ一瞬で見つかるのか キーを入力して、住所が計算される様子をその場で試せる。
FIG-001 TCP/IPの仕組み — パケットの旅 データの荷造り(カプセル化)から開封まで、8ステップで操作しながら学ぶ。