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

[アーティクル]
11/06/2023

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

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

Node.js プロジェクトを作成する
npm パッケージを追加する
アプリに React コードを追加する
JSX をトランスパイルする
デバッガーをアタッチします。

重要

Visual Studio 2022 以降では、代わりに、推奨されている CLI ベースのプロジェクトタイプを使用して、React プロジェクトを作成することもできます。この記事の情報の一部は、Node.js プロジェクトの種類 (.njsproj) にのみ適用されます。この記事で使用されているテンプレートは、Visual Studio 2022 バージョン 17.8 Preview 2 以降では使用できなくなりました。

始める前に、簡単な 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 18.5.0 でテストされました。

このチュートリアルは、Node.js 12.6.2 でテストされました。

プロジェクトの作成

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

Visual Studio を開き、Esc キーを押してスタートウィンドウを閉じます。
Ctrl+Q キーを押し、検索ボックスに「node.js」と入力し、ドロップダウンリストから [空の Node.js Web アプリケーション - JavaScript] を選択します。

このチュートリアルでは TypeScript コンパイラが使用されますが、手順では JavaScript テンプレートから始める必要があります。

[空の Node.js Web アプリケーション] の選択肢が表示されない場合は、Node.js 開発ワークロードをインストールする必要があります。手順については、「必須コンポーネント」を参照してください。
[新しいプロジェクトの構成] ダイアログボックスで [作成] を選択します。

Visual Studio によって新しいソリューションとプロジェクトが作成され、右ペインにプロジェクトが表示されます。 server.js プロジェクトファイルが左ペインのエディターに表示されます。
右ペインのソリューションエクスプローラーでプロジェクトの構造を確認します。
- 最上位レベルにあるのは "ソリューション" (1) です。既定では、名前はプロジェクトと同じです。ディスク上の .sln ファイルで表されるソリューションは、1 つ以上の関連プロジェクトのコンテナーです。
- [新しいプロジェクトの構成し] ダイアログボックスで付けた名前を使用するプロジェクト (2) が太字で強調表示されています。ファイルシステム内のプロジェクトは、プロジェクトフォルダー内の .njsproj ファイルです。
  
  プロジェクトのプロパティと環境変数を表示および設定するには、Alt+Enter キーを押すか、プロジェクトを右クリックしてコンテキストメニューから [プロパティ] を選択します。プロジェクトファイルでは Node.js プロジェクトソースへのカスタム変更が行われないため、他の開発ツールを使用して作業することができます。
- npm ノード (3) には、インストールされているすべての npm パッケージが表示されます。
  
  npm ノードを右クリックして npm パッケージを検索してインストールします。 package.json の設定と npm ノードの右クリックオプションを使用して、パッケージのインストールと更新を行うことができます。
- ローカルにインストールされたパッケージの依存関係とバージョンを管理するために、npm には package.json ファイル (4) が使用されます。詳細については、npm パッケージの管理に関するページを参照してください。
- プロジェクトノードの下にはプロジェクトファイル (5) が表示されています。プロジェクトのスタートアップファイル server.js は太字で表示されています。
  
  プロジェクトでファイルを右クリックし、 [Node.js スタートアップスクリプトとして設定] を選択することで、スタートアップファイルを設定できます。

Visual Studio を開きます。
新しいプロジェクトを作成します。

Esc キーを押してスタートウィンドウを閉じます。 Ctrl + Q キーを押して検索ボックスを開き、「Node.js」と入力してから、 [空の Node.js Web アプリケーション] (JavaScript) を選択します (このチュートリアルでは TypeScript コンパイラが使用されますが、手順では JavaScript テンプレートから始める必要があります)。

表示されたダイアログボックスで、 [作成] を選択します。

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

Visual Studio は新しいソリューションを作成し、プロジェクトを開きます。

(1) [新しいプロジェクト] ダイアログボックスに指定した名前が使用され、太字で強調表示されているのがあなたのプロジェクトです。ファイルシステムでは、このプロジェクトは、プロジェクトフォルダーの .njsproj ファイルに該当します。プロジェクトを右クリックし、 [プロパティ] を選択することで (または Alt + Enter キーを押して)、プロジェクトに関連付けられたプロパティと環境変数を設定できます。プロジェクトファイルでは Node.js プロジェクトソースへのカスタム変更が行われないため、他の開発ツールを使用してラウンドトリップを行うことができます。

(2) 最上位レベルにあるのは、ソリューションです。既定では、名前はプロジェクトと同じです。ディスク上の .sln ファイルで表されるソリューションは、1 つ以上の関連プロジェクトのコンテナーです。

(3) npm ノードには、インストールされているすべての npm パッケージが表示されます。 npm ノードを右クリックすれば、ダイアログボックスを利用して npm パッケージを検索し、インストールできます。または、package.json の設定と npm ノードの右クリックオプションを利用してパッケージをインストールし、更新できます。

(4) package.json は、ローカルにインストールされているパッケージのパッケージ依存関係とパッケージバージョンを管理する目的で npm によって使用されるファイルです。詳細については、npm パッケージの管理に関するページを参照してください。

(5) プロジェクトノードの下に、server.js などのプロジェクトファイルが表示されます。 server.js はプロジェクトスタートアップファイルであり、そのため、太字で表示されます。プロジェクトでファイルを右クリックし、 [Node.js スタートアップスクリプトとして設定] を選択することで、スタートアップファイルを設定できます。

npm パッケージを追加する

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

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

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

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

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

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

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

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

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

ソリューションエクスプローラーから、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 の構成に関するページを参照してください。
Ctrl+S キーを押すか、 [ファイル]>[package.json の保存] を選択して変更内容を保存します。
ソリューションエクスプローラーでプロジェクトの npm ノードを右クリックし、 [npm パッケージのインストール] を選択します。

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

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

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

