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

# この記事について

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

- MongoDB
- Azure Cosmos DB API for MongoDB

従来の開発では、`Mongo Express`など、コーディングを行う場所とは異なるアプリケーションを並行で起動する事例も多かったと思います。コーディング中にデータベースにアクセスしたくなり別のアプリを起動・切り替えというようなことは正直面倒で無駄の時間につながります。
**Visual Studio Code のみで、コーディングだけでなく、データベースの値も確認できる**ことは、開発中に複数のアプリケーションを起動・行き来しなければならないというような、ちょっとした面倒を軽減させることが可能です。

# Visual Studio Code 拡張機能

今回利用する拡張機能は、こちらです。

- MongoDB for VS Code
    - https://github.com/mongodb-js/vscode

![スクリーンショット 2020-10-20 21.40.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/1c3f3473-0df7-e918-427d-8175319ee0df.png)

また、Azure Cosmos DB API for MongoDB への接続については、以下の記事で解説している拡張機能を使用することも可能です。
どちらか好きな方を利用してください。

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

ちなみに、上記で解説している拡張機能ではなく、`こちらの拡張機能を使うメリット`としては、MongoDB と Azure Cosmos DB API for MongoDB の環境を、並べて 1 箇所に表示できるところだと思います。(個人的感想)

![スクリーンショット 2020-10-20 22.46.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/e26af5fe-c3e5-62fa-4f29-ca62c3a25c0c.png)


# MongoDB に接続

拡張機能をインストールすると、`MongoDB`タブが表示されるようになります。

![スクリーンショット 2020-10-20 21.47.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/9689a7f3-b75e-34ea-50ae-d5835d8202eb.png)

CONNECTIONS 欄にある **Add Connection** を選択して、MongoDB の接続プロファイルを作成します。

![スクリーンショット 2020-10-20 21.49.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/ea04c2b0-046b-b56d-0aa6-ca98693e966a.png)

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

![スクリーンショット 2020-10-20 22.03.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/7aa65d73-c8c5-324f-9593-ff782d826b83.png)


新規タブ画面にて、接続情報を入力する画面が表示されるので、接続情報を入力します。
入力が完了したら、**Connect** を選択します。

![スクリーンショット 2020-10-20 21.54.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/87a1a3d5-a7f5-6821-a2b9-0ef17a25f71a.png)

接続に成功したら、以下のような、接続に成功した旨のメッセージが表示されます。

![スクリーンショット 2020-10-20 21.56.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/b258721f-e305-7c4b-fe84-76fba5d58f3b.png)

接続が成功したら、タブは閉じて OK です。
CONNECTIONS 欄に、作成した接続プロファイルが表示され、DB に接続中 (Connected) となっていることを確認してください。

![スクリーンショット 2020-10-20 21.57.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/ff1e7a57-8e43-a8bc-88d7-22a2f314aabc.png)


# データベースの作成

CONNECTIONS 欄にある **+** ボタン、あるいは右クリックメニューにある **Add Database...** を選択します。

![スクリーンショット 2020-10-20 22.05.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/adbb1079-c95d-ed8f-62a0-ca14a3836790.png)

![スクリーンショット 2020-10-20 22.05.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/bd2f3fd6-0621-3caa-79e6-20500fb34753.png)

新しく作成するデータベース名を入力します。

![スクリーンショット 2020-10-20 22.09.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/a90b7375-d015-16a4-9b80-449a2fb9b21c.png)

作成するコレクション名を入力します。

![スクリーンショット 2020-10-20 22.10.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/5a1969ac-2839-159c-abcc-f104eb7d1c12.png)

作成が完了すると、データベースとコレクションが新規作成されたことをツリーで確認できます。

![スクリーンショット 2020-10-20 22.11.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/6254107f-9201-63c3-f579-9ba51b44b9bd.png)


# Cosmos DB に接続

Azure ポータルなどで、Cosmos DB への接続文字列を取得しておきましょう。

