通常のHTML、CSS、JavaScriptを使った小さなプロジェクトと異なり、Reactで新しいプロジェクトを始めるには、いくつかの初期設定が必要です。しかし、自分で1つずつ設定を行う代わりに、これらの作業を自動で行ってくれる便利なツールがあります。
Viteとは？
Vite（ヴィート） は、フランス語で「速い」という意味の名前を持つ、高速な開発体験を提供するビルドツールです。Reactはもちろん、VueやSvelte、またはバニラJavaScriptでも利用できます。
Viteの特徴は、不要な設定を省いて、Reactプロジェクトの立ち上げを非常にシンプルかつ迅速にしてくれる点です。
ViteでReactプロジェクトを作成する手順
1. ターミナルを開く
- Windowsの場合：コマンドプロンプトまたはPowerShell
- Macの場合：ターミナルアプリ
2. プロジェクト作成コマンドを実行
npm create vite@latest my-react-app -- --template react
このコマンドは、Reactテンプレートを使用した新しいViteプロジェクトをmy-react-appという名前で作成します。
作成後は、以下のようなファイル構成が生成されます：
my-react-app/
├── public/
├── src/
├── .gitignore
├── eslint.config.js
├── index.html
├── package.json
├── README.md
└── vite.config.js
必要最低限のファイルだけが含まれており、すぐに開発を始めることができます。
3. プロジェクトの依存関係をインストール
プロジェクトディレクトリに移動して、以下のコマンドを実行します：
cd my-react-app
npm install
-
cd my-react-app: プロジェクトディレクトリに移動します。 -
npm install: ReactやReactDOMなど、プロジェクトに必要な依存パッケージをインストールします。
このとき、node_modulesフォルダが生成され、すべての依存ライブラリが格納されます。
4. 開発サーバーを起動して確認
以下のコマンドでローカルサーバーを起動します：
npm run dev
ブラウザで http://localhost:5173/ にアクセスすると、Viteのスターターテンプレートが表示されます。
※開発サーバーを終了したいときは、ターミナル上で CTRL + C を押します。
5. App.jsxを編集して開発開始！
srcフォルダ内にある App.jsx がメインのReactコンポーネントです。このファイルを編集し、保存するだけでブラウザが自動でリロードされ、変更が反映されます。
まとめ
- ViteはReactプロジェクトのセットアップを高速かつ簡単にしてくれるツール
-
npm create vite@latestコマンドで即座に新しいReactプロジェクトを作成可能 - 最小限の構成で無駄がなく、学習や開発を始めるのに最適
-
npm run devでローカルサーバーを起動し、リアルタイムで変更を確認できる
Viteを活用することで、よりスムーズにReactの開発に取り組むことができます。これから本格的にReactでアプリケーション開発を始めたい方には、Viteの導入を強くおすすめします！