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ステップで操作しながら学ぶ。
該当する記事が見つかりませんでした。