Visual Studio Code を使用して Node.js の開発とデバッグを行う方法

Visual Studio を使用して JavaScript Node.js プロジェクトを開発し、デバッグする手順について説明します。

環境を準備する

1. Visual Studio Code をインストールします。

2. Git をインストールします。 Visual Studio Code は Git と統合されており、"ソース管理" の管理をサイド バーで行えます。

3. 必要な環境変数を追加します。 この記事の例では、mongoDB データベース接続文字列を使用します。

   使用できる MongoDB データベースがない場合は、以下を行うことができます。

   • コンテナーのいずれかが MongoDB データベースであるマルチコンテナー構成内でこのローカル プロジェクトを実行することを選択します。 Docker と Remote - Containers 拡張機能をインストールして、ローカル MongoDB データベースを実行しているコンテナーのいずれかを使用してマルチコンテナー構成を取得します。
   • MongoDB データベース用の Azure Cosmos DB リソースを作成することを選択します。 詳細については、こちらのチュートリアルを参照してください。

プロジェクトを複製する

最初に、次の手順でサンプル プロジェクトを複製します。

1. Visual Studio Code を開きます。

2. F1 キーを押してコマンド パレットを表示します。

3. コマンド パレットのプロンプトに「gitcl」と入力し、Git: Clone コマンドを選択して、Enter キーを押します。

   

4. リポジトリの URL の入力を求められたら、「https://github.com/Azure-Samples/js-e2e-express-mongodb」と入力し、Enter キーを押します。

5. プロジェクトの複製先となるローカル ディレクトリを選択 (または作成) します。

   

依存関係のインストール

この Node.js プロジェクトでは、最初に npm からプロジェクトのすべての依存関係を確実にインストールしておく必要があります。

