RailsのJavaScript管理方式の変遷

Rails の JavaScript 管理方式の変遷

Webpacker → Importmap / ESBuild / Bun / Vite

■ Webpacker からの脱却

Rails 6 までは Webpacker が標準の JavaScript 管理方式だったが、以下の理由から Rails 7 で非推奨となった。

• Webpack の設定が複雑
• Node / npm 依存が強い
• ビルドが重く遅い
• Rails が求める「シンプルさ」から離れた

Rails 7 以降は JavaScript 管理を選択制に変更した。

---

■ Rails 7 以降の JavaScript 管理ツール

● Importmap（Node 不要）

ブラウザの ES Modules を利用し、ビルドなしで JS を読み込む方式。

特徴

• Node 不要
• 設定が最小
• 小規模アプリ向け

コード例

＜script type="module"＞
import * as Turbo from "https://cdn.skypack.dev/@hotwired/turbo
";
Turbo.start();
＜/script＞

---

● ESBuild（高速ビルド + Node 必須）

軽量で高速なビルドツールで、Rails が公式に推奨していた方式。

特徴

• 高速ビルド
• 設定がシンプル
• Node 必須

---

● Bun（高速 JS ランタイム）

Rails 7.1 以降、bun-rails により統合が進んでいる。

特徴

• 高速実行・ビルド
• npm ではなく bun を使用
• Rails 側のサポートが急成長

---

● Vite（最有力候補）

vite_ruby / vite_rails によって Rails と統合。
モダンフロントエンドとの相性が極めて良い。

特徴

• 高速な HMR
• Vue / React / Svelte との統合が容易
• 中〜大規模アプリに最適

アセット例

＜script type="module" src="/vite-dev/main.js"＞＜/script＞

---

■ どれを選ぶべきか？

規模 / 用途	推奨方式
小規模・管理画面	Importmap
少しだけ JS が必要	ESBuild
最新高速環境を使いたい	Bun
Vue / React / Svelte を使う	ViteRails

---

■ まとめ

• Rails 6 までは Webpacker が標準
• Rails 7 以降は JS 管理が選択制に
• Importmap ＝ Node 不要の最軽量構成
• Bun / Vite は近年の主流
• モダン開発では ViteRails 採用が増加中