PGSimCityとは？PostgreSQLの内部動作をシムシティ風3Dで可視化する学習ツール徹底解説

「SQLは書けるし、インデックスも張っている。でも、なぜこのクエリが遅いのかを説明できない」——そんな経験に心当たりはないでしょうか。あるいは「autovacuumが走っているのにテーブルが膨張し続けている」という現象に頭を抱えたことはないでしょうか。

PostgreSQLの内部構造は、文章や図だけでは直感的に理解しづらい複雑さを持っています。バッファプール、WAL、チェックポイント、autovacuum——それぞれの仕組みは公式ドキュメントに詳細に記されていますが、それらが連動してどう動くかを頭の中で立体的にイメージするのは、経験豊富なエンジニアでも容易ではありません。

その課題に対して、まったく新しいアプローチで挑んだOSSツールがPGSimCityです。2026年7月に公開されるやいなや、はてなブックマークで287件を獲得し、技術者コミュニティで大きな話題となりました。

この記事では以下の点を詳しく解説します。

• PGSimCityの概要と技術的な仕組み
• インストール不要で今すぐ試す方法とローカル実行手順
• 3D都市で理解するPostgreSQL内部アーキテクチャ
• 学習・デバッグでの具体的な活用例
• pgBadger・pganalyzeなど類似ツールとの比較と使い分け

PGSimCityの概要 — PostgreSQLクラスタを「歩ける都市」に変えるOSS

開発者と誕生の背景

PGSimCityは、PostgreSQLコミュニティで著名なNikolay Samokhvalov氏が開発したオープンソースプロジェクトです（ライセンス: Apache-2.0）。

Samokhvalov氏がこのツールを作るに至った動機は、教育上の課題にあります。「PostgreSQLの内部構造をどう教えるか」という問いに対し、氏が選んだ答えは「歩き回れる都市として可視化する」というものでした。PostgreSQLクラスタ全体を一つの都市に見立て、各コンポーネントを建物やエリアとして表現することで、エンジニアが空間的・直感的に概念を把握できる仕組みを作り上げました。

最大の特徴：インストール不要でブラウザだけで動く

PGSimCityの最大の魅力は、何もインストールせずにブラウザを開くだけで即体験できる点です。

https://nikolays.github.io/PGSimCity/ にアクセスすれば、数秒で3D都市が目の前に広がります。この手軽さを実現しているのが、PGliteという技術です。PGliteはPostgreSQLをWebAssemblyにコンパイルしたライブラリで、PGSimCityに内蔵されています。つまり、ブラウザの中で本物のPostgreSQLエンジンが動作しており、リアルな挙動に基づいたシミュレーションが可能です。参照基準はPostgreSQL 18.4となっており、最新仕様に対応しています。

技術スタック

• Three.js r185 + WebGL2 による3Dレンダリング
• TypeScript + Vite によるフロントエンド構成
• PGlite（PostgreSQL/WebAssembly）による実エンジン内蔵

「なぜ3D都市というメタファーが効果的なのか」には認知科学的な根拠があります。人間の脳は空間記憶に優れており、抽象的な概念を「場所」と結びつけることで記憶・理解が格段に促進されます。プロセスの流れを「建物間の移動」として体感できるため、図や文章だけでは得られない直感的な理解が生まれます。

PGSimCityの使い方・インストール手順

ブラウザで今すぐ試す（推奨）

最も手軽な方法は公式ライブデモにアクセスすることです。

1. ブラウザで https://nikolays.github.io/PGSimCity/ を開く
2. 「Start the tour」をクリックしてガイドツアーを開始（全14章構成）
3. まず見るべき順序：Postmaster（北側入口）→ バッファプール（中央グリッド）→ WAL地区（東側）

段階的に理解を深めていく設計になっているため、はじめてのかたはガイドツアーに沿って進めることをお勧めします。

ローカル環境で動かす

パラメータを自由に変更して実験したい場合や、オフラインの勉強会で使いたい場合はローカル実行が便利です。

git clone https://github.com/NikolayS/PGSimCity.git
cd PGSimCity
npm install
npm run dev   # http://localhost:5173 で起動

動作要件: Node.js ≥ 20.19.0 / WebGL2対応ブラウザ（Chrome、Edge推奨）

ローカル実行のメリットは、shared_buffersやwork_memといったパラメータを自由にいじりながら挙動の変化をリアルタイムで観察できる点です。チューニングの因果関係を手を動かして学べる環境が整います。

操作のコツとつまずきポイント

カメラ操作はドラッグで回転、スクロールでズームが基本です。各エリア間はクリックで移動できます。動作が重い場合は、GPUアクセラレーションが有効になっているか確認し、ブラウザをChromeまたはEdgeに切り替えると改善することが多いです。モバイル端末では3Dレンダリングが制限されるため、デスクトップ環境での利用を推奨します。

3D都市で理解するPostgreSQL内部アーキテクチャ

