Reactのデバッグ

今回は「React」を、VSCodeでデバッグできる様にセットアップします。ReactはBlazorなどと同じフロントエンドのユーザーインターフェイスを構築できるフレームワークになっています。Vue.jsと同じJavaScriptを使用していて、WEBアプリのフロントエンドとして最も使用されているフレームワークの様です。

Reactを使用するにはnpmというパッケージマネージャーが必要なのでNode.jsをあらかじめインストールしておく必要があります。Windows版のVSCodeをご使用の場合は、こちらのサイト様等を参考にしてNode.jsをインストールして下さい。WSL2をご使用の場合はこちらの記事等をご参照ください。

Reactプロジェクトを作成します

任意のフォルダ(react-app等)を作成してVSCodeで開きます。「Ctrl + @」と入力してターミナル画面を開いて以下の様に入力して、Reactプロジェクトのひな型を作成します。

npm create vite@latest . -- --template react 

または以下の様にWindowsのターミナルに入力して、プロジェクトのひな型を作成することも出来ます。

npm create vite@latest react-app -- --template react 

プロジェクトが作成されたら以下の様に入力して、必要なパッケージをインストールして開発用サーバーを起動します。

npm install
npm run dev

サーバーが起動すると以下の様な表示になりますので、「http://localhost:5173/」の部分をCtrlキーを押しながらクリックするとブラウザーが起動してトップページが表示されます。停止する場合はターミナル画面に「Ctrl + c」と入力します。

  VITE v6.3.5  ready in 258 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

開発用サーバーが待ち受けするポート番号を変更したい場合は、プロジェクトフォルダ内にある「vite.config.js」ファイルを開いて以下の様な設定を7行目あたりに追加します。(デフォルトは5173になっています。)

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3001,
  },
})

サーバーが起動している場合は、設定を保存するとすぐに待ち受けポートが変更されます。停止している場合は再度「npm run dev」と入力してサーバーを起動すると設定が反映されます。

Reactプロジェクトをデバッグします

プロジェクトフォルダ内に「.vscode/launch.json」というファイルを作成して、以下の様な設定を書き込みます。11行目の待ち受けポートを開発サーバーが待ち受けているポートに合わせます。12行目にReactのソースファイルの場所「/src」を追加します。

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "localhost に対して Chrome を起動する",
            "url": "http://localhost:5173",
            "webRoot": "${workspaceFolder}/src"
        }
    ]
}

「src」フォルダ内にある「main.jsx」ファイルを開いて6行目あたりにブレークポイントを設定します。「F5」キーを押すか、デバッグ画面の「実行とデバッグ」ボタンを押してデバッガーを起動すると設定したブレークポイントで停止します。

しかし以下の様にワークスペースフォルダを作成して、その中で複数のReactプロジェクトを管理している場合はこの設定ではブレークポイントで停止しない様です。

react-projects
  ├─react-app1
  └─react-app2

その場合は「.vscode/launch.json」ファイルの12行目を以下の様に修正して、「ブレークポイントを設定したファイルを最前面に表示して」デバッガーを起動すると停止する様です。

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "localhost に対して Chrome を起動する",
            "url": "http://localhost:5173",
            "webRoot": "${fileDirname}"
        }
    ]
}

どうしても停止しない場合は、ソースファイルに「debugger;」という文字列を追加しておくと必ず止まる様です。(ブレークポイントを設定していなくても停止します。)

以上です。よろしかったらお試しください。