Visual Studio Code 上で PostgreSQL と Cosmos DB を操作するための便利な拡張機能

# この記事について

この記事では、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_でした。詳しくは、[こちら][1]の記事をご確認ください。

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

![スクリーンショット 2020-10-06 13.03.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/b181176d-f6d2-855c-bcd2-ae909b6fe6ea.png)

![スクリーンショット 2020-10-13 10.30.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/3f705d87-e7ca-0e9f-1f01-34670a37cbf3.png)


# Cosmos DB に接続

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

![スクリーンショット 2020-10-12 15.31.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/ca8d7026-a1e3-956b-d6cb-41be8ca82203.png)

## Azure にサインイン

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

![スクリーンショット 2020-10-13 1.22.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/24bbe5dc-8b8c-261c-fa0b-1705ba3c9425.png)

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

![スクリーンショット 2020-10-13 1.27.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/802e3f5c-c615-99a9-65ef-24205f16def5.png)

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

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

![スクリーンショット 2020-10-13 1.29.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/ef7356f3-49f0-842e-386a-5b57eb54c68b.png)

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

![スクリーンショット 2020-10-13 1.28.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/458f7c04-b191-0b17-6fbd-12dac8a08160.png)

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

![スクリーンショット 2020-10-13 1.33.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/7672894d-6cc6-1e02-c073-55072a20e086.png)

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

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

![スクリーンショット 2020-10-13 1.38.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/e9b3b310-377d-de01-8e2d-bffc45d4176a.png)

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

### Mongo Scrapbooks

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

![スクリーンショット 2020-10-13 1.55.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/b4f92820-6db9-21ff-480d-1523df0d4d80.png)

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

![スクリーンショット 2020-10-13 2.02.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/544e0538-0f94-5f3a-3b10-0bbe93fb4d0b.png)

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

![スクリーンショット 2020-10-13 2.08.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/6f2e0e1e-bb1e-4882-4add-f739864a3749.png)

![スクリーンショット 2020-10-13 2.08.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/731885ff-675d-874c-8383-367f21105590.png)

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

### Gremlin's query graphs

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

![スクリーンショット 2020-10-13 2.15.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/c32fb423-e0f6-f7fe-90fa-cb97e9870ca8.png)

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

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

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

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

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

![スクリーンショット 2020-10-13 2.22.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/2c33e642-510c-0a56-39cb-f117231e9292.png)

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

![スクリーンショット 2020-10-13 2.27.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/742dd317-1f2e-57e0-a320-f32ef66c7d2b.png)

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


# PostgreSQL に接続

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

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


## 通常の PostgreSQL

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

![スクリーンショット 2020-10-13 3.03.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/c28766c9-7841-d236-2e09-305d57f00bb9.png)

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

![スクリーンショット 2020-10-13 3.16.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/7ac193c7-3c5a-1d33-f334-66086bdeadeb.png)

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

- [GitHub: ymasaoka/docker-postgres][4]

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

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

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

![スクリーンショット 2020-10-13 3.20.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/4a159994-17d2-81da-c8e4-2edc5f03fd23.png)

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

![スクリーンショット 2020-10-13 10.34.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/9201aef5-2d7f-c889-8ffa-49dbb6f05dd6.png)

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

![スクリーンショット 2020-10-13 10.22.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/8ddf375d-7b1e-1466-be43-2de38af9a094.png)

**Create** を選択します。

![スクリーンショット 2020-10-13 10.36.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/b4c9ceb3-42a2-9039-0582-b346e98bdc4e.png)

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

![スクリーンショット 2020-10-13 10.22.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/e58fb385-725c-7316-50a5-4a0020fb0090.png)

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

![スクリーンショット 2020-10-13 10.22.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/4c4ea6eb-da00-2b75-09f0-36d1865c332d.png)

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

![スクリーンショット 2020-10-13 10.22.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/b6d334da-7fc9-4a91-f6aa-08e16f6e0191.png)

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

![スクリーンショット 2020-10-13 10.23.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/78dd2f6b-98a3-39e1-38e7-594669fa5ee1.png)

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

![スクリーンショット 2020-10-13 10.23.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/46773aa2-9c01-9ac5-b669-f5ee6d904505.png)

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

![スクリーンショット 2020-10-13 10.23.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/6f4e538f-237a-713c-ef0f-0b9cefeed267.png)

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

## Azure Database for PostgreSQL

### ファイアウォールの設定

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

![スクリーンショット 2020-10-13 3.52.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/d333a4b0-3829-2227-17f7-e2a93cb9b155.png)

### 接続

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

![スクリーンショット 2020-10-13 3.46.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/b6953c01-e1c9-10b6-9d6d-612e6f21bae4.png)

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

![スクリーンショット 2020-10-13 3.49.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/bef5bded-3c4e-55d7-65d5-b0d417657d60.png)

![スクリーンショット 2020-10-13 3.50.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/d2fe240b-ab6f-44c9-2e9a-d5f06120eb53.png)

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

![スクリーンショット 2020-10-13 3.55.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/5ae354fc-2632-3c01-ed22-6c49aa731c0f.png)

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

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

![スクリーンショット 2020-10-13 10.59.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/ed1b83ad-0e23-999d-a9cc-4e41ac6347f5.png)

## クエリ実行

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

![スクリーンショット 2020-10-13 10.34.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/775c730a-cc23-6a16-18c9-dbed987e605c.png)

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

![スクリーンショット 2020-10-13 11.12.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/c83fbcba-9252-957c-7efd-06003e9b7a42.png)

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

![スクリーンショット 2020-10-13 11.14.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/c17c8a00-a3c6-be27-4215-d229c6f0da37.png)

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

![スクリーンショット 2020-10-13 10.23.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/78dbb0cd-0842-565d-86ec-ec78f2a08436.png)

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

![スクリーンショット 2020-10-13 12.14.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/41b574a0-30bb-0511-11d0-0ed9d57b0019.png)

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

![スクリーンショット 2020-10-13 12.17.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/20082cff-92c8-44f1-88db-9cbfc1bfb05d.png)


---
[1]:https://qiita.com/ymasaoka/items/0b0b726354c3cfd38021#visual-studio-code
[2]:https://www.slideshare.net/Oshitari_kochi/start-cosmos-db-with-vscode-extension
[3]:https://docs.microsoft.com/ja-jp/azure/cosmos-db/graph-visualization
[4]:https://github.com/ymasaoka/docker-postgres