React.jsの環境構築（Windows）

Windows11でのReact.jsの環境構築方法です。
サンプルプロジェクトの作成までをサポートしています。

なお、作成ツールにはCreate React AppではなくViteを、コンパイラーにはBabelではなくSWCを選択しています。

1 Node.jsのダウンロードとインストール
2 Reactプロジェクトの作成
- 2.1 Viteによるプロジェクト作成
3 作成したサイトへのアクセス
4 最後に

Node.jsのダウンロードとインストール

React.jsを動作させるためには、Node.jsが必要です。

Node.jsとは、サーバーサイドでJavaScriptを実行するためのプラットフォーム、実行環境であり、様々なツールを備えています。

Node.jsをインストールする方法はいくつかありますが、本記事では2種類の方法を提示します。
ご自身の学習方法に適したいずれかの方法を選択いただき、実施してください。

方法1：nvm-windowsを使ったインストール

早いバージョンアップに合わせて環境を切り替えて使いたい方は、nvm-windowsを使用したインストールがお勧めです。

nvm-windowsでのインストールを実施される場合は、こちらのリンク先を参照ください。

方法2：インストーラーを使ったインストール

インストーラーを使ったインストールを実施される場合は、こちらのリンク先からNode.jsのLTSバージョンをダウンロードいただき、インストールまで進めてください。

LTSとは、Long Term Supportの頭文字をとった略で、長期サポートのバージョンを指します。

2025年3月時点での最新LTSは、Node.js v22.14.0 です。

インストールの確認

コマンドプロンプトを開き、次のコマンドで、Node.js本体が正常にインストールされているかを確認します。

node -v

結果として、以下のようにインストールしたNode.jsのバージョンNo.が表示されれば成功です。
※ バージョンはダウンロードした時期により変わります。

v22.14.0

続いて、次のコマンドで、NPM（Node Package Manager）が正常にインストールされているかを確認します。

npm -v

結果として、以下のようにインストールしたNPMのバージョンNo.が表示されれば成功です。
※ バージョンはダウンロードした時期により変わります。

10.9.2

Reactプロジェクトの作成

以前は、「create-react-app」を使用するのが一般的でしたが2025年1月に非推奨となり、2020年にリリースされたViteの人気が高まり情報も増えてきました。

そこで、当ブログでのReact.js開発ではViteを使用します。

Viteによるプロジェクト作成

コマンドプロンプトで、次のコマンドを実行してください。

太字マーカーのhello-appは、プロジェクト名です。自分で決めた任意の文字列を使用できます。
初めて作成する場合は「hello-app」のままでOKですが、別のプロジェクトを作成する際には適宜変更してください。

また、Viteのバージョンを指定してプロジェクトを作成する場合は、「vite@latest」の「latest」の部分をバージョンNo.に置き換えてください。

npm create vite@latest hello-app

実行すると、以下のメッセージが表示されるので、「y」を入力して進めます。

Need to install the following packages:
create-vite@6.2.0
Ok to proceed? (y)

すると、フレームワークの選択に進みます。

? Select a framework: » - Use arrow-keys. Return to submit.
>   Vanilla
    Vue
    React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Angular
    Others

方向キーの↑↓でフレームワークを選択できますので、「React」を選択し、エンターしてください。

次の選択肢が表示されます。

? Select a variant: » - Use arrow-keys. Return to submit.
>   TypeScript
    TypeScript + SWC
    JavaScript
    JavaScript + SWC
    React Router v7 ↗

「JavaScript + SWC」を選択し、エンターしてください。

SWCとは、新しいJavaScriptの機能や拡張機能（JSXなど）を現在のブラウザや環境でサポートされているJavaScriptバージョンに変換するツール（コンパイラー）です。

類似ツールのBabelよりも新しく、特徴としては、Rustというプログラミング言語で開発されており、非常に高速です。

プロジェクト作成の最後に、以下のメッセージが表示されます。

Scaffolding project in c:\work\react\hello-app...

Done. Now run:

  cd hello-app
  npm install
  npm run dev

npm notice
npm notice New major version of npm available! 10.9.2 -> 11.1.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.1.0
npm notice To update run: npm install -g npm@11.1.0
npm notice

「Done. Now run:」と言っているので、その下にある3つのコマンドを順次実行していきます。