チュートリアル: Visual Studio で Node.js および Express アプリを作成する

[アーティクル]
01/31/2025

この記事では、Visual Studio を使用して、Express フレームワークを使用する基本的な Node.js Web アプリを構築する方法について説明します。

Node.js は、JavaScript コードを実行するサーバー側の JavaScript ランタイム環境です。既定では、Node.js は npm パッケージマネージャーを使用して、ソースコードライブラリ Node.js 簡単に使用および共有できるようにします。 npm パッケージマネージャーを使用すると、ライブラリのインストール、更新、アンインストールが簡略化されます。

Express は、Web アプリの構築に使用 Node.js サーバー Web アプリケーションフレームワークです。 Express では、ユーザーインターフェイスを作成するさまざまな方法があります。このチュートリアルで提供される実装では、Express アプリケーションジェネレーターの既定のテンプレートエンジンである Pug を使用してフロントエンドをレンダリングします。

このチュートリアルでは、次の操作を行います。

JavaScript テンプレートを使用して Node.js アプリを作成する
アプリをビルドし、実行中のプロセスを確認する
Visual Studio デバッガーでアプリをデバッグする

前提条件

Visual Studio 2022 バージョン 17.12 以降、ASP.NET および Web 開発 ワークロードがインストールされています。
- Visual Studio を無料でインストールするには、Visual Studio のダウンロードページに移動します。
- Visual Studio が既にある場合は、対話型開発環境 (IDE) 内からワークロードをインストールできます。
  1. [ツール]>[ツールと機能を取得] を選択します。
  2. Visual Studio インストーラーで、ワークロード タブを選択します。
  3. [ASP.NET と Web 開発] ワークロードを選んでから、[変更] を選びます。
  4. プロンプトに従ってインストールを完了します。
npm パッケージマネージャーと npx パッケージを使用して Node.js します。

node -v コマンドを使用して、Node.js のインストールを確認できます。コマンド出力には、v23.4.0など、インストールされているバージョンの Node.jsが表示されます。詳細については、「Node.js および npm のダウンロードとインストール」を参照してください。
- npm パッケージマネージャーは、Node.js インストールに含まれています。 npm -v コマンドを使用してインストールを確認します。コマンド出力には、10.9.2など、インストールされているバージョンのパッケージマネージャーが表示されます。
- npx パッケージは npm CLI の一部です。 npx -v コマンドを使用してパッケージのインストールを確認します。コマンド出力には、10.9.2など、インストールされているパッケージのバージョンが表示されます。

アプリを作成する

Visual Studio で新しい Node.js アプリを作成するには、次の手順に従います。