PGSimCityの都市は、PostgreSQLクラスタの各コンポーネントを以下のように対応づけています。

プロセス構造 — Postmasterとバックエンドプロセス

北側入口に位置するPostmasterは、クライアントからの接続要求を受け付け、新しいバックエンドプロセスをforkする役割を担います。PGSimCityではこのforkの瞬間がアニメーションで表現されており、「なぜPostgreSQLはコネクション数が増えると重くなるのか」を都市の混雑に例えて直感的に理解できます。

接続のたびに新しいプロセスが生まれ、それぞれがメモリを消費するという事実は、知識として知っていても「そういうものか」で済ませがちです。しかし、混雑した入口から次々とワーカーが発生し、都市全体に負荷が広がる様子を目の当たりにすると、コネクションプール（PgBouncer等）の必要性が腹落ちします。

バッファプール — 中央グリッドで見るshared_buffers

都市の中央に広がる1024枚のフレームグリッドが、shared_buffersバッファプールを表しています。PostgreSQLはディスクからデータを読む際、まずこのバッファプールを確認し、目的のページが存在すれば（バッファヒット）そのまま返します。存在しなければ（バッファミス）ディスクからページを読み込み、バッファに格納してから返します。

バッファが満杯になったときに古いページを追い出す仕組みがクロックスイープアルゴリズムです。PGSimCityではこの置換の様子がリアルタイムでアニメーション表示されるため、「どのページがいつ追い出されるか」という動的な挙動が手に取るように分かります。

WAL地区 — 書き込みの耐久性を支える仕組み

東側のWAL地区では、データ更新が発生した際のWALバッファへの書き込みから、WALファイルへのフラッシュまでの流れが可視化されます。

• walwriter: WALバッファをWALファイルに定期的に書き出すプロセス
• walsender: レプリケーション構成においてスタンバイにWALを送信するプロセス

「なぜクラッシュ後もデータが失われないのか」という根本的な問いに対して、WALがどのタイミングでディスクに永続化されているかを目で追うことで、直感的な理解が得られます。

メンテナンスヤード — checkpointer・bgwriter・autovacuum

西側のメンテナンスヤードは、PostgreSQLの「縁の下の力持ち」たちが働く場所です。

チェックポイントは、バッファプール上のダーティページ（変更済みだがディスク未書き込みのページ）をまとめてディスクに書き出す処理です。max_wal_size / (1 + checkpoint_completion_target) がしきい値の計算式となっており、WALの蓄積量がこのしきい値を超えると強制チェックポイントが発生します。頻繁に発生すればI/Oスパイクの原因となり、逆に長すぎると障害時のリカバリ時間が延びます。

autovacuumは、削除・更新によって発生した不要タプル（デッドタプル）を回収するプロセスです。動く条件はautovacuum_vacuum_thresholdとautovacuum_vacuum_scale_factorによって制御されており、これらを超えないと起動しません。PGSimCityではautovacuumが動作・停止するサイクルを観察でき、「なぜ動かないのか」という疑問の答えを視覚的に確認できます。

学習・デバッグでの活用例

クエリライフサイクルをトレースする

PGSimCityでは、SQLクエリが実行される際の内部フェーズ——Parse（構文解析）→ Rewrite（書き換え）→ Plan（実行計画生成）→ Execute（実行）——をアニメーションで追うことができます。

「なぜEXPLAIN ANALYZEを読む力が重要なのか」という問いに対して、この流れを体感しておくことは、実行計画の各ノードが何をしているかのイメージを持つ上で非常に有効です。

障害シミュレーションで性能劣化を再現する

実際の開発現場では、パラメータのミスチューニングが性能問題の原因になるケースが少なくありません。PGSimCityではパラメータを変更して挙動の変化を観察できます。

• shared_buffers=16MB に絞る: バッファが極端に小さくなることでクロックスイープの競合が頻発し、ディスクI/Oが激増する様子を再現できます
• work_mem を制限する: ソート処理が一時ファイルへspillする様子を観察でき、work_memチューニングの重要性が体感できます

ベストプラクティスとして、まずデフォルト設定で動作させ、次に極端な値に変えて比較することで、各パラメータが与えるインパクトを段階的に理解することをお勧めします。

長時間トランザクションが引き起こす連鎖を可視化する

実運用でよく遭遇するインシデントの一つが、長時間トランザクションによるテーブル肥大化です。このメカニズムはPGSimCityで特によく理解できます。

長時間トランザクションが存在すると、そのトランザクションのxminより古いデッドタプルはautovacuumで回収できません。回収されないデッドタプルが積み重なると、テーブルのbloat（膨張）が進み、I/Oが増加し、チェックポイントの負荷も上がります。この連鎖を都市の中で目の当たりにすることで、「なぜ長時間トランザクションを許容してはいけないのか」が単なる知識ではなく、体験として刻まれます。

