Viteを使ってReactプロジェクトを作成する方法

やりたいこと

最近話題のViteを使って、Reactプロジェクトを作成してみたいと思います。
今回は、簡単に環境を構築し、プロジェクトを立ち上げるまでの手順を紹介します。

環境構築

今回の環境

以下のバージョンで作業を進めます。

実際の作業手順

• まず、下記のコマンドを実行して、Viteのプロジェクト作成を対話形式で行います。

npm create vite

• コマンド実行後、いくつか質問されるので、以下のように答えてください。

• 質問に答えたら、Viteプロジェクトが生成されます。
  コンソールに下記が表示されていたらプロジェクトが生成されています。
  次に、コンソールの内容に従って作業を進めます。

• ディレクトリ移動

cd <プロジェクト名>

• ライブラリのインストール

npm install

• 開発サーバーの起動

npm run dev

• サーバー起動後、ターミナルに以下のようなメッセージが
  表示されるので、http://localhost:5173/にアクセスしてください。

• ブラウザでhttp://localhost:5173/にアクセスし、Viteの初期画面が表示されたら成功です！

Viteによって生成されたファイル構成の説明

Viteで生成されたプロジェクトには、Reactアプリを開発するための基本的な構成が用意されています。以下に主要なファイルとフォルダを紹介します。

my-vite-project/
├── node_modules/         # 依存パッケージがインストールされるディレクトリ
├── public/               # 静的ファイル（例：画像やアイコン）を置くディレクトリ
│   └── favicon.ico       # ブラウザのタブに表示されるアイコン
├── src/                  # 開発するReactコンポーネントやロジックが入るディレクトリ
│   ├── App.tsx           # メインのReactコンポーネント
│   ├── index.css         # グローバルスタイルを定義するCSSファイル
│   └── main.tsx          # Reactアプリのエントリーポイント
├── .gitignore            # Gitにコミットしないファイルを指定する設定
├── index.html            # アプリのHTMLテンプレート
├── package.json          # プロジェクトの依存関係やスクリプトが記載されているファイル
├── tsconfig.json         # TypeScriptの設定ファイル
└── vite.config.ts        # Viteの設定ファイル

各ファイルの詳細

• node_modules/：依存しているパッケージがここにインストールされます。
• public/：アプリで使用する画像やアイコンなどの静的ファイルを格納します。例えば、favicon.icoはブラウザのタブに表示されるアイコンです。
• src/：開発するコードのメインディレクトリで、App.tsxやmain.tsxなど、Reactのコンポーネントやロジックが含まれています。
  • App.tsx：メインのReactコンポーネントファイルです。ここに表示する内容を記述します。
  • main.tsx：Reactアプリケーションのエントリーポイントです。App.tsxをレンダリングします。
  • index.css：アプリ全体で使用するグローバルスタイルを定義するファイルです。
• .gitignore：Gitに含めたくないファイルやフォルダを指定します。例えば、node_modulesフォルダなど。
• index.html：アプリのテンプレートHTMLです。Reactがこのファイルに埋め込まれて動作します。
• package.json：依存しているパッケージやプロジェクトに関する情報、スクリプトなどが記述されています。
• tsconfig.json：TypeScriptの設定ファイルです。型チェックやコンパイルの設定が書かれています。
• vite.config.ts：Viteの設定ファイルです。プロジェクトごとのカスタマイズを行う場合に編集します。

感想

Viteを使った感想ですが、起動速度がWebpackと比べて非常に速く、開発体験がとても快適でした。
まだ使っていない方はぜひ一度試してみてください！