チュートリアル: Visual Studio で Node.js と React のアプリを作成する

Visual Studio では、Node.js プロジェクトを簡単に作成し、IntelliSense や、Node.js をサポートする他の組み込み機能を使用することができます。 このチュートリアルでは、Visual Studio テンプレートから Node.js Web アプリ プロジェクトを作成します。 その後、React を使って簡単なアプリを作成します。

このチュートリアルでは、次の作業を行う方法について説明します。

始める前に、簡単な FAQ で主要な概念をいくつか紹介します。

• Node.js とは何ですか?

  Node.js は JavaScript コードを実行するサーバー側の JavaScript ランタイム環境です。

• npm とは何か

  Node.js の既定のパッケージ マネージャーは npm です。 パッケージ マネージャーを使用すると、Node.js ソース コード ライブラリの発行と共有が簡単になります。 npm パッケージ マネージャーによって、ライブラリのインストール、更新、アンインストールが簡略化されます。

• React とは何か

  React は、ユーザー インターフェイス (UI) を作成するためのフロントエンド フレームワークです。

• JSX とは何か

  JSX は JavaScript 構文の拡張機能であり、通常は UI 要素を記述するために React で使用されます。 JSX コードをブラウザーで実行するには、事前にプレーンな JavaScript にトランスパイルする必要があります。

• Webpack とは何か

  webpack を使用すると、ブラウザーで実行できるように JavaScript ファイルをバンドルすることができます。また、他のリソースと資産を変換することやパッケージ化することもできます。 webpack で Babel や TypeScript などのコンパイラを指定し、JSX または TypeScript のコードをプレーンな JavaScript にトランスパイルすることができます。

前提条件

このチュートリアルの前提条件は次のとおりです。

• Node.js 開発ワークロードがインストールされた Visual Studio。

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

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

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

     

  Visual Studio はインストール済みで、Node.js ワークロードが必要な場合:

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

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

• インストールされている Node.js ランタイム:

  Node.js ランタイムがインストールされていない場合は、LTS バージョンを Node.js Web サイトからインストールしてください。 LTS バージョンは、他のフレームワークやライブラリとの互換性が最も高いバージョンです。

  Visual Studio Node.js ワークロードの Node.js ツールは、Node.js の 32 ビットおよび 64 ビット アーキテクチャ バージョンの両方をサポートしています。 Visual Studio に必要なのは 1 つのバージョンのみであり、Node.js のインストーラーは同時に 1 つのバージョンのみをサポートします。

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

  1. プロジェクトを作成したら、プロジェクト ノードを右クリックして [プロパティ] を選択します。

  2. [プロパティ] ペインで [node.exe のパス] を設定し、Node.js のグローバルまたはローカルのインストールを参照します。 各 Node.js プロジェクトで、ローカル インタープリターのパスを指定することができます。

プロジェクトの作成

まず Node.js Web アプリ プロジェクトを作成します。

npm パッケージを追加する

このアプリが正しく動作するには、次の npm モジュールが必要です。

• react
• react-dom
• express
• path
• ts-loader
• typescript
• webpack
• webpack-cli

パッケージをインストールするには:

1. ソリューション エクスプローラーで npm ノードを右クリックし、 [新しい npm パッケージのインストール] を選択します。

2. [新しい npm パッケージのインストール] ダイアログ ボックスで、react パッケージを探し、 [パッケージのインストール] を選択してインストールします。

   

   

   [新しい npm パッケージのインストール] ダイアログ ボックスでは、最新バージョンのパッケージをインストールするか、バージョンを指定してインストールできます。 最新バージョンのインストールを選択しても、後で予期しないエラーが発生する場合は、次の手順で一覧表示される正確なパッケージ バージョンをインストールしてみてください。

   Visual Studio の下部ペインにある [出力] ウィンドウには、パッケージのインストールの進行状況が表示されます。 [出力] ウィンドウを開くには、 [表示]>[出力] を選択するか、Ctrl+Alt+O キーを押します。 [出力] ウィンドウの [出力元の表示] ボックスで [npm] を選択します。

   インストールされると、ソリューション エクスプローラーの npm ノードの下に react パッケージが表示されます。

   プロジェクトの package.json ファイルが、パッケージのバージョンなど、新しいパッケージの情報で更新されます。

UI を使って残りのパッケージを 1 つずつ検索して追加するのではなく、必要なパッケージ コードを package.json に貼り付けることができます。

