技術選定しよう！

技術選定は、重要で大変な作業ですよね。
適切な技術を選ぶためには、候補をしっかりとリストアップし、それらを比較し根拠を持って判断することが欠かせません。
そこでこの記事では、技術選定を行う際のポイントや役立つ情報について紹介しています。
それにより、担当システムに最適な選択肢を見つける手助けとなるでしょう。
ぜひこの記事を参考にして、より適切な技術選定ができるようにしてください！

今回選定する技術

今回選定するのは

「ビルドツール」　です！

webpack一択の時代は終わりを迎え、新たなツールが人気を集めています。

候補一覧

下記2つのツールをピックアップしました！

webpack
Vite

背景

比較する前に、今回記事に取り上げようと思った背景を説明いたします。
本題までスキップしたい方はこちらをクリックしてください。

筆者の職場では React × Rails6系で開発をしていたのですが、技術的負債の観点からRails7系へバージョンアップすることになりました。
従来Rails6系ではwebpackerというライブラリが標準搭載されておりました。webpackerは、簡単に言うと、Railsプロジェクトでwebpackをシームレスに導入できるようにするためのライブラリです。
しかし、2022年1月にwebpackerは廃止が発表され、今後は更新されないことが告知されました。さらに、Rails6系では標準搭載でしたが、Rails7系からはwebpackerが標準搭載から外れたのです。この2つの出来事により、Railsユーザは次なるビルドツールを選定しなければならない状況となったのです。

webpackerの廃止宣言から2年半が経過しておりますが、これからRails7にアップデートする方、webpackerを現在も使用している方にも参考となるように本記事を作成しました。
候補として上記2つのライブラリを挙げておりますが、Railsユーザの方はwebpackはwebpackerの後継である Shakapacker に、Viteは Vite Ruby に置き換えて本記事を読むとわかりやすいと思います！

なお、webpackのようなモジュールバンドラーがいまいちイメージできていない方は別途記事にしているのでご参照ください。

比較しよう！

ダウンロード数

npm trendsによると、
現時点（2024年7月現在）でのダウンロード数は上記グラフのようになっています。
Viteがリリースされた2020年から着実にViteの人気が高まっていることが読み取れます。

スター数

同じくnpm trendsによると、スター数は上記表のようになっています。
スター数だけ見るとすでにViteの方がwebpackを上回っております。

バージョン更新

両者とも高頻度に更新されております。
ここ半年の話で言うと、両者とも1ヶ月に1回以上更新されております。（2024年7月現在）

機能

下記記事で比較調査しておりましたので参考になると思います。
webpack で実現できるものの多くは Vite でも再現可能となっているようです。

特徴を知ろう！

webpack

さまざまな形式 のモジュールをバンドル !

Webpackはモジュールの依存関係を解決でき、CommonJSなどのさまざまな形式のモジュールをサポートしております

※ モジュールバンドラーの説明については別途記事にしています

Vite

超高速 なビルド !

Go 言語によって開発された esbuild を使用して依存関係の事前バンドルを行っており、JavaScript ベースよりも 10 倍から 100 倍高速です
ネイティブ ESM を行使してソースコードを提供しているので、バンドルなしにブラウザ読み込み可能です

HMR機能 対応 !

開発環境でコード修正した際に、ページを再読み込みしたり、アプリケーションの状態を損失することなく即座に更新および反映できます
StackBlitzが Vite をオンラインで試すサイトを公開しておりますので、実際に操作感を体験することもできます

まとめ

各ライブラリの特性を把握していただけましたでしょうか。
稼働環境によって最適な選択肢は異なるかもしれませんが、この記事が技術選定の参考になれば幸いです。

最後に私が選定したライブラリを紹介し、ここで本記事を締めくくります。

筆者が選定したライブラリ

ライブラリ

Vite（Vite Ruby）

所感

webpackからViteに換装し半年ほど経過しますが、特に不具合やバグは発生していません
高速なビルド、HMR機能によって開発効率が向上しました
- ローカル環境ビルド時間：約3分 → 約50秒
- ローカル環境コード反映時間：約30秒~1分 → 即時