この記事について

この記事では、Visual Studio Code 上で、以下のデータベースに接続して値を確認する方法について解説します。

Azure Cosmos DB
PostgreSQL
Azure SQL Database for PostgreSQL

従来の開発では、Azure Strage Explorerや Azure ポータルのデータエクスプローラー、pgAdminなど、コーディングを行う場所とは異なるアプリケーションを並行で起動する事例も多かったと思います。
Visual Studio Code のみで、コーディングだけでなく、データベースの値も確認できることは、開発中に複数のアプリケーションを起動・行き来しなければならないというような、ちょっとした面倒を軽減させることが可能です。

Visual Studio Code 拡張機能

今回利用する拡張機能は、こちらです。2020 年 6 月 7 日に名称が変わりました。(PostgreSQL 対応が行われたため)
旧名称は、Azure Cosmos DBでした。詳しくは、こちらの記事をご確認ください。

Azure Databases
- https://github.com/microsoft/vscode-cosmosdb
PostgreSQL
- https://github.com/Microsoft/vscode-postgresql

Cosmos DB に接続

Cosmos DB に接続する場合は、Azure Databases 拡張機能を使用します。
拡張機能をインストールすると、Azureタブが表示されるようになります。
データベース関連については、この中に表示されるDATABASESタブ内で設定していきます。

Azure にサインイン

Sign in to Azure を選択して、Azure にログインします。
Web ブラウザが起動し、Azure へのログインが求められるので、画面に従いログインします。

[Ctrl] + [Shift] + [P](macOS の場合は [Command] + [Shift] + [P]) でコマンドパレットを表示し、Azure Sign In を選択することでも対応可能です。

サブスクリプションの選択

ログインした Azure テナントに複数の Azure サブスクリプションが存在している場合は、Visual Studio Code の下部に表示されている、画像の赤枠の部分を選択してください。

選択すると、全ての Azure サブスクリプションの表示/非表示を選択できます。

表示対象のサブスクリプションが DATABASES 欄に表示され、サブスクリプション部分を展開すると、作成済みの Cosmos DB があることを確認できます。

Cosmos DB に保存されているデータの確認

DATABASES 欄を展開していくことで、データの確認を行うことが可能です。

API for MongoDB や Gremlin API の場合は、Mongo Scrapbooksや グラフデータの視覚化を行うことが可能です。

Mongo Scrapbooks

Azure サインイン時と同様、[Ctrl] + [Shift] + [P](macOS の場合は [Command] + [Shift] + [P]) でコマンドパレットを表示します。
コマンドパレットから、MongoDB: New Mongo Scrapbook を探して選択します。

Mongo Scrapbooks のタブが表示されるので、Connect to databaseを選択して、接続する Azure Cosmos DB API for MongoDB のコレクションを選択します。
データベースを選択したら、表示が Connected to <コレクション名> に変わるはずです。

あとは、MongoDB を使ったことがある人ならば分かる通り、クエリを作成して、Execute を選択して実行するだけです。
クエリの実行結果は、別タブで表示されます。

なお、この MongoDB Scrapbooks の最高なところは、IntelliSense が自動で表示されるところです！是非、試してみてください。

Gremlin's query graphs

これまでは、こちらの Azure Cosmos DB Graph 拡張機能を追加インストールすることで、グラフデータの視覚化が可能でした。

Azure Cosmos DB Graph
- https://github.com/microsoft/vscode-cosmosdbgraph

現在、こちらの拡張機能は deprecated になっており、サポートがされていないようです。
Visual Studio Code ではなく、Apache Tinkerpop コミュニティが提供しているツールを使用することを推奨、となっています。

Azure Cosmos DB Gremlin API で保存されたグラフデータをデータ視覚化ソリューションを使用して視覚化する

※拡張機能自体が使用できなくなった訳ではありません。今後使えなくなる可能性はありますが、2020/10/13 現在、使用することは可能なことを確認しています。

使用するには、Azure サインイン時と同様、[Ctrl] + [Shift] + [P](macOS の場合は [Command] + [Shift] + [P]) でコマンドパレットを表示します。
コマンドパレットから、Graph (Gremlin): Open Graph Explorer を探して選択します。

接続する Azure Cosmos DB for Gremlin API のグラフを選択します。
接続が完了すると、グラフエクスプローラーが起動するはずです。

頂点部分をドラッグすることで、表示されているグラフの視点を変えることができます。

PostgreSQL に接続

PostgreSQL に接続する場合も、Azure Databases 拡張機能を使用することができます。
※ただ残念ながら、現状 PostgreSQL はデータをツリー上で確認するだけしかできず、SQL は実行できません。
※Function や Stored Procedure の作成は可能です。

そこで、クエリ実行を行いたい場合は、PostgreSQL 拡張機能を追加で利用します。

通常の PostgreSQL

DATABASES 欄のAttached Database Accountsより、データベースをアタッチしましょう。

Attach Database Account...を選択すると、データベースの種類を聞かれるので、 PostgreSQL を選択します。

接続先の PostgreSQL のホスト名、データベース名、ユーザー名、パスワードの入力を要求されるので、指定の形式に従って入力します。
この例では、Docker インストールで構築した PostgreSQL に接続しますので、以下を入力します。
先頭のpostgres://文字列は必須です。忘れずにつけてください。

GitHub: ymasaoka/docker-postgres

postgres://postgres:P@ssw0rd@localhost:5432/postgres

※ユーザー名やパスワードが誤っていても、通知等は出ません。接続後に表示されるツリーで確認は可能です。

正常に接続できた場合、以下のようにツリーに表示されます。

クエリ実行を行いたい場合は、PostgreSQL 拡張機能の方でも接続プロファイルを作成します。
[Ctrl] + [Shift] + [P](macOS の場合は [Command] + [Shift] + [P]) でコマンドパレットを表示します。
コマンドパレットから、PostgreSQL: Manage Connection Profiles を探して選択します。