1. ソリューション エクスプローラーから、Visual Studio エディターで package.json を開きます。 ファイルの末尾の前に次の dependencies セクションを追加します。

   "dependencies": {
     "express": "^4.18.2",
     "path": "^0.12.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "ts-loader": "^9.4.2",
     "typescript": "^5.0.2",
     "webpack": "^5.76.3",
     "webpack-cli": "^5.0.1"
   },
   

   ファイルに dependencies セクションが既にある場合は、前の JSON コードで置き換えます。 package.json ファイルの使用方法については、package.json の構成に関するページを参照してください。

2. Ctrl+S キーを押すか、 [ファイル]>[package.json の保存] を選択して変更内容を保存します。

3. ソリューション エクスプローラーでプロジェクトの npm ノードを右クリックし、 [npm パッケージのインストール] を選択します。

   このコマンドによって npm のインストール コマンドが直接実行され、packages.json に列挙されているすべてのパッケージがインストールされます。

   下部ペインの [出力] ウィンドウを選択すると、インストールの進行状況が表示されます。 インストールには数分かかることがあります。また、結果がすぐに表示されないことがあります。 [出力] ウィンドウの [出力元の表示] フィールドで [npm] を選択していることを確認します。

   インストール後は、ソリューション エクスプローラーの npm ノードに npm モジュールが表示されます。

   

   

   Note

   また、コマンドラインを使用して npm パッケージをインストールすることもできます。 ソリューション エクスプローラーでプロジェクト名を右クリックし、 [ここでコマンド プロンプトを開く] を選択します。 Node.js の標準コマンドを使ってパッケージをインストールします。

プロジェクト ファイルを追加する

次に、4 つの新しいファイルをプロジェクトに追加します。

• app.tsx
• webpack-config.js
• index.html
• tsconfig.json

この簡単なアプリでは、プロジェクトのルートに新しいプロジェクト ファイルを追加します ほとんどのアプリでは、サブフォルダーにファイルを追加し、それに応じて相対パスの参照を調整します。

1. ソリューション エクスプローラーでプロジェクト名を選択して Ctrl+Shift+A キーを押すか、プロジェクト名を右クリックして [追加]>[新しい項目] を選択します。

   すべての項目テンプレートが表示されない場合は、[すべてのテンプレートを表示] を選択してから、項目テンプレートを選択します。

2. [新しい項目の追加] ダイアログ ボックスで [TypeScript JSX ファイル] を選択し、名前に「app.tsx」と入力して [追加] または [OK] を選択します。

3. これらの手順を繰り返して webpack-config.js という名前の JavaScript ファイルを追加します。

4. これらの手順を繰り返して index.html という名前の HTML ファイルを追加します。

5. これらの手順を繰り返して tsconfig.json という TypeScript JSON 構成ファイルを追加します。

アプリのコードを追加する

1. ソリューション エクスプローラーで server.js を開き、既存のコードを次のコードと置き換えます。

   'use strict';
   var path = require('path');
   var express = require('express');
   
   var app = express();
   
   var staticPath = path.join(__dirname, '/');
   app.use(express.static(staticPath));
   
   // Allows you to set port in the project properties.
   app.set('port', process.env.PORT || 3000);
   
   var server = app.listen(app.get('port'), function() {
       console.log('listening');
   });
   

   上記のコードは、Express を使用し、Web アプリケーション サーバーとして Node.js を起動します。 このコードにより、ポートはプロジェクトのプロパティに構成されているポート番号に設定されます。この既定値は 1337 です。 プロジェクトのプロパティを開く必要がある場合は、ソリューション エクスプローラーでプロジェクト名を右クリックし、 [プロパティ] を選択します。

2. app.tsx を開き、次のコードを追加します。

   declare var require: any
   
   var React = require('react');
   var ReactDOM = require('react-dom');
   
   export class Hello extends React.Component {
       render() {
           return (
               <h1>Welcome to React!!</h1>
           );
       }
   }
   
   ReactDOM.render(<Hello />, document.getElementById('root'));
   

   上記のコードには、メッセージを表示するために JSX 構文と React が使用されています。

3. index.html を開き、body セクションを次のコードに置き換えます。

   <body>
       <div id="root"></div>
       <!-- scripts -->
       <script src="./dist/app-bundle.js"></script>
   </body>
   

   この HTML ページは app-bundle.js を読み込みます。このファイルには、プレーンな JavaScript にトランスパイルされた JSX と React のコードが含まれます。 現在、app-bundle.js ファイルは空です。 次のセクションでは、コードをトランスパイルするためのオプションを構成します。

Webpack と TypeScript のコンパイラ オプションを構成する