![スクリーンショット 2020-10-20 22.50.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/973382f4-4f3f-bb59-3d4b-a2a8c9a50ffa.png)

CONNECTIONS 欄にて、**Add MongoDB Connection with Connection String...** を選択します。

![スクリーンショット 2020-10-20 22.53.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/2dd59e21-1519-d591-9b13-89bd2cd8b727.png)

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

![スクリーンショット 2020-10-20 22.55.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/dcee4314-7ea5-8475-6aa4-b8cd01d740ae.png)

先ほど取得した、Azure Cosmos DB API for MongoDB の接続文字列を入力します。

![スクリーンショット 2020-10-20 23.00.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/69a683e1-9607-ef05-d06a-6caaecc65b4c.png)

接続プロファイルの作成に成功したら、ツリーに Azure Cosmos DB API for MongoDB の項目が追加されるはずです。

![スクリーンショット 2020-10-20 22.46.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/e26af5fe-c3e5-62fa-4f29-ca62c3a25c0c.png)


# クエリの実行

データの読み取りや書き込みには、**MongoDB Playground** を使用します。
まだ 1 つも .mongodb ファイルが存在していない場合は、以下のような画面が表示されます。
**Create New Playground** を選択して、MongoDB Playground を開きます。

![スクリーンショット 2020-10-20 22.16.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/4d2f736b-6ab3-ed3f-499e-07a4191a885e.png)

すでに、.mongodb ファイルが存在している場合は、以下のようにファイルが表示されます。

![スクリーンショット 2020-10-20 22.19.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/a35dc1ae-e7cd-9ced-420f-7b8a18b3374b.png)

使用する .mongodb ファイルを選択します。
もし、新しい MongoDB Playground　のファイルを作成する場合は、PLAYGROUNDS 欄の右横にある **...** を選択し、**Create MongoDB Playground** を選択します。

![スクリーンショット 2020-10-20 22.19.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/2fb3c78e-f208-8c45-7544-11819728b8ca.png)

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

![スクリーンショット 2020-10-20 22.47.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/427418e8-e12d-5818-e947-4de3714518b7.png)

MongoDB Playground のタブが表示されたら、あとは MongoDB のクエリを書いて実行するだけです。

![スクリーンショット 2020-10-20 22.24.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/48b4de91-5d02-c562-4507-0d66dc192568.png)

ファイルの先頭にある、以下の部分を選択すると、接続する MongoDB を選択・変更することができます。

![スクリーンショット 2020-10-20 22.25.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/93940a70-a79f-183d-2705-e4631b15d248.png)

クエリの実行は、実行したいクエリ群を選択状態にします。
そうすると、選択したクエリ郡の上部に **▶︎ Run Selected Lines From Playground** が表示されるようになるので、これを選択します。

![スクリーンショット 2020-10-20 22.25.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/a86d8682-76fa-e24a-d0aa-8a9d73616dbb.png)

クエリ実行前の確認ダイアログが表示されるので、**Yes** を選択します。
この表示は、拡張機能の設定で非表示にすることも可能です。

![スクリーンショット 2020-10-20 22.28.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/208d9684-f87b-b83b-6437-8cc39063a315.png)

クエリ実行した結果は、**出力** タブの **Playground output** に表示されます。
こちらには、実行したクエリの最後の実行結果が表示される使用になっています。※ 2020/10/21 時点

![スクリーンショット 2020-10-20 22.34.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348116/de1ff85a-7825-950d-ec6e-20d75080999c.png)

ただし、こちらはまだ拡張機能が`プレビュー版`ということもあり、結果表示にはいろいろと課題があるようなので、今後の開発に期待したいところです。

- [how to run only single command in play ground #109][2] - GitHub Issues

---
[1]:https://qiita.com/ymasaoka/items/48d4a9be65856c41dafd
[2]:https://github.com/mongodb-js/vscode/issues/109