Windows環境でReact開発環境を構築した時の手順についてまとめる。

手順

nvmのインストール

以下のサイトからnvm-setup.exeをダウンロードする。

"I accept the agreement"を選択して、以降は"Next"を選択し続ければよい。

Node.jsのインストール

先ほどインストールしたnvmを使用してNode.jsをインストールする。
バージョンは以下サイトでLTSのものを選択する。

nvm install v20.15.0

続いて使用するバージョンを指定する。

nvm use 20.15.0

インストールがされていることを確認する。併せてnpmについても-vオプションでインストールされていることを確認する。

node -v
npm -v

プロジェクト作成

ここではviteを使用して環境を構築する。
以下コマンドでアプリケーションの作成を行う。

npm create vite@latest

対話型でプロジェクトの作成を行うことができる。
プロジェクト名を入力し、使用するフレームワークと言語を選択する。

> npx
> create-vite

√ Project name: ... first-react-app
√ Select a framework: » React
√ Select a variant: » TypeScript

Scaffolding project in D:\hoge\first-react-app...

Done. Now run:

  cd first-react-app
  npm install
  npm run dev

この時点でカレントディレクトリの直下に入力したプロジェクト名のフォルダが作成されている。
cdコマンドでディレクトリを移動し、以下のコマンドを実行する。
installコマンドを実行することで、依存関係にあるパッケージを取得することができる。
パッケージの取得が完了したら、npm run devコマンドを実行してローカル環境を立ち上げる。

npm install
npm run dev

以下の通り表示されればOK。

  VITE v5.3.1  ready in 471 ms

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

localhost:5173をブラウザで開くと、それっぽい画面が表示され動作していることが確認できる。

まとめ

nvmとviteを用いたReact開発環境の構築手順についてまとめた。
想像していたよりもはるかに手軽で素早く環境構築することができた。