次に、Webpack 構成コードを webpack-config.js に 追加します。 JSX をバンドルしてプレーンな JavaScript にトランスパイルするための入力ファイル (app.tsx) と出力ファイル (app-bundle.js) を指定する、Webpack の簡単な構成を追加します。 トランスパイルについては、TypeScript のコンパイラ オプションもいくつか構成します。 この基本的な構成コードは、Webpack と TypeScript コンパイラの入門編です。

1. ソリューション エクスプローラーで webpack-config.js を開き、次のコードを追加します。

   module.exports = {
       devtool: 'source-map',
       entry: "./app.tsx",
       mode: "development",
       output: {
           filename: "./app-bundle.js"
       },
       resolve: {
           extensions: ['.Webpack.js', '.web.js', '.ts', '.js', '.jsx', '.tsx']
       },
       module: {
           rules: [
               {
                   test: /\.tsx$/,
                   exclude: /(node_modules|bower_components)/,
                   use: {
                       loader: 'ts-loader'
                   }
               }
           ]
       }
   }
   

   Webpack 構成コードでは、TypeScript ローダーを使用して JSX をトランスパイルするように Webpack に指示します。

2. tsconfig.json を開き、TypeScript コンパイラ オプションを指定する次のコードで内容を置換します。

   {
     "compilerOptions": {
       "noImplicitAny": false,
       "module": "commonjs",
       "noEmitOnError": true,
       "removeComments": false,
       "sourceMap": true,
       "target": "es5",
       "jsx": "react"
     },
     "exclude": [
       "node_modules"
     ],
     "files": [
       "app.tsx"
     ]
   }
   

   このコードには、ソース ファイルとして app.tsx が指定されています。

3. Ctrl+Shift+S キーを押すか、 [ファイル]>[すべて保存] を選択してすべての変更を保存します。

JSX をトランスパイルする

1. ソリューション エクスプローラーでプロジェクト名を右クリックし、 [ここでコマンド プロンプトを開く] を選択します。

2. コマンド プロンプトで、次の Webpack コマンドを入力します。

   node_modules\.bin\webpack --config webpack-config.js

   コマンド プロンプト ウィンドウに結果が表示されます。

   

   上記の出力ではなく何らかのエラーが表示される場合は、それを解決しないとアプリは動きません。 npm パッケージのバージョンがこのチュートリアルに指定されているバージョンと異なる場合は、エラーが発生する可能性があります。 エラーを修正するには、次の操作を試してください。

   • 前の手順で示した正確なバージョンを使用してください (まだ実行していない場合)

     または、エラーが引き続き表示される場合は、次の手順を実行します。

   • ソリューション エクスプローラーで npm ノードを右クリックし、[npm パッケージのインストール] を選択して、npm パッケージの最新バージョンをインストールします。

   1 つ以上のパッケージ バージョンが非推奨であるためにエラーが発生する場合は、エラーを修正するにはより新しいバージョンをインストールする必要があります。 package.json を使用した npm パッケージのバージョン管理に関する詳細は、「package.json configuration」 (package.json の構成) を参照してください。

3. ソリューション エクスプローラーでプロジェクト ノードを右クリックし、 [追加]>[既存のフォルダー] を選択します。

4. dist フォルダーを選択し、 [フォルダーの選択] を選択します。

   Visual Studio によって dist フォルダーがプロジェクトに追加されます。ここには app-bundle.js と app-bundle.js.map があります。

5. app-bundle.js を開き、トランスパイルされた JavaScript コードを表示します。

6. 外部で変更されたファイルを再度読み込むかどうかを確認するプロンプトが表示される場合は、 [すべてはい] を選択します。

   

app.tsx を変更するたびに、Webpack コマンドを再実行する必要があります。 この手順を自動化するには、JSX をトランスパイルするビルド スクリプトを追加します。

JSX をトランスパイルするビルド スクリプトを追加する

Visual Studio 2019 以降の Visual Studio バージョンにはビルド スクリプトが必要です。 前のセクションで示したように、コマンド ラインで JSX をトランスパイルするのでなく、Visual Studio からビルドするときに JSX をトランスパイルすることができます。

1. package.json を開き、dependencies セクションの後に次のセクションを追加します。

   "scripts": {
    "build": "webpack-cli --config webpack-config.js"
   }
   

2. 変更を保存します。

アプリを実行する

1. [デバッグ] ツール バーで、デバッグ ターゲットとして [Web サーバー (Microsoft Edge)] または [Web サーバー (Google Chrome)] を選択します。

   

   

   マシン上で優先するデバッグ ターゲットがあるにもかかわらず、オプションとして表示されない場合は、デバッグ ターゲットのドロップダウン リストから [ブラウザーの選択] を選択します。 一覧から既定のブラウザー ターゲットを選択し、 [既定に設定] を選択します。

