先生と生徒の会話形式で理解しよう

生徒

「最近のRailsって、アセット管理にwebpackerじゃなくてesbuildやViteを使うって聞きました。どういうことですか？」

先生

「とてもいい質問ですね。これはRailsの開発方法が進化してきたことに関係しています。アセットとは、CSSやJavaScriptなどのファイルのことです。順番に説明していきますね。」

生徒

「なるほど。でも難しそう…初心者でもわかりますか？」

先生

「もちろんです！今回は概念編なので、コードは最小限にして、全体像を丁寧に解説していきましょう。」

1. アセットとは？

Railsのアプリケーションには、画面の色・配置・動きといった「見た目」をつくる役割のファイルが存在します。たとえば、文字の大きさやボタンの色を調整するCSS、クリックしたときに動きを付けるJavaScript、画像やアイコンなどの素材ファイルもすべてアセットに含まれます。

特に初心者の方は「画面を飾るための材料」とイメージすると理解しやすいでしょう。アセットはアプリの体験に直結するため、どのように管理するかがとても大切です。

たとえば次のような簡単なコードだけでも、アセットがあるかないかで見た目がまったく変わります。


<!-- CSSアセットでボタンの色を変える例 -->
<style>
  .my-btn {
    background-color: #3498db;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
  }
</style>

<button class="my-btn">クリックしてね</button>

Railsでは、これらのファイルを効率よくまとめたり読み込んだりするために「アセット管理」が用意されています。どのツールを使うかで開発体験が変わるため、まずアセットの役割を知っておくことが、フロントエンド開発の第一歩になります。

2. webpacker時代のアセット管理

以前のRails（特にRails 6）では、webpackerというツールがアセット管理の中心でした。webpackerは、JavaScriptやCSSを1つのファイルにまとめたり、圧縮して読み込みを高速化したりと便利な仕組みを提供していました。フロントエンドを本格的に扱うアプリでは強力な味方だったと言えます。

ただしその一方で、webpackerは設定ファイルが多く、初心者にとっては「どこを触ればいいのか分からない」という状態になりやすいツールでもありました。特に、モジュールの依存関係や、ビルド時に発生するエラーの内容が分かりにくいという声も多く、導入のハードルが高いと感じる人も少なくありませんでした。

たとえば、webpackerでJavaScriptを使う場合は、次のようなコードをapp/javascript/packs/application.js に書いて管理していました。


// webpacker時代のシンプルな例
console.log("Hello from webpacker!");

このファイルはビルド工程を経てブラウザで表示されますが、その仕組み自体が初心者には少し複雑で、理解するまでに時間がかかることもありました。そのため、「もっと軽くて分かりやすいツールがほしい」というニーズが高まり、後にesbuildやViteのような選択肢が生まれていくことになります。

3. なぜwebpackerから移行するの？

webpackerは、当時のRailsにとってとても頼りになるアセット管理ツールでしたが、長く使われる中でいくつかの「しんどさ」も見えてきました。特にこれからRailsを学ぶ初心者や、久しぶりにRailsに触るエンジニアにとっては、設定や仕組みの複雑さが負担になりやすい部分です。

代表的な課題としては、次のようなものがありました。

設定ファイルが多くて初心者には難しい：webpack.config.js など、JavaScript側の知識も必要になる。
ビルド（まとめる作業）が遅い：ちょっとした修正でも時間がかかり、開発のテンポが落ちてしまう。
フロントエンドのトレンドとズレてきた：ReactやVueなどの最新ツールとの連携方法が、だんだん古くなってきた。

たとえば、webpackerを使っているプロジェクトでは、アセットをビルドするために次のようなコマンドを実行していました。


# 開発環境でのビルド例
bin/webpack

# 本番用にまとめてビルドする例
RAILS_ENV=production bin/webpack

小さな変更をして画面を確認したいだけなのに、このビルド処理に時間がかかると「ちょっと待ち時間が長いな…」と感じてしまいます。これが1日に何度も積み重なると、開発体験そのものが重く感じられてしまうのです。

こうした背景から、「もっと設定がシンプルで、ビルドも速く、モダンなJavaScriptと相性の良いツールにしたい」という流れが生まれました。その結果、より軽量で分かりやすいesbuildや、開発体験に特化したViteが、次世代のアセットビルドツールとしてRailsの世界でも選ばれるようになってきたのです。

4. esbuildとは？

esbuild（イーエスビルド）は、Rails 7で一気に注目を集めたアセットビルドツールで、「とにかく速い」という点が最大の特徴です。Go言語で作られているため処理がとても軽く、JavaScriptやCSSをまとめたり圧縮したりする作業が驚くほど短時間で終わります。

webpackerでは数秒かかっていたビルドも、esbuildなら一瞬で終わることが多く、開発中のストレスが大幅に減ります。設定もシンプルなので、プログラミング初心者でも「どこを触れば動くのか」がつかみやすい点もメリットです。

たとえば、esbuildで変換される JavaScript のイメージは次のようなものです。


// esbuildで処理される簡単なスクリプト例
const message = "esbuildは本当に速い！";
console.log(message);

このようなコードをesbuildがまとめて最適化し、ブラウザで素早く読み込める形に変換してくれます。Rails 7以降で標準的に採用される背景には、「設定の分かりやすさ」「ビルド速度の改善」「扱いやすさ」という3つのポイントがあります。特に、初心者にとって負担になりがちな設定作業が少ないため、最初のアセット管理ツールとしても適しています。