この記事について

この記事では、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 を探して選択します。

初回起動時、拡張機能の実行に必要な機能のインストールが行われます。

Create を選択します。

接続する PostgreSQL 環境があるホスト名、およびインスタンス名を入力します。ポート番号の入力は不要です。

ログインするデータベース名を入力します。

ログインに使用するユーザー名を入力します。

ログインに使用するユーザーのパスワードを入力します。

PostgreSQL への接続するためのポート番号を入力します。

作成するプロファイルの名前を入力します。

これで接続プロファイルの作成は完了です。

Azure Database for PostgreSQL

ファイアウォールの設定

接続する前に、ファイアウォールの設定を確認しましょう。
クライアント端末からの接続を許可できるよう、ファイアウォールの設定をしておきます。

接続

Cosmos DB の時と同様、Azure サブスクリプション下にデータベースが表示されます。

接続時にはユーザー名、パスワードの入力が求められるので、Azure Database for PostgreSQL を作成した際に指定したユーザー名など、接続に使用するユーザー名を入力します。

認証が成功すれば、以下のように表示されるようになります。

通常の PostgreSQL の時と同様、クエリ実行を行いたい場合は、PostgreSQL 拡張機能側の接続プロファイルも作成します。
プロファイル作成時の注意点は、以下の通りです。

• ホスト名: Azure Database for PostgreSQL のサーバー名を入力します
• ユーザー名: DB のユーザー名の後ろに @<サーバー名> がついている値を入力します。

クエリ実行

[Ctrl] + [Shift] + [P](macOS の場合は [Command] + [Shift] + [P]) でコマンドパレットを表示します。
コマンドパレットから、PostgreSQL: New Query を探して選択します。

作成済みの接続プロファイルが表示されるので、接続する PostgreSQL を選択します。

プロファイル内で指定している接続ユーザーのパスワードを入力します。

接続に成功したら、Visual Studio Code の画面右下部に、接続した PostgreSQL および 接続ユーザーが表示されます。

開いているタブ画面にて、クエリを入力します。
作成したクエリは、右クリックメニューのExecute Query [Ctrl+M, Ctrl+R](macOS の場合は [⌘M, ⌘R]) で実行します。

クエリの実行結果は、別タブで表示されます。