この記事について

この記事では、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

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

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

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

MongoDB に接続

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

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

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

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

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

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

データベースの作成

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

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

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

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

Cosmos DB に接続

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

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

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

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

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

クエリの実行

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

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

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

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

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

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

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

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

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

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

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