1. Ctrl + Shift + ` キーを押して Visual Studio Code の統合ターミナルを表示します。

2. 次のコマンドを使用して、依存関係をインストールします。

   npm install
   

プロジェクト ファイルおよびコードを移動する

コードベースの操作に慣れるために、Visual Studio Code に備わっているナビゲーション機能の例をいくつか紹介します。

1. Ctrl + P キーを押します。

2. 「.js」と入力すると、プロジェクトに含まれているすべての JavaScript/JSON ファイルが、各ファイルの親ディレクトリと共に表示されます。

3. server.js (アプリのスタートアップ スクリプト) を選択します。

4. 11 行目のタイムスタンプにマウス ポインターを合わせます。 ファイル内の変数、モジュール、型をすぐに調べることができるので、プロジェクトの開発時に役立ちます。

   

5. 変数 (timestamp など) をマウスでクリックすると、同じファイル内でその変数が使われている箇所をすべて確認できます。 プロジェクト内である変数が使われている箇所をすべて表示するには、その変数を右クリックし、コンテキスト メニューから、 [すべての参照の検索] を選択します。

   

MongoDB で Visual Studio Code オート コンプリートを使用する

1. data.js ファイルを開く

2. 84 行目で、「db.」と入力して新たに使用する db 変数を入力します。 Visual Studio Code には、db で使用可能な API の使用可能なメンバーが表示されます。

オートコンプリートは、Visual Studio Code がバックグラウンドで TypeScript (JavaScript にも対応) を使用し、型情報を提供することによって実現されています。その型情報が、ユーザーが何か入力したときに、入力候補一覧に伝えられます。 型指定の自動取得は、React、Underscore、Express など、2,000 個を超えるサードパーティ モジュールで機能します。

このオートコンプリート機能がどのモジュールでサポートされているかについては、DefinitelyTyped プロジェクトを参照すると確認できます。このプロジェクトは、TypeScript のすべての型定義のソースとなるもので、コミュニティが中心となって作成しています。

ローカル Node.js アプリの実行

コードを確認したら、実際にアプリを実行してみましょう。 Visual Studio Code でアプリを実行するには、F5 キーを押します。 F5 (デバッグ モード) でコードを実行すると、Visual Studio Code によってアプリが起動され、 [デバッグ コンソール] ウィンドウが表示されて、アプリの StdOut が表示されます。

また、デバッグ コンソールは最近実行したアプリにアタッチされるので、JavaScript の式を入力すれば、そのアプリ内で評価されます。オートコンプリートも機能します。 この動作を確認するには、コンソールに「process.env」と入力します。

ブラウザーを開いて http://localhost:8080 に移動し、実行中のアプリを表示します。 テキスト ボックスにテキストを入力して項目を追加し、アプリの動作方法を確認します。

ローカル Node.js アプリのデバッグ

統合コンソールを使用してアプリを実行して操作できることに加え、コード内に直接ブレークポイントを設定できます。 たとえば、Ctrl + P キーを押して、ファイル ピッカーを表示します。 ファイル ピッカーが表示されたら、server.js ファイルを選択します。

新しい項目を追加するためのルート内の if ステートメントである 53 行目にブレークポイントを設定します。 ブレークポイントは、次の図のようにエディター内で行番号の左側の領域をクリックするだけで設定できます。

注意

Visual Studio Code では標準的なブレークポイントに加え、条件付きブレークポイントもサポートされており、アプリの実行を一時停止するタイミングをカスタマイズすることができます。 条件付きブレークポイントを設定するには、実行を一時停止する行の左側の領域を右クリックし、 [条件付きブレークポイントの追加] を選択します。次に、JavaScript の式 (例: foo = "bar") または実行回数を指定して、実行を一時停止する条件を定義します。

ブレークポイントを設定したら、ブラウザーで実行中のアプリに戻って、エントリを追加します。 このアクションにより、アプリは即座にブレークポイントを設定した 28 行目で実行を一時停止します。

アプリケーションが一時停止された後、コードの式にマウス カーソルを合わせると、現在の値を表示することができます。さらに、ローカル変数/ウォッチ式や呼び出し履歴を調べたり、デバッグ ツール バーを使ってコードをステップ実行することもできます。 F5 キーを押すと、アプリの実行が再開されます。

Visual Studio Code でのローカルのフルスタック デバッグ

フロントエンドとバックエンドの両方が JavaScript を使用して記述されます。 そのため現在はバックエンド (Node/Express) コードをデバッグしていますが、いずれフロントエンド (Angular) コードのデバッグが必要になることが考えられます。

Node.js コードの実行とデバッグを行ううえで Visual Studio Code に特別な構成は必要ありませんでしたが、フロントエンド Web アプリをデバッグするためには、アプリの実行方法を Visual Studio Code に伝える launch.json ファイルを使用する必要があります。

このサンプル アプリには、次のデバッグ設定を含む launch.json が含まれています。

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
    
        {
            "name": "Test",
            "request": "launch",
            "runtimeArgs": [
                "run-script",
                "test"
            ],
            "runtimeExecutable": "npm",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "type": "pwa-node"
        },
        {
            "name": "Start",
            "request": "launch",
            "runtimeArgs": [
                "run-script",
                "start"
            ],
            "runtimeExecutable": "npm",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "type": "pwa-node"
        }

    ]
}

このアプリのスタートアップ スクリプトが server.js であることが Visual Studio Code で検出できました。

launch.json ファイルを開いた状態で、 [構成の追加] (右下) を選択し、Chrome:Launch with userDataDir を選択します。

Chrome 用に新しい実行構成を追加することで、フロントエンド JavaScript コードをデバッグできるようになります。

指定されているいずれかの設定にマウス カーソルを合わせると、その設定の内容についてのドキュメントが表示されます。 さらに、アプリの URL が Visual Studio Code によって自動的に検出されることがわかります。 アプリのフロントエンド アセットの検索対象となる場所を Chrome デバッガーが認識できるように、webRoot プロパティを ${workspaceRoot}/public に更新します。

{
   "type": "chrome",
   "request": "launch",
   "name": "Launch Chrome",
   "url": "http://localhost:8080",
   "webRoot": "${workspaceRoot}/public",
   "userDataDir": "${workspaceRoot}/.vscode/chrome"
}

フロントエンドとバックエンドの両方を同時に起動してデバッグするには、"複合" 実行構成を作成する必要があります。これにより、並列実行する構成のセットが Visual Studio Code に伝えられます。

次のスニペットを launch.json ファイル内の最上位のプロパティとして (既存の configurations プロパティの兄弟として) 追加します。

"compounds": [
   {
      "name": "Full-Stack",
      "configurations": ["Launch Program", "Launch Chrome"]
   }
]

compounds.configurations 配列に指定した文字列値は、configurations のリストに含まれる各エントリの name を表します。 これらの名前を変更した場合は、配列に適宜変更を加える必要があります。 たとえば、[デバッグ] タブに切り替えて、選択構成を [Full-Stack] (複合構成の名前) に変更し、F5 キーを押して実行します。

この構成を実行すると、デバッグ コンソール出力に見られるような Node.js アプリと、http://localhost:8080 の Node.js アプリに移動するように構成された Chrome が起動します。

Ctrl+P キーを押して、todos.js と入力 (または選択) します。これが、アプリのフロントエンドのメイン Angular コントローラーになります。

11 行目 (作成中の新しい To Do エントリのエントリ ポイント) にブレークポイントを設定します。

実行中のアプリに戻って新しい To Do エントリを追加すると、Visual Studio Code が今度は Angular コード内で実行を一時停止させていることがわかります。

Node.js のデバッグと同様、式にマウス カーソルを置くことでローカル変数/ウォッチ式を確認したり、コンソール内で式を評価したりすることができます。

ここで注目すべき便利な機能を 2 つ紹介します。

• [呼び出し履歴] ウィンドウには、2 つの異なるスタックが表示されます: Node と Chrome。これにより、現在どちらが一時停止されているのかがわかります。

• フロントエンドとバックエンドのコードの間でステップ実行することができます。F5 キーを押すと、Express ルートに先ほど設定したブレークポイントに到達します。

この設定によって、フロントエンド、バックエンド、またはフルスタックの JavaScript コードを Visual Studio Code 内から直接効率的にデバッグすることができます。

また、複合デバッガーの概念は、2 つのターゲット プロセスに限定されたものではなく、また JavaScript に限定されたものでもありません。 したがってマイクロサービス アプリ (多言語も含む) の開発を行う場合も、(言語/フレームワークの適切な拡張機能をインストールしたうえで) まったく同じワークフローを利用することができます。

次のステップ

• コンテナーをデプロイする