2. アプリを実行するには、F5 キーを押すか、緑の矢印ボタンを選択するか、 [デバッグ]>[デバッグの開始] を選択します。

   Node.js コンソール ウィンドウが開き、デバッガーのリッスン ポートが表示されます。

   Visual Studio は、スタートアップ ファイル server.js を起動することにより、アプリを起動します。

   

3. ブラウザーとコンソールのウィンドウを閉じます。

ブレークポイントを設定してアプリを実行する

ブレークポイントは、信頼できるデバッグの最も基本的で重要な機能です。 ブレークポイントは、Visual Studio によって実行されているコードを一時停止する場所を示します。 これで、変数値、メモリの動作、またはコードのブランチが実行中かどうかを観察できるようになります。

1. server.js で、staticPath 宣言の左側の余白をクリックして、ブレークポイントを設定します。

   

   

2. アプリを実行するには、F5 キーを押すか、 [デバッグ]>[デバッグの開始] を選択します。

   設定したブレークポイントでデバッガーが一時停止します (現在のステートメントが強調表示されます)。 ここで、 [ローカル] ウィンドウや [ウォッチ] ウィンドウなどのデバッガー ウィンドウを使って、現在スコープ内にある変数をマウスでポイントすることにより、アプリの状態を調べることができます。

3. アプリの実行を続行するには、F5 キーを押すか、 [デバッグ] ツール バーの [続行] を選択するか、 [デバッグ]>[続行] を選択します。

   Chrome の開発者ツールまたは Microsoft Edge の F12 ツールを使う場合は、F12 キーを押します。 これらのツールを使用すると、DOM を調べ、JavaScript コンソールを使ってアプリを操作することができます。

4. ブラウザーとコンソールのウィンドウを閉じます。

クライアント側の React コードにブレークポイントを設定してヒットする

前のセクションでは、サーバー側の Node.js コードにデバッガーをアタッチしました。 クライアント側の React コードにアタッチしてブレークポイントにヒットするには、デバッガーを正しいプロセスにアタッチする必要があります。 次に、ブラウザーを有効にして、デバッグのためにプロセスをアタッチする方法の 1 つを紹介します。

ブラウザーのデバッグを有効にする

Microsoft Edge または Google Chrome のいずれかを使用できます。 ターゲット ブラウザーのすべてのウィンドウを閉じます。 Microsoft Edge の場合は、Chrome のすべてのインスタンスもシャットダウンします。 どちらのブラウザーも Chromium コード ベースを共有しているため、両方のブラウザーをシャットダウンすることで最良の結果が得られます。

そのブラウザーをデバッグを有効にした状態で開くことが、その他のブラウザー インスタンスによって妨げられる可能性があります ブラウザーの拡張機能によって、完全なデバッグ モードにならない場合があります。 必要に応じて、タスク マネージャーを使用し、実行中のすべての Chrome インスタンスを見つけて終了します。

デバッグが有効な状態でブラウザーを起動するには:

1. [デバッグ] ツール バーのドロップダウン リストから [ブラウザーの選択] を選択します。

2. [ブラウザーの選択] 画面で、優先するブラウザーを選択して [追加] を選択します。

3. [引数] フィールドに「 --remote-debugging-port=9222」と入力します。

4. ブラウザーに「デバッグありの Edge」や「デバッグありの Chrome」などの新しいフレンドリ名を付け、 [OK] を選択します。

5. [ブラウザーの選択] 画面で [参照] を選択します。

   

• または、Windows の [スタート] ボタンを右クリックして [ファイル名を指定して実行] コマンドを開き、次のように入力します。

  msedge --remote-debugging-port=9222

  または

  chrome.exe --remote-debugging-port=9222

デバッグが有効な状態でブラウザーが起動します。 アプリはまだ実行されていないので、ブラウザー ページは空です。

クライアント側スクリプトにデバッガーをアタッチする

