9
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-10-20

この記事について

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

  • MongoDB
  • Azure Cosmos DB API for MongoDB

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

Visual Studio Code 拡張機能

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

スクリーンショット 2020-10-20 21.40.51.png

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

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

スクリーンショット 2020-10-20 22.46.38.png

MongoDB に接続

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

スクリーンショット 2020-10-20 21.47.24.png

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

スクリーンショット 2020-10-20 21.49.14.png

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

スクリーンショット 2020-10-20 22.03.22.png

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

スクリーンショット 2020-10-20 21.54.47.png

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

スクリーンショット 2020-10-20 21.56.59.png

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

スクリーンショット 2020-10-20 21.57.34.png

データベースの作成

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

スクリーンショット 2020-10-20 22.05.24.png

スクリーンショット 2020-10-20 22.05.37.png

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

スクリーンショット 2020-10-20 22.09.25.png

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

スクリーンショット 2020-10-20 22.10.23.png

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

スクリーンショット 2020-10-20 22.11.57.png

Cosmos DB に接続

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

スクリーンショット 2020-10-20 22.50.02.png

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

スクリーンショット 2020-10-20 22.53.43.png

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

スクリーンショット 2020-10-20 22.55.16.png

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

スクリーンショット 2020-10-20 23.00.22.png

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

スクリーンショット 2020-10-20 22.46.38.png

クエリの実行

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

スクリーンショット 2020-10-20 22.16.11.png

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

スクリーンショット 2020-10-20 22.19.19.png

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

スクリーンショット 2020-10-20 22.19.36.png

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

スクリーンショット 2020-10-20 22.47.21.png

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

スクリーンショット 2020-10-20 22.24.01.png

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

スクリーンショット 2020-10-20 22.25.53.png

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

スクリーンショット 2020-10-20 22.25.32.png

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

スクリーンショット 2020-10-20 22.28.45.png

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

スクリーンショット 2020-10-20 22.34.59.png

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


9
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?