【VSCode】React環境構築 デバッグ実行まで

2025年4月17日

はじめに

最近アツい（今更）Reactを勉強してみようという方は多いのではないでしょうか。私もReactに触れていこうと思うので、本書では2025年4月現在の環境構築方法を記載していこうと思います。VMwareで行っていますがUbuntuであれば同様の手順でできると思います。

またVSCodeでのChromeデバッグ実行環境も作成します。

実行環境

　OS：Ubuntu 24.04.1 LTS
　VMware：VMware Workstation 17 Pro
　VSCode：1.97.0
　Chrome：135.0.7049.84

インストール

node.jsのインストールを行います。現状最新安定版であるv20.xを使用します。

sudo apt update && sudo apt upgrade -y
sudo apt install -y curl
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs

インストールが成功したらバージョンを確認します。

node -v
npm -v

以下のように出れば問題ありません。

プロジェクト作成

アプリを格納するためのディレクトリを作成します。projectsは任意の名前に変更してください。

mkdir ~/projects && cd ~/projects

今回はvitaを用いて高速な環境を作成します。
以下のコマンドでアプリを作成します。my-appは任意の名前に変更してください。

npm create vite@latest app --template react-ts
cd app
npm install
npm run dev

npm create vite@latestコマンドの後にいくつか質問されますので、以下のように選択していきます。

これで環境構築は完了です。

デバッグ実行

VSCoreで拡張機能をインストールします。
今回はChromeを使用してデバッグ環境を作成します。Debugger for Chromeは非推奨になったようで、標準で？インストールされているJavaScript Debuggerを使用します。インストールされていない場合はインストールしてください。

デバッグタブを開きます。（Shift+Ctrl+D）
「launch.jsonファイルを作成します」を選択し、デバッガーの選択でNode.jsを選択します。

launch.jsonが作成されるので以下のように入力します。
webRootはソースがある場所を現在VSCodeで開いているディレクトリからのパスで入力してください。
また、vitaでアプリを作成していない場合はポートが5137ではない可能性がありますので変更してください。
nameはデバッグ名ですので任意の名前を入力してください。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "React Debug in Chrome",
            "url": "http://localhost:5173",
            "webRoot": "${workspaceFolder}/app/src",
            "sourceMaps": true
        }
    ]
}

これで準備は完了です。
以下のコマンドでreactアプリを実行します。

npm run dev

先ほどと同様デバッグタブを開き上に表示されたスタートボタンをクリックします。

するとChromeが自動的に立ち上がるはずです。

VSCodeにもどってブレークポイントを作成します。
アプリを作成した時からコードは作成されているのでconsole.logをブレークポイントとして使うために追加します。

function App() {
  const [count, setCount] = useState(0); 
  console.log("現在の count の値:", count);  //ここを追加

ブレークポイントを追加したらファイルを保存してChromeの画面に戻り、「Count is 0」をクリックします。

するとChromeから自動的にVScodeの画面に戻って、停止したことが確認できます。
これでデバッグ環境の作成が完了です。

以上です。デバッグは必須ですからね。拡張機能をうまく使ってやっていきましょう。

TechNode.js,React,VMware,VSCode