クイックスタート: Visual Studio を使用して最初の Node.js アプリを作成する

ここでは 5 分から 10 分で Visual Studio 統合開発環境 (IDE) の概要を示し、単純な Node.js Web アプリを作成します。

前提条件

始める前に、Visual Studio をインストールし、Node.js 環境を設定します。

Visual Studio と Node.js ワークロードをインストールする

まだ Visual Studio をインストールしていない場合:

  1. Visual Studio のダウンロード ページに移動し、Visual Studio 2022 を無料でインストールしてください。

  2. Visual Studio インストーラーで [Node.js 開発] ワークロードを選択し、 [インストール] を選択します。

    Visual Studio インストーラーで選択された Node.js ワークロードを示すスクリーンショット。

Visual Studio が既にインストールされている場合。

  1. Visual Studio で [ツール] > [ツールと機能を取得] に移動します。

  2. Visual Studio インストーラーで [Node.js 開発] ワークロードを選択し、 [変更] を選択し、ワークロードをダウンロードしてインストールします。

Node.js 環境を設定する

Node.js ランタイムの LTS バージョンをインストールします。 LTS バージョンは、他のフレームワークやライブラリとの互換性が最も高いバージョンです。

Node.js は 32 ビットと 64 ビットのアーキテクチャ用に構築されていますが、Node.js インストーラーは一度に 1 つのバージョンのみをサポートします。

通常、Visual Studio によってインストール済みのランタイムが検出されますが、検出されない場合は、インストール済みのランタイムを参照するようにプロジェクトを構成することができます。

  1. プロジェクトを作成したら、プロジェクト ノードを右クリックします。

  2. [プロパティ] を選択し、 [node.exe のパス] を設定します。 Node.js のグローバル インストールを使用するか、任意の Node.js プロジェクトのローカル インタープリターのパスを指定することができます。

Visual Studio のインストール

Visual Studio 2019 をまだインストールしていない場合は、Visual Studio のダウンロード ページに移動し、無料試用版をインストールしてください。

Visual Studio のインストール

Visual Studio 2017 をまだインストールしていない場合は、Visual Studio のダウンロード ページに移動し、無料試用版をインストールしてください。

Node.js 環境を設定する

Visual Studio は、Node.js 開発に一般的なツールのインストールなど、環境の設定に役立ちます。

  1. Visual Studio で [ツール] > [ツールと機能を取得] に移動します。

  2. Visual Studio インストーラーで [Node.js 開発] ワークロードを選択し、 [変更] を選択し、ワークロードをダウンロードしてインストールします。

    Visual Studio インストーラーで選択された Node.js ワークロードを示すスクリーンショット。

  3. Node.js ランタイムの LTS バージョンをインストールします。 外部のフレームワークとライブラリとの互換性を最大限に高めるために、LTS バージョンをお勧めします。

    Node.js は 32 ビットと 64 ビットのアーキテクチャ用に構築されていますが、Node.js インストーラーは、インストールされたバージョンのうち一度に 1 つのみをサポートします。

  4. インストールされたランタイムが Visual Studio によって検出されない場合 (通常はされます)、インストールされたランタイムを参照するようにプロジェクトを構成します。

    1. プロジェクトを作成した後、プロジェクト ノードを右クリックします。

    2. [プロパティ] を選択し、 [node.exe のパス] を設定します。 Node.js のグローバル インストールを使用するか、または Node.js プロジェクトごとにローカル インタープリターへのパスを指定することができます。

アプリのプロジェクトを作成する

Visual Studio で、新しい Node.js プロジェクトを作成します。

  1. Visual Studio を開始し、Esc キーを押してスタート ウィンドウを閉じます。

  2. Ctrl+Q キーを押し、検索ボックスに「node.js」と入力します。

  3. [空の Node.js Web アプリケーション] を選択します。

  4. ダイアログ ボックスで [作成] を選択します。

  1. Esc キーを押してスタート ウィンドウを閉じます。

  2. Ctrl + Q キーを押して検索ボックスを開き、「Node.js」と入力します。

  3. [空の Node.js Web アプリケーション (JavaScript)] を選択します。 ダイアログで [作成] を選択します。

  1. 上部のメニュー バーから、 [ファイル][新規][プロジェクト] の順に選択します。

  2. [新しいプロジェクト] ダイアログの左側のペインで、 [JavaScript] を展開して、 [Node.js] を選択します。

  3. 中央のペインで、 [空白の Node.js Web アプリケーション] を選択し、 [OK] を選択します。

Visual Studio によってプロジェクトが作成され、開かれます。 プロジェクトの server.js ファイルがエディターで開かれます。

