Visual Studio Code から PostgreSQL を簡単に操作する

こんにちは！オルターブース清島です。

2025年のオルターブースアドベントカレンダー7日目の記事となります。
6日目はChaseさんによる Microsoft 認定資格取得の体験記でした。

11月には Microsoft Ignite の開催に合わせて Microsoft 製品の様々な発表がありましたが、この記事ではその中から「Visual Studio Code の PostgreSQL 拡張機能」について取り上げます。

Visual Studio Code PostgreSQL 拡張機能の概要

公式ドキュメントに詳しく記載されていますが、概要としては次のようになります。

拡張機能のインストール手順、PostgreSQL サーバーへの接続、クエリエディターからの SQL クエリ実行、GitHub Copilot との連携についてそれぞれ紹介します。

インストールが完了すると、左メニューバーに PostgreSQL のアイコンが追加され、クリックすると CONNECTIONS / QUERY HISTORY / MIGRATIONS (PREVIEW) の3つで構成されるウィンドウが表示されるようになります。

ローカル/リモートにかかわらず、任意の PostgreSQL サーバーに接続することができます。

次のようなコマンドを実行して PostgreSQL サーバーの Docker コンテナがローカルで起動している状態を例とします。

docker pull postgres:18
docker run --name postgres-container -e POSTGRES_PASSWORD={任意のパスワード} -d postgres:18

PostgreSQL 拡張機能ウィンドウ > CONNECTIONS > + 接続の追加または CONNECTIONS メニューの右横にある Add New Connection アイコンを選択
表示されたサーバーに接続タブで、選択した接続方法に応じた項目を入力（下記はパラメーターで接続する場合の入力例）
- サーバー名: localhost
- 認証の種類: パスワード
- ユーザー名: 接続に使用するユーザー名
- パスワード: 接続に使用するユーザーのパスワード
テスト接続ボタンをクリックし、入力した情報で PostgreSQL サーバーに接続できるかどうか検証する
- ボタンにチェックマークが表示されたら検証成功です
保存して接続ボタンをクリックし、対象の PostgreSQL サーバーに接続する

Azure Database for PostgreSQL が事前に作成されている状態を例とします。

PostgreSQL 拡張機能ウィンドウ > CONNECTIONS > + 接続の追加または CONNECTIONS メニューの右横にある Add New Connection アイコンを選択
表示されたサーバーに接続タブで、選択した接続方法に応じた項目を入力（下記はパラメーターで接続する場合の入力例）
- サーバー名: リモートの PostgreSQL サーバーのエンドポイント
- 認証の種類: パスワード
- ユーザー名: 接続に使用するユーザー名
- パスワード: 接続に使用するユーザーのパスワード
テスト接続ボタンをクリックし、入力した情報で PostgreSQL に接続できるかどうか検証する
保存して接続ボタンをクリックし、対象の PostgreSQL に接続する

Azure Database for PostgreSQL への接続の場合は、サポートされる接続設定がさらに拡張されます。

PostgreSQL 拡張機能ウィンドウ > CONNECTIONS > 接続した PostgreSQL サーバーの任意のデータベースを右クリックし、New Query を選択
表示されたクエリエディターに SQL を記述し、右上の Execute PostgreSQL Query アイコンをクリックまたは Shift + Enter を入力しクエリを実行する

クエリの実行結果は、実行時に自動的に表示される POSTGRESQL QUERY RESULTS タブまたは拡張機能ウィンドウの QUERY HISTORY から確認できます。

データベースに存在するテーブルやその定義、テーブルどうしの関係性を可視化する Visualize Schema 機能も提供されており、データベースの中身を素早く直感的に確認することができます。

PostgreSQL 拡張機能ウィンドウ > CONNECTIONS > 接続した PostgreSQL サーバーの任意のデータベースを右クリックし、New Query を選択
表示されたクエリエディターの右上にある Chat with this query アイコンをクリックし GitHub Copilot Chat ウィンドウを表示する
- クエリエディターを開いたときに紐づけたデータベースに対して、デフォルトで read/write 権限を持つ GitHub Copilot とのチャットウィンドウです。
チャットウィンドウでデータベースに関する指示や質問を自然言語で送信する
- 送信されたプロンプトの内容に応じて GitHub Copilot が回答を出力したり SQL クエリを実行したりします。