動かして学ぶ
可視化・シミュレータ一覧
読んで分かるものと、動かして初めて分かるものは別物です。 TCPの輻輳制御が鋸歯状になる様子、コンシステントハッシュがノード追加で崩れない様子、OAuthのPKCEが何を守るか—— このサイトの全94本の可視化・シミュレータ・クイズ・早見表を、トピック別に一覧できます。
94 件
プログラミング
可視化・シミュレータ誕生日のパラドックス／UUID衝突確率シミュレータ23人集めると同じ誕生日のペアが50%超で現れる誕生日のパラドックスを、UUIDやPINコードの衝突確率に置き換えて体感。可視化・シミュレータマークル木可視化本物のSHA-256でリーフから積み上げ。1件編集すると根までの経路が変化。Merkle Proofも確認できる。可視化・シミュレータスキップリスト可視化検索は右へ進んで詰まったら1段下へをステップ再生。挿入はコイン投げでレベルが決まる過程を確認。可視化・シミュレータ赤黒木可視化キーを挿入してBST探索→赤い葉として追加→フィックスアップをステップ再生。3性質のライブ判定つき。可視化・シミュレータAVL木可視化キーを挿入してLL/RR/LR/RL回転をステップ再生。挿入では回転1回で木全体が直ることまで確認できる。可視化・シミュレータトライ木（Trie）可視化単語を挿入してノードの再利用/新規作成をステップ再生。検索・前方一致ではオートコンプリートの実例まで確認。可視化・シミュレータUnion-Find可視化find（経路圧縮）とunion（union by rank）をステップ再生。findだけで木が平たくなる様子が見える。クイズ・診断Big-O計算量あてクイズコード片の時間計算量を4択で当てる12問。ネストは掛け算・並列は足し算・半分は対数という読み方が身につく。可視化・シミュレータBloomフィルタ可視化要素を追加してビットが立ち、クエリで「確実に無い／たぶんある」を判定。偽陽性が生まれる瞬間を体感。可視化・シミュレータ圧縮アルゴリズム可視化Huffman木（頻度から木を構築）とLZ77（スライド窓で参照）をステップ可視化。gzip/PNGの中身が分かる。可視化・シミュレータガベージコレクション可視化ヒープの参照グラフを描き、mark & sweepをステップ表示。循環参照も回収できる理由が分かる。可視化・シミュレータgitコミットグラフ可視化commit・branch・checkout・mergeを1ステップずつ再生。「ブランチはただのポインタ」が腑に落ちる。可視化・シミュレータハッシュテーブル可視化チェイン法と線形探索で衝突・プローブ・負荷率によるリサイズを可視化。平均O(1)の成り立ちが分かる。可視化・シミュレータIEEE 754 可視化10進数をfloat32/64のビットに分解し、実際に格納される正確な値をBigIntで厳密表示。0.1+0.2≠0.3が腑に落ちる。可視化・シミュレータLRUキャッシュ可視化GET/PUTのたびにキーがMRU側へ移動し、容量超過でLRU側が追い出される様子を可視化。可視化・シミュレータLFUキャッシュ可視化教科書（LeetCode 460）の例をそのまま再生。頻度グループ×グループ内LRUの2階層構造がLRUとの違い。可視化・シミュレータヒープ可視化木構造と配列表示を同時に見ながらステップ再生。ビルドヒープがO(n)で済む様子まで確認できる。検索できる早見表マジックナンバー辞典PNG・ZIP・PDF・ELFなどファイル先頭のシグネチャを検索。拡張子は自己申告に過ぎないと分かる。可視化・シミュレータ経路探索アルゴリズム可視化グリッドに壁を描いて、BFS・ダイクストラ・A*の探索の違いをアニメーションで比較。可視化・シミュレータ同じ処理を10言語でFizzBuzz・コレクション処理・並行処理を10言語で並置。ループ・資源管理の設計思想の違いが分かる。検索できる早見表IT用語 読み方辞典nginx・kubectl・GIF・JWTなど読みが割れる用語を、公式・作者の表明と由来つきで引ける。可視化・シミュレータ正規表現エンジン可視化正規表現をNFAにコンパイルし、状態集合を追いながら照合。線形時間で進む理由が分かる。検索できる早見表正規表現パターン集メール・URL・日付など定番パターンを、部品の意味と「この式では足りない場面」つきで検索。可視化・シミュレータソートアルゴリズム可視化6つの並べ替えを比較・交換のアニメーションで可視化。計算量の違いが直感で分かる。可視化・シミュレータ状態遷移（FSM）可視化TCPの11状態を実際に歩いて、CLOSE_WAITとTIME_WAITの意味を体感。信号機・自販機の入門プリセットつき。可視化・シミュレータトポロジカルソート可視化ビルド依存や履修の前提科目を、Kahn法とDFS法でステップ実行。循環依存の検出も確認できる。クイズ・診断What will this print?コード片の出力を当てるクイズ。0.1+0.2・typeof nullなど言語仕様の罠を実挙動と理由で学ぶ。
システム設計
可視化・シミュレータ指数バックオフとジッタ可視化一斉リトライが殺到する様子を5方式で同時シミュレーション。ジッタが群れをどう散らすかが分かる。可視化・シミュレータコンシステントハッシュ可視化ノードを追加・削除しても再配置が最小限で済む様子を可視化。仮想ノードによる平準化も体感。可視化・シミュレータCRDT可視化3つのレプリカを独立に更新しても、同期すれば必ず同じ値に収束する仕組みを可視化。可視化・シミュレータリトルの法則シミュレータスループット・レイテンシ・同時実行数から必要な並列度を計算。L=λWへ収束する様子を確認。可視化・シミュレータロードバランシング可視化6つの分散方式を実アルゴリズムでシミュレーション。負荷を流して分散の均等さを目で確かめる。可視化・シミュレータクォーラム N/R/W 可視化R+W>Nなら古い値は返らないことを、実際に書き込みと読み取りをして体感。可視化・シミュレータRaft合意シミュレータ5ノードでリーダー選出・ハートビート・ログ複製・コミットを可視化。リーダー障害からの再選出も。可視化・シミュレータ2相コミット（2PC）可視化コーディネータ+3参加者DBのシーケンス図。正常系・アボート系・コーディネータ障害のブロッキング系を再生。可視化・シミュレータPaxos合意アルゴリズム可視化Proposer2+Acceptor3のシーケンス図。正常系・2 Proposerの競合系・既存値を引き継ぐ再提案系を切替可能。可視化・シミュレータベクタークロック可視化3ノードのシーケンス図。因果の連鎖・happened-beforeが無い並行系・分散DBのコンフリクト検知を切替可能。可視化・シミュレータレートリミッタ可視化トークン/リーキーバケット・スライディングウィンドウの3方式を時間駆動でシミュレーション。
ネットワーク
可視化・シミュレータDNS反復解決シミュドメイン名がIPになるまでを、ルート→TLD→権威サーバーへの反復問い合わせとして段階再生。可視化・シミュレータgRPCフロー可視化4つのRPCパターンをHTTP/2フレームのシーケンス図で比較。RESTやWebSocketとの違いも分かる。可視化・シミュレータOSI参照モデル 7層を動かすデータが各層を下る「カプセル化」と上る「逆カプセル化」の過程を可視化。可視化・シミュレータSMTPフロー可視化220挨拶→EHLO→STARTTLS→AUTH→MAIL/RCPT/DATA→QUITをステップ再生。なぜEHLOを2回送るかが分かる。可視化・シミュレータDNSSEC検証チェーン可視化4アクターのシーケンス図。Secure（検証成功）・Bogus（改ざん検知）・Insecure（未署名）を切替可能。可視化・シミュレータTCP輻輳制御シミュレータスロースタート→AIMD→ロスというcwndの鋸歯状の動きを、Reno・CUBIC・Tahoeで可視化。可視化・シミュレータURLを入力してから画面が表示されるまでDNS・TCP・TLS 1.3・HTTP・レンダリングまで、1秒の内訳をステップ実行で辿る。面接定番。可視化・シミュレータWebSocketハンドシェイク可視化HTTP UpgradeからApplication Dataまでをステップ再生。なぜHTTPで始まるかが分かる。
セキュリティ
可視化・シミュレータあなたのブラウザは何を漏らしているかCanvas指紋・WebGLレンダラー・フォント検出などを自分の端末で実演。計算は端末内で完結し送信なし。可視化・シミュレータOAuth 2.0 フロー可視化認可コードフロー（+PKCE）を4者間でステップ再生。PKCEとstateが何を守るかが図で分かる。可視化・シミュレータプロンプトインジェクション体験8種の攻撃手法を、無防備な実装と対策された実装の応答比較で学ぶ。実LLMは呼ばない台本形式。可視化・シミュレータReDoS可視化正規表現の破滅的バックトラッキングが入力長で指数爆発する様子を体感。Cloudflare全球障害の原理。可視化・シミュレータTLS 1.3 ハンドシェイク可視化ClientHelloからApplication Dataまでステップ再生。どこから暗号化が始まるかが分かる。可視化・シミュレータDiffie-Hellman鍵交換可視化秘密指数を動かしてmod羃乗を実計算。Eveに見える情報・見えない情報を明示し離散対数の非対称性が分かる。クイズ・診断脆弱コード当てクイズSQLi・XSS・SSRFなど、コード片から脆弱性を当てる12問。原理と直し方まで解説。
OS
可視化・シミュレータ銀行家アルゴリズム可視化デッドロック回避の判定を可視化。「承認すると誰も終われなくなる」要求が拒否される様子を体感。可視化・シミュレータページ置換アルゴリズム可視化FIFO・LRU・Clock・OPTの4方式を同じ参照列で同時比較。フレームを増やすとFIFOだけフォルトが増えるBeladyの異常も再現。可視化・シミュレータCPUキャッシュ可視化アクセスパターン（連続・ストライド・ランダム）でヒット率と実効レイテンシがどう変わるかを可視化。可視化・シミュレータCPUパイプライン可視化5段パイプラインに命令列を流し、フォワーディングや分岐予測でストールがどう変わるかを可視化。検索できる早見表ポート番号・シグナル・errno 早見表よく使うポート番号・Unixシグナル・errnoを意味つきで検索できる早見表。
データベース
可視化・シミュレータB-Tree vs LSM-Tree 書き込み対決同じキー列を両構造に挿入し、B-Treeのランダム更新とLSM-Treeの追記+コンパクションを並べて可視化。可視化・シミュレータCAP定理可視化3ノードで実際に分断を発生させ、CP/APの挙動差をGET/PUTで体感。結果整合性の収束まで確認できる。可視化・シミュレータWAL（先行書き込みログ）可視化書き込み・コミット・チェックポイント・クラッシュを実際に動かし、解析→redo→undoのリカバリをステップ再生で確認できる。可視化・シミュレータデッドロック検出可視化ロック要求を実際に発生させ、待機-forグラフに閉路ができた瞬間デッドロックが確定する様子を確認。犠牲者アボートで解消も試せる。可視化・シミュレータSagaパターン可視化コレオグラフィ/オーケストレーションの正常系・異常系（補償）を同時比較。2PCとの違いが分かる。可視化・シミュレータSQLプレイグラウンドサンプルテーブルに対し、ブラウザだけで本物のSQL（SQLite）を実行。インストール不要・送信なし。
CPU/メモリ/ディスク
Web/フロントエンド
可視化・シミュレータHTTPキャッシュ可視化初回・期限内ヒット・304再検証・変更の4シナリオを、ネットワーク使用の有無つきで可視化。可視化・シミュレータイベントループ可視化コールスタック・タスク・マイクロタスク・rAFを並べて仕様どおりの1反復をステップ再生。なぜPromiseがsetTimeoutより先かが構造で分かる。検索できる早見表HTTPステータスコード大全200〜500番台の意味・使いどころ・よくある原因を検索できる早見表。可視化・シミュレータHTTP/2多重化可視化接続数1/2/6のHTTP/1.1とHTTP/2の完了時間を実計算で比較。HPACKによるヘッダ圧縮のバイト削減も確認できる。可視化・シミュレータCSS詳細度・カスケード可視化セレクタの詳細度を実際にパースして計算。オリジン→レイヤ→詳細度→出現順のどの段で勝敗が決まったかを追える。可視化・シミュレータCORSプリフライト判定可視化メソッドとヘッダを選ぶと単純リクエストの条件を実際に判定。OPTIONSの発火とAccess-Control-*の照合を段ごとに追える。可視化・シミュレータスタッキングコンテキスト可視化opacityやtransformの生成条件と7段のペイント順を実際に判定。z-indexが効かない理由を本物のDOMと並べて確認できる。可視化・シミュレータCore Web Vitals計測アルゴリズム可視化CLSのimpact×distanceとセッションウィンドウ、INPの3区間と外れ値除外を実計算。なぜその数値になるかを追える。
AI/機械学習
可視化・シミュレータSelf-Attention可視化投影→スコア→スケール→softmax→加重和を実数値で再生。√d_kで割らないとsoftmaxが飽和することを実測できる。可視化・シミュレータデコーディング戦略可視化temperature/top-k/top-pで分布を操作し、貪欲法とビームサーチが局所最適をどう扱うかを実測できる。可視化・シミュレータHNSW近似最近傍探索可視化点をクリックして多層グラフの検索過程を体感。efSearchによる再現率と速度のトレードオフを総当たりとの比較で実測できる。可視化・シミュレータk-means/GMM/EM可視化k-meansとGMMを同じデータで並走させ、SSE・対数尤度の単調改善を実測。k-means++の効果も分布で確認できる。可視化・シミュレータROC・PR曲線とAUC可視化ROC-AUCを台形積分・ペア列挙・ランク和法の3通りで計算し一致を確認。不均衡データでROCとPRが乖離する様子も実測できる。可視化・シミュレータアテンション変種比較可視化full・疎・線形・FlashAttention・GQA/MQAの計算量とメモリを実計算で比較。3つの直交する最適化軸を数値で確認できる。可視化・シミュレータトークナイザ可視化GPT-4o系の本物のBPE辞書でテキストがどうトークンに分割されるかを可視化。日本語がトークンを食う理由が分かる。可視化・シミュレータ埋め込み2D可視化サイト自身の全記事タグから作った本物の埋め込みを2次元散布図で可視化。意味の近さが実データで見える。
DevOps/インフラ
可視化・シミュレータGossipプロトコル可視化push/pull/push-pullを同時比較。ノード数を2倍にしてもラウンド数がO(log N)でしか増えないことを実際に確認できる。可視化・シミュレータサーキットブレーカ可視化依存先を健全/障害で選んでリクエストを送信。失敗率のしきい値遮断と、実際に待ってからの復旧判定を体感。可視化・シミュレータ分散ロック可視化Redlockのクォーラム取得を試行。GCポーズがTTLを超えた時、フェンシングトークンの有無でデータ破壊が起きるかを比較。可視化・シミュレータφ Accrual障害検出器可視化ハートビート間隔の履歴からμ・σを実計算し、φ=-log10(P_later(t))を算出。固定タイムアウトとの判定の違いを比較できる。可視化・シミュレータシャッフルシャーディング可視化完全巻き込み確率1/C(n,k)と共有台数の分布を実計算。固定シャードとの被害範囲の差を実際の割り当てで比較できる。可視化・シミュレータ待ち行列理論可視化利用率ρを動かすと1/(1−ρ)で応答時間が発散する様子を実計算。ファンアウトによるテイル増幅も数値で確認できる。可視化・シミュレータUSL（普遍スケーラビリティ則）可視化競合σと一貫性κから最適ノード数N*=√((1−σ)/κ)を計算。増設が逆効果に転じる頂点を実測からも推定できる。