1. Visual Studio エディターで、app-bundle.js または app.tsx ソース コードのいずれかにブレークポイントを設定します。

   • app-bundle.js の場合は、render() 関数にブレークポイントを設定します。 app-bundle.js ファイル内の render() 関数を見つけるには、Ctrl+F キーを押すか、 [編集]>[検索と置換]>[クイック検索] を選択し、検索フィールドに「render」と入力します。

     

     

   • app.tsx では、render() 関数の内部で、return ステートメントにブレークポイントを設定します。

     

     

     app.tsx にブレークポイントを設定した場合は、webpack-config.js も更新して次のコードを置き換え、変更を保存します。

     次のテキストを置き換えます。

     output: {
         filename: "./app-bundle.js",
     },
     

     次のコードを使用します。

     output: {
         filename: "./app-bundle.js",
         devtoolModuleFilenameTemplate: '[resource-path]'  // removes the webpack:/// prefix
     },
     

     この開発専用の設定により、Visual Studio でのデバッグが有効になります。 既定では、ソース マップ ファイル内の Webpack 参照には webpack:/// プレフィックスが含まれています。これにより、Visual Studio でソース ファイル app.tsx を検索できなくなります。 この設定を使用すると、アプリをビルドするときに、ソース マップ ファイル app-bundle.js 内で生成された参照がオーバーライドされます。 具体的には、この設定により、ソース ファイルへの参照が webpack:///./app.tsx から ./app.tsx に変更され、デバッグが有効になります。

2. Visual Studio でデバッグ ターゲットとしてターゲット ブラウザーを選択し、次に Ctrl+F5 キーを押すか、 [デバッグ]>[デバッグなしで開始] を選択してブラウザーでアプリを実行します。

   フレンドリ名を使用してデバッグが有効なブラウザー構成を作成した場合は、そのブラウザーをデバッグ ターゲットとして選択します。

   アプリがブラウザーの新しいタブで開きます。

3. [デバッグ]>[プロセスにアタッチ] を選択するか、Ctrl+Alt+P キーを押します。

   ヒント

   初めてプロセスにアタッチした後は、 [デバッグ]>[プロセスに再アタッチする] を選択するか Shift+Alt+P を押すことで、同じプロセスにすぐに再アタッチできます。

4. [プロセスにアタッチ] ダイアログ ボックスで、アタッチできるブラウザー インスタンスのフィルター処理された一覧を取得します。

   [アタッチ先] フィールドに [JavaScript (Chrome)] または [JavaScript (Microsoft Edge - Chromium)] のターゲット ブラウザーに適したデバッガーが表示されることを確認します。 フィルター ボックスに「chrome」または「edge」と入力して結果をフィルター処理します。

5. 正しいホスト ポート (この例では localhost) のブラウザー プロセスを選択します。 ポート番号 1337 または localhost が [タイトル] フィールドに表示され、正しいプロセスを選択するのに役立つ場合があります。

6. [接続] を選択します。

   次の例は、Microsoft Edge ブラウザーの [プロセスにアタッチ] ウィンドウを示しています。

   

   ヒント

   デバッガーがアタッチされず、"プロセスにアタッチできません。現在の状態での操作は無効です。 " というメッセージが表示される場合は、デバッグ モードでブラウザーを起動する前に、タスク マネージャーを使用してターゲット ブラウザーのインスタンスをすべて閉じてください。 ブラウザーの拡張機能が実行され、フル デバッグ モードが阻止されている場合があります。

7. ブレークポイントを設定したコードは既に実行しているので、ブラウザーのページを更新してブレークポイントにヒットします。

   環境、ブラウザーの状態、先ほど行った手順に応じて、app-bundle.js のブレークポイントや app.tsx のマップされた場所にヒットする可能性があります。 どちらの場合も、コードをステップ実行して、変数を確認できます

   デバッガーが一時停止されている間に、変数をマウスでポイントし、デバッガー ウィンドウを使って、アプリの状態を確認できます。 コードをステップ実行するには、F11 キーを押すか、 [デバッグ]>[ステップ イン] を選択するか、F10 キーを押すか、 [デバッグ]>[ステップ オーバー] を選択します。 コードの実行を続行するには、F5 キーを押すか、 [続行] を選択します。 基本的なデバッグ機能の詳細については、デバッガーでのはじめにに関するページを参照してください。

   • app.tsx のコードにブレークポイントを設定できない場合は、前の手順で説明したように [プロセスにアタッチ] を使用してデバッガーをアタッチして再試行します。 環境が正しく設定されていることを確認してください。

     • タスク マネージャーを使用して、Chrome 拡張機能を含むすべてのブラウザー インスタンスを閉じます。 必ずブラウザーをデバッグ モードで起動します。

     • ソース マップ ファイルに ./app.tsx への参照が含まれており、webpack:///./app.tsx が含まれていないことを確認します。そうでないと、Visual Studio デバッガーで app.tsx を検索できません。

     または、app.tsx の debugger; ステートメントを使用するか、代わりに Chrome Developer Tools または F12 Tools for Microsoft Edge でブレークポイントを設定してみてください。

   • app-bundle.js のコードにブレークポイントを設定できない場合は、ソース マップ ファイルである app-bundle.js.map を削除します。

次の手順