ASP.NET Core + Node.js

はじめに

Visual Studio 2022 から node.js を使用した JavaScript/TypeScript プロジェクトを作成できるようになっています。

Visual Studio の JavaScript と TypeScript
Visual Studio 2022 以降では、JavaScript プロジェクト システム (JSPS) と呼ばれる新しい JavaScript/TypeScript プロジェクトの種類 (.esproj) があり、Visual Studio でスタンドアロンの Angular、React、および Vue プロジェクトを作成できます。

シンプルな JavaScript / TypeScript アプリケーションであれば Visual Studio Code を使用する方法もありますが、「フロントエンドは React / Vue.js、バックエンドは ASP.NET Core」のようなケースでは Visual Studio でまとめて管理できるのが魅力になります。Visual Studio のテキストエディタも JavaScript/TypeScript に対応しており（.tsx にも対応）、IntelliSense もしっかり効きます。

また、「フロントエンド + バックエンド ASP.NET Core」という場合だけでなく、ASP.NET Core アプリで TypeScript を最小限で導入 ¹ したり、Tailwind CSS のビルドを行う ² などの用途で Node.js のビルドツールを使用することもできます。ここでは、ASP.NET Core プロジェクトで Node.js を使用する最小限の手順をご紹介します。

ASP.NET Core プロジェクトで npm

npm は Node.js 用のパッケージ（ライブラリ）管理ツールです。 NuGet の Node.js 版と考えてください。

ASP.NET Core プロジェクトでも npm コマンドは問題なく使用できます。
前提として Node.js のインストールが必須となります。

Node.js のインストール

1. Node.jsの公式サイト から Node.js のインストーラーをダウンロード
2. インストーラーを実行してインストール（すべてデフォルトでOK）
3. 次のコマンドを実行してインストールが成功したことを確認

node -v
npm -v

バージョン番号が表示されれば OK です。³

npm の実行

Visual Studio のターミナル（PowerShell/コマンドプロンプト）で npm を実行します。
一つ注意点として、Visual Studio でターミナルを開いた時のカレントディレクトリはソリューションフォルダになっているので、npm を実行する前にあらかじめプロジェクトフォルダに移動しておく必要があります。

WebApplication1 <-（ソリューションフォルダ）
└─WebApplication1 <-（プロジェクトフォルダ）
   ├─wwwroot
   ├─Pages
   ├─appsettings.json
   └─Program.cs

デフォルト設定のまま Web アプリを作成すると WebApplication1 フォルダの下に WebApplication1 フォルダという構成になります。
ですので、カレントディレクトリを変更してからコマンドを実行するか、プロジェクトのコンテキストメニュー > ターミナルで開く でターミナルを開いてからコマンドを実行します。 以下は、TypeScript の開発用パッケージをインストールする例です。

npm install typescript --save-dev

npm コマンド実行すると、カレントディレクトリに package.json ファイルが作成されます。

WebApplication1
└─WebApplication1
   ├─wwwroot
   ├─Pages
   ├─appsettings.json
   ├─package.json
   └─Program.cs

package.json

上の手順で作成された package.json の内容は以下のようになっています。

{
  "devDependencies": {
    "typescript": "^5.9.3"
  }
}

package.json は Node.js プロジェクトの設定ファイルです。
プロジェクトで使用するパッケージ（ライブラリ）やスクリプトなどの情報をこのファイルで管理します。 先ほど typescript をインストールしたので、typescript の行が devDependencies セクションに追加されています。 このように npm コマンドでパッケージをインストールすると package.json に自動的にエントリが追加されますし、エディタで npm スクリプトを手動で追加することもあります。

node_modules ディレクトリ

WebApplication1
└─WebApplication1
   ├─wwwroot
   ├─node_modules
   |  └─typescript
   ├─Pages
   ├─appsettings.json
   ├─package.json
   |  └─package-lock.json
   └─Program.cs

npm コマンドでパッケージをインストールした時、プロジェクトフォルダ内の node_modules フォルダにパッケージの実体がインストールされます。Visual Studio では node_modules フォルダは非表示になっています。node_modules フォルダはソース管理（Gitなど）に含める必要はありません。package.json（と package-lock.json）から node_modules は復元できます。このあたりは NuGet のパッケージと同じような考え方ですね。また、node_modules フォルダは非常に大きなサイズになることもありますので、その点からもソース管理の対象には向いていません。

パッケージの復元

先ほど「package.json（と package-lock.json）から node_modules は復元できる」と書きました。
復元するコマンドは以下になります。

npm install

リポジトリからソースをクローンして、最初に必要なパッケージをインストールする場合にこのコマンドを実行します。 また「パッケージが壊れたかもしれないから、クリーンインストールしたい」という場合には node_modules フォルダを削除して、npm install すれば全てのパッケージが再インストールされます。

まとめ

Node.js（npm）の構成ファイルは

• package.json
• package-lock.json
• node_modules フォルダ

この３つになります。
パッケージによっては追加の設定ファイルがあるケースもありますが、基本的には npm で追加・修正されるものはこの３つだけですので、npm でインストールしたものはこの３つを削除すれば全てなかったことになります。

Node.js の各パッケージについては、それぞれの情報を参照してください。
Node.js のパッケージは Node.js ランタイム上で動くもの ですので、Node.js がインストールされていれば動きます。
「Visual Studio だから動かない」ということはありません。

参考資料

Visual Studio の JavaScript と TypeScript - Visual Studio (Windows) | Microsoft Learn
Visual Studio で npm パッケージを管理する

プロジェクトに package.json ファイルがまだ含まれていない場合は、package.json ファイルをプロジェクトに追加することで、npm サポートを有効にすることができます。