こんにちは、かつコーチです。
前回は、Reactが「UIを部品化するライブラリ」であることを解説しました。
今回は、実際に自分のパソコンでReactを動かせるようにする「環境構築」をやっていきます。
環境構築は最初のハードルになりがちですが、今のReact開発では驚くほどシンプルに始められるので安心してください。
Reactの環境構築ツールにはどんな選択肢があるか
主な選択肢と特徴
Reactの開発環境を作る方法は、実はいくつかあります。
| ツール | 特徴 |
|---|---|
| Vite | 起動・ビルドが高速。現在のReact学習・実務で主流 |
| Create React App（CRA） | 昔の定番だったが、2023年に公式が非推奨を表明し開発も停滞 |
| Next.js | サーバーサイドレンダリングなど高機能。中〜上級者向けフレームワーク |
なぜViteを選ぶのか
以前は「Create React App（CRA）」が定番の選択肢でしたが、現在はReactの公式ドキュメントでも新規プロジェクトの立ち上げにはCRAを推奨していません。
その代わりに広く使われているのがVite（ヴィート）です。
Viteはフランス語で「速い」を意味する言葉で、名前の通り開発サーバーの起動やファイルの変更反映が非常に高速です。
学習用途はもちろん、実務のプロジェクトでも標準的に使われているツールなので、最初にViteの使い方を覚えておけば実践にもそのまま活きます。
このシリーズでも、Viteを使って環境を作っていきます。
Node.jsのインストール確認
バージョンを確認する
Viteを使うには、まずNode.js（JavaScriptをパソコン上で動かすための実行環境）が必要です。
すでにNode.jsをインストール済みの場合は、ターミナルで次のコマンドを実行してバージョンを確認しましょう。
node -v
Viteを使うにはNode.jsの18系以降が推奨されています。
古いバージョンのままだと後のステップでエラーが出ることがあるので、バージョンが古い場合は公式サイトから最新の安定版をインストールし直しておいてください。
Viteでプロジェクトを作成する
プロジェクトの作成コマンド
Node.jsの準備ができたら、次のコマンドでReactプロジェクトを作成します。
npm create vite@latest my-react-app -- --template react-ts
コマンドの意味を分解すると次の通りです。
my-react-app：作成するプロジェクトのフォルダ名（好きな名前に変更可能）--template react-ts：ReactかつTypeScript構成のテンプレートを指定
react-tsを指定することで、最初からTypeScript（.tsx）で書ける環境が自動的にセットアップされます。
素のJavaScript（reactテンプレート）でも作成できますが、このシリーズではTypeScript統一の方針なので、必ずreact-tsを選んでください。
プロジェクトの起動
作成が完了したら、フォルダに移動して依存パッケージをインストールし、開発サーバーを起動します。
cd my-react-app
npm install
npm run dev
npm run devを実行すると、ターミナルに以下のようなURLが表示されます。
Local: http://localhost:5173/
このURLをブラウザで開くと、Reactのロゴが回転しているデフォルト画面が表示されれば成功です。
フォルダ構成を眺めてみる
最初に見ておくべきファイル
作成直後のプロジェクトには、いくつものファイルやフォルダが並んでいて、最初は戸惑うかもしれません。
まずは次の3つだけ押さえておけば十分です。
src/main.tsx：アプリ全体の起点となるファイルsrc/App.tsx：画面に表示する内容を書いていくメインのコンポーネントindex.html：ブラウザが最初に読み込むHTMLファイル
このシリーズで主に触っていくのはsrcフォルダの中身です。
他の設定ファイル（vite.config.tsやtsconfig.jsonなど）は、今の段階では「触らなくても動く」ものとして、いったん気にしなくて大丈夫です。
つまずきやすいポイント
npm run devがエラーで止まる
私が初めてViteでプロジェクトを作ったとき、npm run devを実行した直後にcommand not foundのようなエラーで止まってしまったことがあります。
原因を調べてみると、cd my-react-appでフォルダに移動する前に、プロジェクト作成前のフォルダのままコマンドを打っていたことが分かりました。
❌ Before：フォルダ移動を忘れたまま実行してしまう
npm create vite@latest my-react-app -- --template react-ts
npm install
npm run dev
プロジェクトの外側でnpm installやnpm run devを実行しても、対象のpackage.jsonが見つからずエラーになります。
✅ After：必ずcdでプロジェクトフォルダに移動してから実行する
npm create vite@latest my-react-app -- --template react-ts
cd my-react-app
npm install
npm run dev
たった1行のcdの抜け漏れですが、エラーメッセージだけを見ると原因が分かりづらいので、まずは「今どのフォルダにいるか」を確認する癖をつけておくと安心です。
ターミナルでpwd（現在地を表示するコマンド）を打つ習慣をつけておくと、こういったつまずきを未然に防げます。
ポート番号がすでに使われている場合
他のプロジェクトの開発サーバーがすでに起動していると、5173番のポートが使われていて別のポート番号（5174など）に自動で切り替わることがあります。
エラーではなく仕様なので、ターミナルに表示されたURLをそのまま使えば問題ありません。
まとめ
この記事のポイント
- Reactの環境構築には、現在は高速な「Vite」を使うのが主流
npm create vite@latestコマンドに--template react-tsを指定すればTypeScript構成で始められる- 作成後は
cdでプロジェクトフォルダに移動してからnpm install・npm run devを実行する - 最初は
src/main.tsx・src/App.tsx・index.htmlの3つだけ押さえれば十分
次に読むべき記事
環境が整ったところで、次回はReact特有の書き方である「JSX」の基本を解説します。
→ 次の記事：JSXの基本：HTMLのようでHTMLじゃない書き方