Note

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

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

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

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

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

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

すべての項目テンプレートが表示されない場合は、[すべてのテンプレートを表示] を選択してから、項目テンプレートを選択します。
[新しい項目の追加] ダイアログボックスで [TypeScript JSX ファイル] を選択し、名前に「app.tsx」と入力して [追加] または [OK] を選択します。
これらの手順を繰り返して webpack-config.js という名前の JavaScript ファイルを追加します。
これらの手順を繰り返して index.html という名前の HTML ファイルを追加します。
これらの手順を繰り返して tsconfig.json という TypeScript JSON 構成ファイルを追加します。

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

ソリューションエクスプローラーで 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 です。プロジェクトのプロパティを開く必要がある場合は、ソリューションエクスプローラーでプロジェクト名を右クリックし、 [プロパティ] を選択します。

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 が使用されています。

index.html を開き、body セクションを次のコードに置き換えます。
```
<body>
    <div id="root"></div>
    
    <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 コンパイラの入門編です。

ソリューションエクスプローラーで 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 に指示します。

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 が指定されています。

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

JSX をトランスパイルする

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

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

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

上記の出力ではなく何らかのエラーが表示される場合は、それを解決しないとアプリは動きません。 npm パッケージのバージョンがこのチュートリアルに指定されているバージョンと異なる場合は、エラーが発生する可能性があります。エラーを修正するには、次の操作を試してください。
- 前の手順で示した正確なバージョンを使用してください (まだ実行していない場合)
  
  または、エラーが引き続き表示される場合は、次の手順を実行します。
- ソリューションエクスプローラーで npm ノードを右クリックし、[npm パッケージのインストール] を選択して、npm パッケージの最新バージョンをインストールします。
1 つ以上のパッケージバージョンが非推奨であるためにエラーが発生する場合は、エラーを修正するにはより新しいバージョンをインストールする必要があります。 package.json を使用した npm パッケージのバージョン管理に関する詳細は、「package.json configuration」 (package.json の構成) を参照してください。
ソリューションエクスプローラーでプロジェクトノードを右クリックし、 [追加]>[既存のフォルダー] を選択します。
dist フォルダーを選択し、 [フォルダーの選択] を選択します。

Visual Studio によって dist フォルダーがプロジェクトに追加されます。ここには app-bundle.js と app-bundle.js.map があります。
app-bundle.js を開き、トランスパイルされた JavaScript コードを表示します。
外部で変更されたファイルを再度読み込むかどうかを確認するプロンプトが表示される場合は、 [すべてはい] を選択します。

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

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

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

package.json を開き、dependencies セクションの後に次のセクションを追加します。
```
"scripts": {
 "build": "webpack-cli --config webpack-config.js"
}
```
変更を保存します。

アプリを実行する

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

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

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

Visual Studio は、スタートアップファイル server.js を起動することにより、アプリを起動します。
ブラウザーとコンソールのウィンドウを閉じます。

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

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

server.js で、staticPath 宣言の左側の余白をクリックして、ブレークポイントを設定します。
アプリを実行するには、F5 キーを押すか、 [デバッグ]>[デバッグの開始] を選択します。

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

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

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

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

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

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

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

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

[デバッグ] ツールバーのドロップダウンリストから [ブラウザーの選択] を選択します。
[ブラウザーの選択] 画面で、優先するブラウザーを選択して [追加] を選択します。
[引数] フィールドに「 --remote-debugging-port=9222」と入力します。
ブラウザーに「デバッグありの Edge」や「デバッグありの Chrome」などの新しいフレンドリ名を付け、 [OK] を選択します。
[ブラウザーの選択] 画面で [参照] を選択します。

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

msedge --remote-debugging-port=9222

または

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

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

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

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 に変更され、デバッグが有効になります。
Visual Studio でデバッグターゲットとしてターゲットブラウザーを選択し、次に Ctrl+F5 キーを押すか、 [デバッグ]>[デバッグなしで開始] を選択してブラウザーでアプリを実行します。

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

アプリがブラウザーの新しいタブで開きます。
[デバッグ]>[プロセスにアタッチ] を選択するか、Ctrl+Alt+P キーを押します。

ヒント

初めてプロセスにアタッチした後は、 [デバッグ]>[プロセスに再アタッチする] を選択するか Shift+Alt+P を押すことで、同じプロセスにすぐに再アタッチできます。
[プロセスにアタッチ] ダイアログボックスで、アタッチできるブラウザーインスタンスのフィルター処理された一覧を取得します。

[アタッチ先] フィールドに [JavaScript (Chrome)] または [JavaScript (Microsoft Edge - Chromium)] のターゲットブラウザーに適したデバッガーが表示されることを確認します。フィルターボックスに「chrome」または「edge」と入力して結果をフィルター処理します。
正しいホストポート (この例では localhost) のブラウザープロセスを選択します。ポート番号 1337 または localhost が [タイトル] フィールドに表示され、正しいプロセスを選択するのに役立つ場合があります。
[接続] を選択します。

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

ヒント

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

環境、ブラウザーの状態、先ほど行った手順に応じて、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 を削除します。

次の手順

アプリを Linux App Service にデプロイする

次の方法で共有

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

前提条件

プロジェクトの作成

npm パッケージを追加する

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

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

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

JSX をトランスパイルする

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

アプリを実行する

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

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

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

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

次の手順

フィードバック

その他のリソース

次の方法で共有

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

前提条件

プロジェクトの作成

npm パッケージを追加する

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

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

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

JSX をトランスパイルする

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

アプリを実行する

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

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

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

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

次の手順

フィードバック

その他のリソース

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

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

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