Visual Studio Code で Node.js アプリを作成する

5 分

このユニットでは、次の方法を理解します。

Visual Studio Code と Cosmos DB を使用して JavaScript アプリケーションを作成する。
Intellisense を使用して、コードの記述を支援する。
Visual Studio Code 内から Node.js を使用してアプリケーションを実行する。
統合デバッガーを使用してコードをステップ実行し、コードの実行時の変数を調べる。

Node.js 用の JavaScript アプリケーションを作成する

ターミナルウィンドウを使用して、Visual Studio Code 内から Node.js 用の新しい JavaScript アプリケーションを作成できます。 npm init -y コマンドは、アプリケーションフォルダーに package.json という名前の新しいファイルを作成します。このファイルには、Node.js ランタイム用アプリケーションの記述に使用するメタデータが含まれています。

次に、アプリケーションコード用の新しいファイルを作成する必要があります。ファイルを保存するとき、ファイルに .js 拡張子 (JavaScript の場合) が指定されていることを確認してください。これで、JavaScript コードの記述を開始する準備ができました。

IntelliSense を使用してコードの記述を支援する

コードを記述しながら、IntelliSense により型チェックおよびコード補完を実行できます。たとえば、関数を作成する場合、型を定義する場合、またはモジュールを JavaScript ファイルにインポートする場合、追加またはインポートした項目は IntelliSense で使用できるようになります。

入力すると、IntelliSense は型チェックと型の推定を組み合わせて、現在のコンテキストに適した候補を表示します。型の推定により、コードを記述するときに IntelliSense が有効なコード補完候補を表示できるようになります。

Screenshot of the editor Visual Studio Code, showing an Intellisense prompt.

型チェックにより、関数呼び出しで使用できるパラメーターを IntelliSense で表示できるようになり、各関数に対して指定した式の型チェックが行われます。

Screenshot of the editor Visual Studio Code, showing the parameters for a function call.

Visual Studio Code で使用できるその他の IntelliSense の機能は次のとおりです。

到達できないコードと未使用の変数を検出します。実行されないステートメント、および使用されていない変数は、エディターではフェードアウトされて表示されます。
定義と参照をクイック表示します。プレビュー機能を使用すると、オブジェクトまたは関数が別のファイルにある場合でも、その定義をすばやく表示できます。変数または関数を右クリックし、[定義をここに表示] または [参照のプレビュー] を選択します。定義または参照がポップアップウィンドウに表示されます。
変数、関数、または型の定義に移動します。この機能を使用すると、コード内の変数、関数、または型の定義に直接移動できます。これは、項目の定義を変更したり、関数を修正したりする必要がある場合に便利です。変数もしくは型を参照するコード、または関数を呼び出すコードを右クリックします。 [定義に移動] または [型定義へ移動] を選択します。
コードのリファクタリング候補を提案します。項目の下の省略記号 (...) は、IntelliSense に 1 つ以上の候補がある領域を示します。省略記号を選択して、候補を表示します。 [クイック修正] を選択して、提案を適用します。

Node.js アプリケーションの実行とデバッグ

Visual Studio Code から Node.js アプリケーションを実行する最も簡単な方法は、ターミナルウィンドウから node コマンドを使用することです。たとえば、index.js という名前のファイルのコードを実行するには、node index.js を実行します。

ターミナルウィンドウからネイティブ Node.js デバッガーを使用できます (たとえば、node inspect index) が、Visual Studio Code は、Node.js アプリケーションをステップ実行およびデバッグするための拡張環境を提供します。

launch.json ファイルでデバッガーを構成する

Visual Studio Code デバッガーを使用する前に、それを構成する必要があります。デバッガーの構成設定を編集するには、[実行] メニューの [構成の追加] を選択します。 [Select debugger] (デバッガーの選択) オプションで、[Node.js] を選択します。 ./.vscode/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": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/index.js",
        }
    ]
}

この Contoso アプリケーションでは、実行するいくつかのコードファイルがあり、いくつかのプロパティを追加します。 program プロパティファイル名を ${file} に変更します。これにより、現在アクティブな JavaScript ファイルをデバッグできます。パラメーターをアプリケーションに渡す必要がある場合は、args プロパティを追加します。これらの値は、Node.js ランタイムで使用できる process.argv プロパティから使用できます。

{
    // 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": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            // ${file} is replaced with active file's name
            "program": "${workspaceFolder}/${file}",
            // these values are available as process.argv
            "args": ["abc", "1"],
        }
    ]
}

ブレークポイントを設定する

デバッグを開始する前に、アプリケーションコードにブレークポイントを設定する必要があります。これを行うには、実行を一時停止したいステートメントの左側の余白をクリックします。赤い点が表示されます。

デバッグを開始する

デバッグを開始するには、[実行] メニューの [デバッグの開始] を選択するか、デバッガー F5 を起動します。外部ターミナルを使用している場合は、新しいターミナルウィンドウが表示されます。デバッガーの出力は Visual Studio Code の [出力] ウィンドウに表示されます。

デバッガーがアプリケーションのブレークポイントに到達すると、実行が一時停止され、ブレークポイントステートメントが強調表示されます。 [実行とデバッグ] エクスプローラーのウィンドウでは、ローカル変数とグローバル変数の値と呼び出し履歴を調べて設定できます。また、実行の進行状況に応じて評価および表示されるウォッチ式を追加することもできます。

Screenshot of the Visual Studio Code debugger in action pausing at a breakpoint on some sample JavaScript code.

Item	説明
1 - 変数	ローカルスコープとグローバルスコープ内のすべての変数。
2- ウォッチ	実行中にウォッチする変数を追加します。
3- 呼び出し履歴	現在の時点でのアプリケーションの実行履歴。
4- ブレークポイント	アプリケーションで設定されたすべてのブレークポイント。
5- デバッグツールバー	このツールバーには、コードのシングルステップ実行を行うコマンドが含まれています。ステートメントに関数呼び出しが含まれている場合は、その関数に [ステップイン] したり、その関数を [ステップオーバー] したりすることができます。 [ステップアウト] コマンドは、関数が終了するまで実行を続けます。デバッガーが別のブレークポイントに到達するか、アプリケーションが終了するまで、アプリケーションの実行を続行することもできます。
6 - デバッグコンソール	コンソールステートメントの値を確認します。

次のいくつかの演習で JavaScript コードを追加するときに、コードをデバッグして問題を特定することが必要になる場合があります。必要に応じて、このユニットに戻ってください。

続行