[空白の Node.js Web アプリケーション] プロジェクト テンプレートが表示されない場合は、Node.js 開発 ワークロードを追加する必要があります。 手順については、「必須コンポーネント」を参照してください。

IDE を探索する

Visual Studio は、Node.js 開発に一般的なツールのインストールなど、環境の設定に役立ちます。

  1. 右側のペインにある ソリューション エクスプローラー を確認します。

    • 最上位レベルにあるのは、"ソリューション" です。既定では、名前はプロジェクトと同じです。 ディスク上の .sln ファイルで表されるソリューションは、1 つ以上の関連プロジェクトのコンテナーです。
    • 設定時に使用した名前のプロジェクトが太字で強調表示されています。 ディスク上では、このプロジェクトは、プロジェクト フォルダーの .njsproj ファイルに該当します。
    • npm ノードには、インストールされている npm パッケージが表示されます。 npm ノードを右クリックし、ダイアログを使用して npm パッケージを検索し、インストールすることができます。

    [ソリューション エクスプローラー] ペインのスクリーンショット。

  2. コマンド プロンプトから npm パッケージまたは Node.js コマンドをインストールするには、プロジェクト ノードを右クリックし、 [ここでコマンド プロンプトを開く] を選択します。

    プロジェクトのコンテキスト メニューの [ここでコマンド プロンプトを開く] を示すスクリーンショット。

  3. ソース コードへのナビゲーションをテストするには、開いている server.js ファイルで createServer を選択して F12 キーを押すか、createServer を右クリックしてコンテキスト メニューから [定義へ移動] を選択します。 このコマンドで http.d.tscreateServer 関数の定義が示されます。

    createServer のコンテキスト メニューの [定義へ移動] を示すスクリーンショット。

  4. server.js に戻り、コード行 res.end('Hello World\n'); を見つけて次のように変更します。

    res.end('Hello World\n' + res.connection.

    connection.」と入力すると、IntelliSense によってコード入力をオートコンプリートするオプションが表示されます。

    IntelliSense のオートコンプリート オプションを示すスクリーンショット。

  5. localPort を選択し、「);」と入力してステートメントを完成させます。

    res.end('Hello World\n' + res.connection.localPort);

  1. 右側のペインにある ソリューション エクスプローラー を確認します。

    • 最上位レベルにあるのは、"ソリューション" です。既定では、名前はプロジェクトと同じです。 ディスク上の .sln ファイルで表されるソリューションは、1 つ以上の関連プロジェクトのコンテナーです。
    • 設定時に使用した名前のプロジェクトが太字で強調表示されています。 ディスク上では、このプロジェクトは、プロジェクト フォルダーの .njsproj ファイルに該当します。
    • npm ノードには、インストールされている npm パッケージが表示されます。 npm ノードを右クリックし、ダイアログを使用して npm パッケージを検索し、インストールすることができます。

    [ソリューション エクスプローラー] ペインのスクリーンショット。

  2. コマンド プロンプトから npm パッケージまたは Node.js コマンドをインストールするには、プロジェクト ノードを右クリックし、コンテキスト メニューから [ここでコマンド プロンプトを開く] を選択します。

    プロジェクトのコンテキスト メニューの [ここでコマンド プロンプトを開く] を示すスクリーンショット。

  3. ソース コードへのナビゲーションをテストするには、開いている server.js ファイル内の http.createServer を選択して F12 キーを押すか、右クリックのコンテキスト メニューから [定義に移動] を選択します。 このコマンドで http.d.tscreateServer 関数の定義が示されます。

    createServer のコンテキスト メニューの [定義へ移動] を示すスクリーンショット。

  4. server.js に戻り、コード行 res.end('Hello World\n'); を見つけて次のように変更します。

    res.end('Hello World\n' + res.connection.

    connection. 」と入力すると、IntelliSense によってコード入力をオートコンプリートするオプションが表示されます。

    IntelliSense のオートコンプリート オプションを示すスクリーンショット。

  5. localPort を選択し、「);」と入力してステートメントを完成させます。

    res.end('Hello World\n' + res.connection.localPort);

アプリを実行する

  1. Ctrl+F5 キーを押すか、 [デバッグ] > [デバッグなしで開始] を選択してアプリを実行します。

    アプリがブラウザーで開きます。

  2. ブラウザーに "Hello World" のメッセージとローカルのポート番号が表示されることを確認します。

おめでとうございます。 Visual Studio を使用してシンプルな Node.js アプリを作成しました。 詳細を確認するには、目次の「チュートリアル」セクションに進んでください。

次の手順