はじめに
本記事ではViteを使い、プロジェクトを素早くセットアップするための備忘録としてまとめました。
以下の技術スタックを前提にしています。
Node.js: v22
フレームワーク: React
ビルドツール: Vite
言語: TypeScript + SWC
プロジェクトの初期構築
Viteプロジェクトの作成
npm create vite@latest
コマンドを実行すると、対話式で設定を求められます。今回は、以下のように選択します。
・Prioject name → .
・Select a framework → React
・Select a variant → TypeScript + SWC
私はよくプロジェクトディレクトリを先に作成してからcreate viteコマンドを実行することが多いので、プロジェクト名を指定する際に、ピリオド（.）を入力して、そのディレクトリ内に直接プロジェクトファイルを生成しています。
必要なライブラリを追加
最低限必要なライブラリは先に入れておきます。その他のライブラリは必要になり次第都度追加します。
ルーティング（React Router）
npm install react-router-dom@latest
状態管理（Zustand）
npm install zustand@latest
API通信（Axios）
npm install axios@latest
ローカル環境での確認
依存関係のインストール
npm install
開発サーバーの起動
npm run dev
サーバーが起動すると、ターミナルに以下のようなURLが表示されます。
http://localhost:5137/
このURLをブラウザで開いて以下のReactの初期画面が表示されれば完了です。
本記事の初期構築をベースに、次回以降の記事で各ライブラリの詳しい使い方を解説していきます。
おわりに
本記事では、React + Viteのプロジェクトを素早くセットアップする方法をまとめました。
本記事の初期構築をベースに、次回以降の記事で各ライブラリの使い方などを解説していますので、気になる記事があれば読んでみてください。