Asset Pipeline & Vite
JavaScript、CSS、画像等のフロントエンドアセット管理
Railsのフロントエンドアセット管理は何度も進化しました。
Sprockets（Asset Pipeline） — Rails 3.1〜
Rubyベースのアセットコンパイラ
JavaScript、CSS、画像を結合(concatenate) + 圧縮(minify)
ファイル名にハッシュ追加（フィンガープリンティング）でキャッシュ最適化
stylesheet_link_tag、javascript_include_tag
Webpacker — Rails 5.1〜6.1（廃止済み）
Webpackベース、Node.js必要
React/Vue等のモダンJSフレームワークをサポート
Vite — Rails 7+（現在推奨）
高速開発サーバー（HMR — Hot Module Replacement）
モダンビルドツール（Rollup）
vite_javascript_tag、vite_stylesheet_tag
Import Maps — Rails 7デフォルト
バンドラーなしでブラウザのES Moduleを直接使用
シンプルなアプリに適合、ビルド工程なし
このプロジェクトはViteを使用します。app/javascript/entrypoints/にアプリ別エントリポイントを定義します。
キーポイント
app/javascript/entrypoints/にエントリポイントファイル作成（例: app51.js）
vite_javascript_tag "app51" — レイアウトでJSロード
vite_stylesheet_tag "app51" — レイアウトでCSSロード
Tailwind CSS: @tailwind base; @tailwind components; @tailwind utilities;
開発時HMRで変更を即座に反映
プロダクション: vite:buildで最適化バンドル生成
メリット
- ✓ Vite: 非常に高速な開発サーバー（HMR）
- ✓ アセットフィンガープリンティングでキャッシュ最適化
- ✓ アプリ別独立バンドルで不要なコードロード防止
- ✓ Tailwind CSSと自然に統合
デメリット
- ✗ Node.js依存（Vite）
- ✗ ビルドツール設定が複雑になりうる
- ✗ Sprockets/Import Maps/Vite混在時の混乱
- ✗ HMRが時々動作しないことがある