HotwireからViteとReactへの移行

最近、個人のRailsプロジェクトの1つをHotwireからViteとReact（Inertia.js経由）に移行しました。

Hotwireは純粋なRailsアプリケーションには最適ですが、この特定のプロジェクトでは、UIの反復作業とAIツールの活用が移行の決め手となりました。ここでは、その理由と実際のトレードオフについてお話しします。

移行した理由

1. 既製のコンポーネントライブラリ（shadcn/ui）

私はゼロからCSSを書くのが得意ではありません。Railsエコシステムで、洗練されたアクセシブルなUIコンポーネント（ダイアログ、ドロップダウン、コンボボックス）を構築するには、通常、カスタムのStimulusコントローラーとCSSを書くか、ViewComponentやPhlexのようなgemを使う必要があります。

Reactでは、shadcn/uiがRadix UIとTailwind CSSをベースにした、美しくデザインされたアクセシブルなコンポーネントを提供してくれます。必要なものをプロジェクトにコピーすれば、スタイリングはそのまま機能します。デザインに割ける時間が限られている個人開発では、CSSの試行錯誤に費やす時間を大幅に節約できます。

2. チャットでのライブAIプレビュー

最新のAIアシスタント（ChatGPT、Claude）は、Reactコンポーネントの生成と更新を、即座にインタラクティブなプレビュー付きで行うことに優れています。

HotwireとERBを使っていた頃の私の反復サイクルは次の通りでした：

AIにERBとStimulusのコードを書いてもらう
Railsプロジェクトにコピーする
ブラウザをリフレッシュしてテストする
繰り返す

Reactとshadcn/uiを使うと：

チャットでコンポーネントを説明する
AIインターフェース内でレンダリングされたコンポーネントを直接確認する
リアルタイムで反復・改良する
完成したコンポーネントをコードベースにコピーする

このより密なフィードバックループにより、フロントエンドのプロトタイピングが著しく高速化しました。

3. Viteによるキビキビした開発体験

Viteをvite-plugin-rubyと一緒に使うと、サーバーの起動が瞬時で、サブミリ秒のホットモジュールリプレイスメント（HMR）が実現します。Reactコンポーネントの変更は、ページ全体のリロードなしで即座にブラウザに反映されるため、フロントエンド開発中はかなりキビキビした感覚になります。

Inertia.jsが移行を容易にした理由

別のGraphQLやREST APIバックエンドを構築する代わりに、Inertia.js Railsを使いました。

Inertiaは接着層として機能します：Railsのルートとコントローラーはこれまで通り使い、ERBテンプレートをレンダリングする代わりにrender inertia: "Users/Index", props: { users: @users }を返します。これにより、アプリケーションのアーキテクチャをゼロから作り直すことなく、ページ単位で段階的に移行できました。

実際のトレードオフ

この切り替えにはデメリットもありました：

デプロイのオーバーヘッド：importmapsから移行するということは、DockerイメージやCI/CDパイプラインにNode.jsとビルドステップを導入することを意味します。
メンタルなコンテキスト切り替え：RubyのバックエンドオブジェクトとReactのフロントエンドコンポーネントの間で、状態管理を橋渡しする必要があります。
増える可動部品：Vite、React、Tailwind、Inertiaの間で、単純に更新が必要な依存関係が増えます。

まとめ

Rails + Inertia + React + shadcn/uiは、私の最大の個人的ボトルネックを解決してくれました。それは、カスタムCSSに何日も苦労せずに、きれいでアクセシブルなUIを素早く作成することです。すでにCSSに精通している方や、バニラのHotwireで満足している方には、追加のビルド複雑性は価値がないかもしれません。しかし、リッチなUIコンポーネントを使った迅速なプロトタイピングには、この組み合わせは驚くほどよく機能します。