Visual Studio [スタート] ウィンドウ ([ファイル]>[スタートウィンドウ]) で、[新しいプロジェクト作成] を選択します。
[検索] ボックスに「Express」と入力し、結果一覧から [JavaScript Express Application] テンプレートを選択します。
[次を選択して、構成ページに進みます。
新しいアプリの [プロジェクト名] と [ソリューション名] を入力します。既定の Location を選択するか、環境内の別のパスを参照します。
[ 作成] を選択して、新しい Node.js プロジェクトを作成します。

Visual Studio によって新しいプロジェクトが作成され、ソリューションエクスプローラー でプロジェクト階層開きます。

プロジェクトのプロパティを表示する

既定のプロジェクト設定では、プロジェクトをビルドしてデバッグできます。必要に応じて設定を変更できます。

ソリューションエクスプローラーで、プロジェクトを右クリックし、[プロパティ] 選択します。これらのプロパティには、[プロジェクト] >[ExpressProject プロパティ]選択してアクセスすることもできます。
[プロジェクトのプロパティ] ウィンドウで、[ビルド] セクションに移動し、必要に応じてプロパティを構成します。
デバッグ設定を構成するには、[デバッグ]>[ExpressProject デバッグプロパティ]を選択します。

手記

launch.json ファイルには、デバッグツールバーの Start アクションに関連付けられているスタートアップ設定が格納されます。現在、launch.json は .vscode フォルダーに配置する必要があります。

プロジェクトをビルドする

[ビルド]>[ソリューションのビルド] を選んで、プロジェクトをビルドします。

アプリを起動する

ツールバー Ctrl キー + F5 または [デバッグなしで開始] (緑色の矢印のアウトラインアイコン) を選択して、新しいアプリを開始します。

ターミナルが開き、実行中のコマンドが表示されます。

> expressproject@0.0.0 start
> node ./bin/www

GET / 200 29342.066 ms - 170
GET /stylesheets/style.css 200 18.967 ms - 111

手記

ターミナル出力でメッセージを確認します。また、Visual Studio の 出力ウィンドウ を確認します。 Node.jsのバージョンを更新する手順を確認します。

アプリが正常に起動すると、ブラウザーウィンドウが開き、Express アプリが表示されます。

ブラウザーで実行中の Express アプリを示すスクリーンショット。

アプリをデバッグする

これで、アプリをデバッグする方法を調べる準備ができました。

アプリがまだ実行されている場合は、Shift + F5 を選択して現在のセッションを終了するか、[デバッグ] ツールバーの [ の停止 (赤い四角形のアイコン) をします。セッションを終了すると、アプリを表示するブラウザーが閉じられますが、Node プロセスを実行しているターミナルウィンドウは開いたままです。ここでは、残っているウィンドウを閉じます。この記事の後半では、Node プロセスを実行したままにする場合のシナリオを確認します。

ノードプロセスをデバッグする

開始アクションの左側にあるドロップダウンリストには、アプリで使用可能な開始オプションが表示されます。

localhost (Edge)
localhost (Chrome)
ExpressProject を起動する
ノードとブラウザーの起動

アプリの Node プロセスをデバッグするには、次の手順に従います。

[スタート] ドロップダウンリストで、[ノードとブラウザーの起動] を選択します。
ソリューションエクスプローラーで、ルート フォルダーを展開し、index.js ファイルを開きます。
コードエディターで、index.js ファイルにブレークポイントを設定します。
1. res.render('index', { title: 'Express' });コードステートメントを見つけてください。
2. ステートメントの行で左側の余白を選びます。 Visual Studio では、ブレークポイントの設定を示す赤い円が余白に追加されます。
ヒント

コード行にカーソルを置き、F9 を選択して、その行のブレークポイントを切り替えることもできます。
デバッグツールバーで F5 を選択するか、[デバッグの開始] (緑色の矢印アイコン) を選択して、デバッガーでアプリを起動します。

Visual Studio によってアプリの実行が開始されます。デバッガーが設定されたブレークポイントに達すると、デバッグプロセスが一時停止します。
実行が一時停止されている間は、アプリの状態を調べることができます。変数の上にマウスポインターを置き、そのプロパティを調べます。
続行する準備ができたら、F5 選択します。処理が続行され、ブラウザーでアプリが開きます。

今回は、停止選択した場合は、ブラウザーとターミナルウィンドウの両方が閉じることがわかります。動作が異なる理由を理解するには、launch.json ファイルを詳しく見てください。

launch.json ファイルを調べる

プロジェクトの launch.json ファイルを調べるには、次の手順に従います。

ソリューションエクスプローラーで、.vscode フォルダーを展開し、launch.json ファイルを開きます。

ヒント

ソリューションエクスプローラーの に .vscode フォルダー表示されない場合は、ソリューションエクスプローラー ツールバーの [すべてのファイル を表示する] アクション 選択します。
コードエディターでファイルを見てみましょう。 Visual Studio Code の使用経験がある場合は、launch.json ファイルは使い慣れていると思われます。このプロジェクトの launch.json ファイルは、デバッグに使用される起動構成を示すために Visual Studio Code で使用されるファイルに対応します。各エントリは、デバッグする 1 つ以上のターゲットを指定します。
ファイル内の最初の 2 つのエントリを調べます。これらのエントリは、さまざまなインターネットブラウザーの動作を定義します。
```
    {
      "name": "localhost (Edge)",
      "type": "edge",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}\\public"
    },
    {
      "name": "localhost (Chrome)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}\\public"
    }
```
サポートされているブラウザーは、type プロパティで示されます。ブラウザーの種類のみを唯一のデバッグターゲットとしてアプリを起動すると、Visual Studio はフロントエンドブラウザープロセスのみをデバッグします。ノードプロセスは、デバッガーがアタッチされずに開始されます。 Visual Studio では、Node プロセスで設定されたブレークポイント バインドされません。

手記

現在、デバッグでサポートされているブラウザーの種類は、edge と chrome だけです。

セッションを終了すると、Node プロセスは設計上引き続き実行されます。ブラウザーがデバッグターゲットの場合、プロセスは意図的に実行したままです。フロントエンドでのみ作業が行われている場合、バックエンドプロセスを継続的に実行すると、開発ワークフローが容易になります。

このセクションの開始時に、残りのターミナルウィンドウを閉じて、Node プロセスにブレークポイントを設定できます。 Visual Studio で Node プロセスをデバッグできるようにするには、デバッガーをアタッチしてプロセスを再起動する必要があります。デバッグ不可能なノードプロセスが実行したままの場合、デバッグモードで Node プロセスを起動しようとすると (ポートを再構成せずに)、失敗します。
launch.json ファイルの 3 番目のエントリを確認します。このエントリは、デバッグの種類として node を指定します。
```
    {
      "name": "Launch ExpressProject",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}/bin",
      "program": "${workspaceFolder}/bin/www",
      "stopOnEntry": true
    }
```
3 番目のエントリは、デバッグモードで Node プロセスのみを起動します。 Visual Studio はブラウザーを起動しません。
複合起動構成を定義する、launch.json ファイルの 4 番目のエントリを調べます。
```
    {
      "name": "Launch Node and Browser",
      "configurations": [
        "Launch ExpressProject",                   
        "localhost (Edge)"
      ]
    }
```
この複合構成は、Visual Studio Code 複合起動構成と同じです。この構成を選択すると、フロントエンドとバックエンドの両方をデバッグできます。この定義は、Node プロセスとブラウザープロセスの個々の起動構成を参照しているだけであることに注意してください。

起動構成では、他にも多くの属性を使用できます。たとえば、構成を非表示にして Start ドロップダウンリストから削除できますが、presentation オブジェクトの hidden 属性を trueに設定することで、構成への参照を許可できます。
```
    {
      "name": "localhost (Chrome)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}\\public",
      "presentation": {
        "hidden": true
      }
    }
```
サポートされている属性を使用してオプションを構成し、デバッグエクスペリエンスを強化します。現在、起動構成のみがサポートされています。 アタッチ 構成を使用しようとすると、デプロイエラーが発生します。詳細については、「オプションの」を参照してください。

Visual Studio で JavaScript または TypeScript アプリをデバッグ
Visual Studio で Node.js プロジェクトを移行する
Visual Studio で npm パッケージを管理する

次の方法で共有

チュートリアル: Visual Studio で Node.js および Express アプリを作成する

前提条件

アプリを作成する

プロジェクトのプロパティを表示する

プロジェクトをビルドする

アプリを起動する

アプリをデバッグする

ノードプロセスをデバッグする

launch.json ファイルを調べる

フィードバック

その他のリソース

次の方法で共有

チュートリアル: Visual Studio で Node.js および Express アプリを作成する

前提 条件

アプリを作成する

プロジェクトのプロパティを表示する

プロジェクトをビルドする

アプリを起動する

アプリをデバッグする

ノード プロセスをデバッグする

launch.json ファイルを調べる

関連リンク

フィードバック

その他のリソース

前提条件

ノードプロセスをデバッグする