Reactのアプリを作るぞ！
ってなったら、あなたはまず何をしますか？
そう、「環境構築」ですね。
その環境構築の中でも今回扱うのが「ビルド」です！
ReactとかTypeScript、Node.jsって、そのままの状態ではブラウザで動きません（= ブラウザで動くのは素のままのJavaScriptです）。それを動くようにするためにいざ、変換。これが「ビルド」です。
代表的な3つのビルドシステム
1. Create React App
- "Create React App"（CRA）は2022年4月を最後に更新が止まっています。（少し前の記事や教材でよく見かけるシロモノですね！もちろん使えますが、警告がこちらを覗いています...）
2. webpack
- "webpack"、React開発環境のデファクトスタンダードですね！ ビルドツールの使用率では依然としてトップを走り続けています。
- CRAではひとつのパッケージ（react-scripts）にオールインワンになっていた様々な設定を、小回りを利かせてセットアップできます。CRAがAT（オートマチック）なら、webpackはマニュアルですね。
3. Vite
- "Vite" はフランス語の「vite（速く）」を由来としている通り、ビルドの高速さを売りとしていて、その開発効率からグングンとシェアを伸ばしています。
Viteで環境構築を始めましょう
ここからサーバーの起動まで、なんと「1分」で終わらせることができます！さぁスタートです！
1. Viteプロジェクトを作成開始
ターミナルで以下のコマンドを実行します。
npm create vite@latest
すると以下のようにプロジェクトディレクトリの名前を聞かれるので、特にこだわりがなければそのままEnterを押下しましょう。
2. フレームワーク（ライブラリ）を選択
今回は「React」を選択しましょう。
3. TypeScript, SWC, Remixを使うか選択
今回は「TypeScript」を選択します。
4. 作成完了 / 表示の通りにコマンドを実行
上記のように表示されるので、3つのコマンドを順に実行しましょう。
cd vite-project
npm install
npm run dev
5. localhost:xxxxへアクセス
生成されたアドレスへアクセスすると、このように基本となるプロジェクトが完成しました！
終わりに
今回はビルドシステム「Vite（ヴィート）」についてご紹介してきました。
とりあえずサクッとフレームワークを使う練習をしたい！という場合に、この1分環境構築は最適ですし、実際の開発においてもサーバーが立ち上がる速さはストレスフリーなことこの上ないです。
webpackとVite、シチュエーションに応じてどちらの環境構築にも慣れていきましょう！
Discussion
自分でアプリ作る時にはVite使ってみます🌟
ぜひぜひ！サクサク作れます！🙌
でも僕はwebpackの取り扱いが難しいところ好きなので忘れ去らないであげてくださいね...！