はじめに
この記事では、Viteを使ってReactの開発環境を構築する方法を解説します。従来のCreate React Appと比べて、より高速で軽量な環境を5分程度で構築できますよ。
この記事で学べること
- Viteを使ったReactプロジェクトの作成方法
- 開発サーバーの起動と確認方法
- プロジェクトの基本構成
前提条件
環境構築を始める前に、以下がインストールされているか確認しましょう。
Node.jsのインストール確認
ターミナルで以下のコマンドを実行してください。
node -v
バージョン番号が表示されればOKです。表示されない場合は、Node.js公式サイトからインストールしてください。
npmの確認
npm -v
Node.jsと一緒にnpmもインストールされているはずです。バージョン番号が表示されれば準備完了です。
Viteとは
Viteの特徴
- 開発サーバーの起動が非常に高速
- ホットモジュールリプレースメント（HMR）による快適な開発体験
- 本番環境向けの最適化されたビルド
- シンプルな設定
なぜViteを使うのか
従来のCreate React Appと比較して、以下のメリットがあります。
- 開発サーバーの起動が圧倒的に速い（数秒で起動）
- ファイル保存時の反映が瞬時
- メンテナンスが活発で、モダンな技術スタックに対応
環境構築の手順
それでは、実際にReactの環境を構築していきましょう。
1. プロジェクトの作成
ターミナルで以下のコマンドを実行します。
npm create vite@latest my-react-app
my-react-appの部分は、任意のプロジェクト名に変更できます。
2. 対話形式での設定
コマンドを実行すると、いくつかの質問が表示されます。
フレームワークの選択
? Select a framework:
Vanilla
❯ React
Vue
...
矢印キーで「React」を選択してEnterを押します。
言語の選択
? Select a variant:
❯ JavaScript
TypeScript
...
今回は「JavaScript」を選択します。TypeScriptを使いたい場合は「TypeScript」を選んでください。
Rolldownの選択について
? Use rolldown-vite (Experimental)?
○ Yes
● No
Rolldownは実験的な機能のため、「No」を選択することをおすすめします。これは次世代の高速バンドラーですが、まだ開発中のため安定性を優先して通常版を使いましょう。
3. 依存関係のインストールと起動
最新のViteでは、依存関係のインストールと開発サーバーの起動を自動で行うか確認されます。
? Install with npm and start now?
❯ Yes
No
「Yes」を選択すると、必要なパッケージのインストールと開発サーバーの起動が自動で実行されます。
以下のような表示が出れば成功です。
✔ Scaffolding project in /Users/your-name/my-react-app...
✔ Installing dependencies with npm...
added 156 packages, and audited 157 packages in 25s
found 0 vulnerabilities
✔ Starting dev server...
VITE v7.2.2 ready in 489 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
各メッセージの意味
-
Scaffolding project: プロジェクトのファイル構造を作成 -
Installing dependencies: 必要なパッケージをインストール -
found 0 vulnerabilities: セキュリティ上の問題なし -
ready in 489 ms: 開発サーバーが起動完了
4. ブラウザで確認
ブラウザで以下のURLにアクセスします。
http://localhost:5173/
下記のような画面が表示されれば、環境構築は成功です。
画面に表示されているカウンターボタンをクリックして、動作を確認してみましょう。
プロジェクト構成の説明
作成されたプロジェクトの主要なファイルとフォルダを見ていきます。
my-react-app/
├── node_modules/ # インストールされたパッケージ
├── public/ # 静的ファイル
├── src/ # ソースコード
│ ├── App.jsx # メインのReactコンポーネント
│ ├── main.jsx # エントリーポイント
│ └── ...
├── index.html # HTMLテンプレート
├── package.json # プロジェクト設定
└── vite.config.js # Viteの設定ファイル
重要なファイル
-
src/main.jsx: アプリケーションのエントリーポイント。Reactをマウントする起点 -
src/App.jsx: メインコンポーネント。ここを編集してアプリを開発 -
vite.config.js: Viteの設定ファイル。必要に応じてカスタマイズ可能
よくあるトラブルと対処法
環境構築中に遭遇する可能性のある問題と解決方法です。
Node.jsがインストールされていない
エラーメッセージ
command not found: npm
対処法
Node.js公式サイトからLTS版をダウンロードしてインストールしてください。インストール後、ターミナルを再起動して node -v で確認します。
ポート5173が使用中
エラーメッセージ
Port 5173 is in use, trying another one...
対処法
Viteは自動的に別のポート（5174など）を使用します。表示されたURLにアクセスすれば問題ありません。
特定のポートを使いたい場合は、以下のコマンドで起動できます。
npm run dev -- --port 3000
開発サーバーの停止方法
開発サーバーを停止したい場合は、ターミナルで Ctrl + C を押します。
再度起動する場合は、プロジェクトのディレクトリで以下を実行します。
npm run dev
まとめ
Viteを使ったReactの環境構築は、わずか数分で完了します。高速な開発サーバーとホットリロード機能により、快適な開発体験が得られますね。
次のステップ
-
src/App.jsxを編集して、自分のコンポーネントを作成 - CSSを使ったスタイリング
- 複数のコンポーネントを作成して、コンポーネント間の連携を学ぶ
環境構築ができたら、さっそくReactの開発を始めてみましょう。