React + Viteの環境構築手順
この記事は、エンジニア初心者の筆者が、自身の学びを記録するためにまとめたものです。Viteを活用してReactの開発環境を構築する手順について解説しています。今回は、Node.js v20.10.0を使用し、TypeScript + SWC構成でセットアップを行います。vitest,eslint,prettier,husky,tailwindcss,github actionsについては他の記事で書いていきます。万が一内容に誤りがありましたら、何卒ご容赦ください。
1. 現在の作業ディレクトリを確認
まず、pwdで作業中のディレクトリを確認します。必要に応じてcdコマンドで作業したいディレクトリへ移動します。
2. Node.jsのバージョンを確認
node -vで開発に使用するNode.jsのバージョンを確認します。
今回はNode.js v20.10.0を使用します。必要に応じてnvmを使用してバージョンを切り替えます。
nvm use 20.10.0
3. Viteを使用してReact環境を構築
以下のコマンドで、新しいReactプロジェクトをViteで作成します。
npm create vite@latest <プロジェクト名>
・Frameworkの選択
今回はReactを選択します。
・Variantの選択
今回はTypeScript + SWCを選択します。
（SWCとは、Rustベースの高速なWebプラットフォームで、ビルド速度を向上させます。）
SWCについて
4. プロジェクトディレクトリに移動
cdで作成したプロジェクトのディレクトリに移動し、VS Codeで開発を開始する場合はcode .を実行します（環境変数codeが有効な場合）。もしcodeが使えない場合は、直接ファイルをエディタで開いてください。
5. 依存関係をインストール
新しいプロジェクトでは、node_modulesがまだインストールされていません。以下のコマンドを使用してインストールします。
npm install
6. 開発サーバーを起動
npm run dev
起動後、ターミナルに表示されるローカルホストのURLをブラウザで開きます。
まとめ
以下の手順をもう一度振り返ります。
現在の場所を確認pwdし、適切なディレクトリに移動cd。
Node.jsバージョンを確認・切り替えnode -vとnvm use。
ViteでReactプロジェクトを作成npm create vite@latest。
必要な依存関係をインストールnpm install。
開発サーバーを起動してローカルホストで確認npm run dev。
⚠️失敗談としては、
・プロジェクト作成後に依存関係であるnode_modulesがインストールされておらず、npm run devの実行時にエラーが発生した。
・安定版ではないバージョンのNode.jsを使用したことでエラーが生じた。
などがありました。
Discussion