React + Vite で開発環境を作ってみた

2022年1月21日時点のWindows10での情報です。

新しいReactプロジェクトの開発ではViteを使ってみたいと思い、React + Viteでプロジェクトを作成してみました。

Vite(ヴィート）とは

Vue.jsの開発者Evan You氏が中心となって開発している、フロントエンドのビルドツールです。
Reactではwebpackが定番のビルドツールですが、webpackを使った開発用ビルドよりも高速にビルドできるため、開発効率が大幅にアップするようです。

Vite 公式サイト：
https://vitejs.dev/
Vite GitHub：
https://github.com/vitejs/vite

なぜ早くなるかについては下記のサイトで丁寧に解説されています。
https://zenn.dev/sykmhmh/articles/ff09bea2cf7026
https://tech.recruit-mp.co.jp/front-end/post-21250/

React + Vite環境の作成

Reactで簡単にプロジェクトを作成するには「create-react-app」コマンドでプロジェクトを作成すると思いますが、このコマンドで作成したプロジェクトは React + webpack環境となります。
React + Vite環境のプロジェクトを作成する場合は、「create-react-app」コマンドは使用しません。

Node.jsはインストール済みの状態とします。
node.js v16.13.2

下記のコマンドで、React + viteプロジェクトを作ります。
2022/05/11 追記:コマンドが init から create に変わったようです。

- npm init vite
+ npm create vite

プロジェクト名を入力します。

「react」を選択します。

typescriptであれば「react-ts」を選択します。

ターミナルに記載されているままを実行します。

プロジェクトフォルダに移動

cd <プロジェクト名>

依存ライブラリをインストール

npm install

開発用ビルド

npm run dev

「http://localhost:3000」にアクセスすると、以下のようなページが表示されます。

以上とても簡単でした。

2022/05/11 追記
すべてまとめて実行する場合は、下記のコマンドになります。

npm create vite myappname -- --template react-ts

create-react-appコマンドを使用したプロジェクト作成よりも早いです。

create-react-appコマンドで作成したプロジェクトと、React＋Viteプロジェクトの開発ビルドを比較すると、React＋Viteプロジェクトの開発ビルドは体感でわかるほどに速いです。
何もコンポーネントを追加していない状態でこれほどの差がでるとは驚きです。