【React】Viteを使って爆速で環境構築を行う

今回は、ViteでReactの環境を構築する方法について書きました。内容はいろんなところの焼き増し記事になります。なので、自分の考えを多めに書いておきます。それでも短くなってしまったので、軽めに誰かの手助けになればよいなと思います。ひとまず伝えたいことはCRAよりはViteやで！！

ご挨拶

どもども！寒くなったり熱くなったりして、絶妙に体調が悪くなってきたような気がします。ポータブル扇風機を買うか悩みますね。扇風機の発明は偉大ですよね。来週には連続休暇で10日ほど休む予定なので、そこで体調が悪化しないように気を付けるしかないですね。

さて、今回は「とりあえずReactの環境構築をしよう」になります。社内の勉強会で、crete-react-app（移行：CRA）の方法が訴状に上がっていました。なぜCRAがダメなのか？というお話は、いろんな方が言及しています。「React初めて勉強します！」という方は、何で環境構築を作成するかという話は、気にしなくて大丈夫です。

今回のシナリオとしては「ViteでReactの環境構築を行う」となります。

Viteで環境構築

Viteで環境構築を行うためには、Nodeの環境が必要になります。あとは以下の好きなコマンドを打ちこんでもらえれば、CLIでテンプレートの設定まで行えます。

# npm
npm create vite@latest

# yarn
yarn create vite

# pnpm
pnpm create vite

以下にCLIのイメージを置いておきます。

CLIを叩くだけで、画面に従って入力すれば環境が作成されます。

なぜ？CRAじゃなくてViteなのか？？

CRAでもViteでも、コマンドを叩けば環境が作成されます。「CRA vs Vite」と検索すると、ほかの人の言及を覗くすることができます。CRAは内部でWebpackを使用しているので、Build Toolsに言及して検索するのもアリです。

とりあえず、ざっくりとまとめると「小さいプロジェクトだとめちゃ早い！」です。CRAよりも早いよ！というところだけ、押さえておけば良いですね。

CRAは、Reactを作ったFacebookが出しているので歴史がすごーく長いです。そのため周辺システムが充実しています。じゃあCRAが良いじゃないか？って思いますよね。とりあえず、公式のGitHubでも見ますか。更新は、2022年4月13日が最後になります。Issueは2023年10月時点で1.7kあります。ついでに公式のリファレンスからも削除が決定されました….

一方で、ViteはCRAの後続になります。公式のGitHubを覗いてみましょう。更新は、2023年10月時点で、先週（last week）になっているので継続的にメンテされています。issueも435とびっくりする数字ではないですね。まぁIssueに関しては、解決済みの数字を見るほうが確かなのですが良いでしょう。

なので、React公式の言及とCRAの現状を見ると、小さいプロジェクトでViteを使うことは良いのでは？というさぼり結論を出しておきます。

Reactを勉強する上で最低限の環境構築って？

あまりにも短いので、Reactを勉強する上で対応したほうが良いことについて書いていこうと思います。Reactの特徴としては、コンポーネント単位で話が進んでいきます。コンポーネントとデザインがセットで、話が進んでいくことがよくあります。コンポーネントの動作を確認したいがために、ページを作成するといったことがあります。

その辺の問題点を解消するのが「Storybook」になります。こちらを使用すると、コンポーネント単体での確認作業をすることができます。以下がイメージになります。

この辺りの環境までセットで作ることが良いと思います。なぁ～にが素晴らしいか、StorybookはViteのセットアップをするために記事があります。この記事に沿って環境を作れば、一発で動きます。

コンポーネントだけを作るのが楽しい夜があなたにも来るかもしれません。

オレオレ環境構築はGitHubにあげとこうぜ！って話

ちょっとしたコラムパートになります。フロントの技術は移り変わりが早いので、時間が経てば環境が使えなくなります。現時点で使える環境を作って、それを保存しておくと新しいプロダクトの時に重宝します。

特にReactだけを使う場合は、本筋と異なる部分で実装しなければならないものがあります。思いつく限り下に書いておきます。

• ディレクトリ構成
• 環境変数設定
• ESLint＋Prettierの設定
• SPAのルーティング
• 定数設定
• Tailwindの設定

ここまで設定して、GitHubに挙げておくと環境構築が爆速で終了します。Dockerでセットアップまで自動化しておけば常に最新版になります？。とりあえず、僕が作った環境を置いておきます**【vite-storybook-template】。**

終わりに

ここで面白い話をしておきます。React公式の見解では、React単体でプロジェクトを構成するのは非推奨なようです。ページの中を探索して、やっとでViteのリンクが覗けます。公式激推しのNext.jsを使用することも一つの選択肢になりますね。

すご～く久しぶりに環境構築系の記事を作成しました。いろんなところで記事は書いてあるので、自分なりの観点を交えて書いてみました。過去記事も載せておきます。

• シンプルなTailwind環境構築を効率的に改革 Browsery Sync

About 龍：Ryu 73 Articles

2022年入社で主にフロントエンドの業務でTailwindと遊ぶ日々。お酒とうまいご飯が好きで、運動がちょっと嫌いなエンジニアです。しゃべれるエンジニアを目指しておしゃべりとブログ執筆に注力中（業務もね）//

Twitter YouTube