Webpack?Create React App?No、Vite!! ~ ⑤viteによるReact環境構築とその技術的な凄み

前置き

まさかのAdventCalendar初日、過去シリーズの供養からです。すみません。

この「Webpack?Create React App?No、Vite!!」シリーズでは、5回に分けて以下の内容を扱います。

1. JSにおける「コンパイル」「バンドル」「ビルド」の理解
2. 表題のツールを用いたReact開発環境構築を通じて、1の内容を理解する
3. viteの技術的な凄みとその「爆速」ぶりを体感

現状以下のようなタイトルを想定しています。

①コンパイル、バンドル、ビルドを理解しよう

②webpackによるReact開発環境構築[バンドラ/コンパイラ編]

③webpackによるReact開発環境構築[開発サーバー/HMR編]

④Create React AppによるReact開発環境構築←前回

⑤ViteによるReact開発環境構築とその技術的な凄み←今回

かなり日が空いてしまいました。
さて、これまでコンパイルやビルドの理解から、webpackとCRAを使ってReactの環境構築を行ってきました。webpackによる環境構築では、コンパイラの設定から開発サーバの構築を行いましたが、実際に設定をしていくことで、コードを書き始めるまでの苦労が体験できたかと思います。一方でCRAを使った環境構築では、そのNoConfigっぷりを存分に体験しました。しかし、CRAはもういません。最近(というかもう2年くらい前から)ではViteというビルドツールがよく使われるようです。今回はそのViteが何者かというのと、ViteによるReact環境構築を行います。

5.1 Viteとは

Vite¹は2020年にEvan You氏によって発表されたフロントエンドビルドツールです。これまで扱ってきたwebpackやCRAといったプロダクトと基本的に同じ立ち位置と言っていいでしょう。ただ、先述のプロダクトとは違って、昨今のフロントエンド開発に欠かせないモダンな技術スタックを柔軟に兼ね備えつつ、これまで混沌としていたフロントエンドビルド周りの世界に光をさすような、非常に使い勝手の良いツールとして一躍人気者になっています。
Viteの公式サイトを訪れると以下のような特徴を掲げています。

• 瞬時にスタートするサーバ
  ネイティブ ESM により要求時にファイルが提供されるため、バンドルが不要です！

• 超高速なHMR
  アプリのサイズに関係なく高速を維持する HMR を提供します。

• 豊富な機能
  TypeScript、JSX、CSS などがすぐに使えるようにサポートされています。

• 最適化されたビルド
  設定済みの Rollup によるビルドによってマルチページおよびライブラリモードをサポートします。

• ユニバーサルなプラグイン
  開発とビルドの間で共有される Rollup と互換性のあるプラグインを提供します。

• 完全に型定義がされている API
  完全な TypeScript の型定義を備えた柔軟なプログラミング志向の API です。

ここでは主に最初の4つについて、少し詳しく見ていきます。

5.2 viteで使われる技術(主にrollupとesbuildについて)

第一回でバンドルはさまざまなJSファイルやその他assetを一つにまとめる作業だと言いました。このような作業はプロジェクトの規模が大きくなると、非常に時間のかかる作業になることもあるようです。
ところで、そもそもこのバンドルをする必要性が出てきたのは「JSがモジュール化した」からでした。モジュール化することで、変数のぶつかりを無くしたり分業できるようになりましたが、最終的にブラウザに読み込ませて使うためには、nodejsの環境上であらかじめ全ての依存関係を解決し、一つのJSファイルにまとめる必要がありました。
しかし、ES2015(ES6)によって標準化されたモジュール形式(ESM)が正式に各種モダンブラウザで動作するようになり、ブラウザ側で必要なモジュールを必要なだけ読み込むことができるようになりました。²
こうした動きに合わせて、そのモジュール形式をネイティブにサポートするようになったツールの筆頭が、バンドルツールとして知られるrollup³とビルドツールのesbuild⁴です。
viteは開発環境のビルドにesbuild、本番環境用のバンドルにrollupを採用しています。
特に開発環境で使用されているesbuildは、これまでjsで書かれることの多かったビルドツールとは一線を画し、Goで記述されており、その点もビルドパフォーマンスにかなり影響しているようです。

5.3 ViteによるReact開発環境構築

早速ですが、やっていきます。と言ってもかなり簡単です。

npm create vite@latest react-vite-app
Need to install the following packages:
  create-vite@5.0.0
Ok to proceed? (y)

yes

? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
❯   React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others

色々ありますね。今回はReactなのでReactを選びましょう。

? Select a variant: › - Use arrow-keys. Return to submit.
    TypeScript
    TypeScript + SWC
    JavaScript
 ❯  JavaScript + SWC

SWC(Speedy Web Compiler)という見慣れないものがありますが、これは最近イケてるRustで書かれたコンパイラです。Babelの代替品です。ひとまずこれを選択します。

Done. Now run:

  cd react-vite-app
  npm install
  npm run dev

指示通り、動かしてみます。

動きました。HMRも非常に高速で感動です。

最後に

この「Webpack?Create React App?No、Vite!! 」シリーズでは、自分のフロントエンドエコシステムキャッチアップの意味合いも含めて、少し馴染みのあるwebpack〜爆速Viteを体験してきました。今となっては、ちょっと前まで「開発環境立ててReactを触る」に行き着くまでなかなかに大変だったのに、ここ数年でViteのようなツールが生まれてきて、とてもハードルが下がったなと感じます。一方で、おそらくViteを使うにあたって少し凝ったことをしようとすると、必ずこれまで必要だった知識がいることになると思うので、そう言った時には今回の経験をもとに少し立ち止まって、落ち着いてコードを読みエラーデバッグできるようになりたいなと思いました。

1. https://ja.vitejs.dev/ ↩

2. ESModuleとはなんぞやという人は、「ES Modules入門
   JavaScriptでモジュールを使う時代」や「Native ESM時代とはなにか」をお勧めします。 ↩

3. https://rollupjs.org/ ↩

4. https://esbuild.github.io/ ↩