チーム学習・オンボーディングでの使い方

PGSimCityはチームの学習教材としても優れた使い勝手を持っています。ブラウザ共有さえできればどこでも動くため、リモートでのペア学習や画面共有解説がやりやすいのが特徴です。新人エンジニアへのオンボーディング研修において、PostgreSQLの基礎概念を教える場面で特に効果的です。

類似の可視化・監視ツールとの比較

主要ツール比較表

PGSimCityは「監視ツール」ではない

技術的に重要な点として明示しておきたいのは、PGSimCityは実行中の本番データベースに接続して状態を監視するツールではないという点です。あくまでもPostgreSQLの仕組みを教育的に可視化するシミュレーターです。本番環境のクエリをリアルタイム監視したい場合はpganalyzeやpgHero、ログからスロークエリを分析したい場合はpgBadgerを使うのが適切な選択となります。

併用すると効果が倍増する

PGSimCityが最も力を発揮するのは、他の監視ツールと組み合わせて使ったときです。推奨する学習導線は次のとおりです。

1. PGSimCityでバッファプール・WAL・autovacuumの概念を体感的に把握する
2. pgBadgerやpganalyzeで実際の本番データを見る
3. 監視ツールのメトリクス（blk_read_time、wal_bytes、n_dead_tupなど）が「何を測定しているか」を深く理解できる

概念と実データをつなぐ橋渡し役として、PGSimCityは非常に効果的に機能します。

PGSimCityの限界と注意点

教育目的のモデル化として読む

PGSimCityは教育ツールである以上、PostgreSQLの内部実装を完全に1対1で再現しているわけではありません。視覚的な理解を優先するために簡略化されている部分があります。「おおまかな仕組みを理解する」ための出発点として位置づけ、正確な仕様や動作は公式ドキュメント・ソースコードで確認する姿勢が大切です。

動作環境の制約

• WebGL2非対応のブラウザや古いGPU環境では動作しないか、パフォーマンスが著しく低下します
• モバイル端末では3D描画が制限される場合があります
• 参照基準はPostgreSQL 18.4のため、14以前などの旧バージョンを運用している環境では一部の挙動が異なる可能性があります

なぜPGSimCityはこれほど話題になったのか

はてなブックマーク287件が示すもの

はてなブックマーク287件という数字は、技術系コンテンツとして非常に高い反響です。この数字が示しているのは、「PostgreSQLの内部を理解したいが、どこから学べばいいか分からない」というエンジニアが如何に多いかということです。

GIGAZINEをはじめ、InfoQ、Gizmodo、IBM Thinkなど国内外の主要メディアが相次いで取り上げたことも、その反響の大きさを物語っています。

「難しいことを楽しく学べる」という体験設計への評価

PGSimCityが評価されたもう一つの理由は、技術的な正確さと学習体験の楽しさを両立させた点にあります。PostgreSQLの内部は、概念図を何十枚見ても掴みにくいとされてきました。それを「歩ける都市」という空間メタファーに落とし込んだアプローチは、Kafka・Redis・MySQL InnoDBなど他のミドルウェアへも展開できる汎用性を持っており、教育コンテンツとしての可能性は広いといえます。

まとめ — まずは5分、ブラウザで都市を歩いてみる

この記事で解説したPGSimCityのポイントを整理します。

• インストール不要：ブラウザを開くだけで今すぐ体験できる
• PostgreSQLの内部構造を3D都市として可視化：バッファプール、WAL、autovacuumなどの概念を空間的に理解できる
• 教育・学習用途に特化：本番監視ツールではなく、「仕組みを学ぶ」ための唯一無二のツール
• pgBadger・pganalyzeと組み合わせ：概念を学んだ後に実データを読む学習導線が最も効果的

難しいPostgreSQLの内部構造も、実際に都市を歩いてみると意外なほどスムーズに頭に入ってきます。まずは5分だけ、ブラウザで北側入口のPostmasterに会いに行ってみてください。SQLのパフォーマンスチューニングや障害対応に対するアプローチが、きっと変わるはずです。

次のステップとして以下を推奨します。

1. PGSimCityのガイドツアーを全14章通して体験する
2. PostgreSQL公式ドキュメントの「Server Architecture」章を読む
3. 実際のクエリにEXPLAIN ANALYZEを実行し、計画ノードとPGSimCityの概念を結びつける
4. pgBadgerやpganalyzeを導入して、本番環境のメトリクスを読む訓練をする

参考リンク

• PGSimCity ライブデモ
• GitHub: NikolayS/PGSimCity
• GIGAZINE: PostgreSQLの内部動作をシムシティ風のビジュアルで見ることができる「PGSimCity」
• InfoQ: How PGSimCity Turns PostgreSQL Complexity into a Virtual City 3D Simulation
• IBM Think: Someone turned PostgreSQL into a city you can walk around in
• PostgreSQL Monitoring Tools Compared (2026) - DEV Community