前回は Herb の紹介に引き続き、今回は ReActionView を紹介をします。
今回、ReActionView を組み込もうとしていたのは、 Kaigi on Rails 2025 で ReActionView のトーク を聞いたことがきっかけでしたね。ReActionView は Herb を利用しているので、前回の Herb の導入は ReActionView の導入への前準備でした。
ReActionView とは
ReActionView は Rails 標準の View ライブラリである ActionView 互換の ERB エンジンです。README では次のように説明されています。
- A new ActionView-compatible ERB engine with modern DX
- Compatible with .html.erb, but with modern enhancements:
- HTML validation
- Better error feedback
- Developer-friendly debug mode
開発体験の向上に重きをおいている ActionView 互換の ERB エンジン、ということですね。
ReActionView を導入してみる
それでは、ReActionView を導入してみましょう。いつも通り gem を追加します。
gem "reactionview"そして、gem のインストールと initializer の生成を行います。
$ bundle install
$ bin/rails g reactionview:install
Creating ReActionView initializer...
create config/initializers/reactionview.rb
ReActionView has been successfully installed! 🎉
Next steps:
1. Review config/initializers/reactionview.rb
2. Enable `config.intercept_erb = true` to process all `*.html.erb` templates using `Herb::Engine`.
3. Create `*.html.herb` templates for explicit Herb usage.
Learn more:
GitHub: https://github.com/marcoroth/reactionview
Website: https://reactionview.dev
✨ Thanks for riding the bleeding edge with Herb 🌿 and ReActionView! 🚀生成された initializer ファイルでは、以下のような設定が可能です。
- intercept_erb
- 拡張子 .herb のテンプレートを ReActionView + Herb で処理する
- デフォルト無効
- debug_mode
- ReActionView のデバッグモードは development モードでのみ有効とする
- デフォルトでは
Rails.env.development?のときのみ有効
手元の環境では、拡張子 .html.erb ファイルも ReActionView に処理してほしいので intercept_erb も有効にしました。
ReActionView.configure do |config|
# Intercept .html.erb templates and process them with `Herb::Engine` for enhanced features
config.intercept_erb = Rails.env.development?
# Enable debug mode in development (adds debug attributes to HTML)
config.debug_mode = Rails.env.development?
endなお、intercept_erb は development モードでのみ有効にするよう設定するのがおすすめです。生成直後の initializer ファイルでは、 intercept_erb は以下のように「常に有効にする」という設定がコメントアウトされています。
# config.intercept_erb = trueしかし、このコメントを解除した場合、production モードでも ReActionView が動作し、 .html.erb ファイルのレンダリングに Herb エンジンが使われるようになります。そして、Herb エンジンはタグを厳格にパースするため、通常の ERB エンジン(Erubi)では問題なく動作していたテンプレートが、Herb エンジンではタグの不一致などによりレンダリングエラーとなる可能性があります。
ですので、デバッグモードと同じく development モードでのみ有効にするのが無難です。
※ initializer ファイル全体を if Rails.env.development? で囲うようにする手もありそうですが、実験していません。
さて、ここまでで ReActionView の導入、設定は完了です。
ReActionView を動かす (Debug Tools)
それでは Rails サーバを起動してみましょう。
ここではサンプルとして Rails チュートリアルのサンプルアプリケーション を利用します (yasslab さんに感謝です)。development モードで (デバッグモードを有効にした状態で) Rails アプリケーションにブラウザでアクセスしてみます。
Rails チュートリアルアプリが表示されますが、ひとつだけ違いがあります。わかりますか?
実は左上の部分に Herb というボタンが追加されています。この Herb ボタンが Debug Tools の入口です。
ボタンをクリックするとデバッグ用のメニューが表示されます。
メニューでは以下の機能を有効化 / 無効化できます。
- Show View Outlines: その画面のビュー(.html.erb)の範囲を可視化する
- Show Partial Outlines: パーシャルビューの範囲を可視化する
- Show Component Outlines: (不明)
- Show ERB Output Outlines: ERB タグの内容をツールチップで表示する
- Show ERB Output Tags: ERB タグの内容を表示する
たとえば、”Show Partial Outlines” を有効にすると、こんな感じでパーシャルに枠線が付き、ビューのパーツがどのようにレンダリングされるのか可視化されます
“Show ERB Output Outlines” を有効にして、各パーツにマウスカーソルを当てると、どのような ERB タグが記述されていたのかがツールチップで表示されます。
ReActionView の Debug Tools を利用すると、ビューの構造が把握できて面白いですね。
ReActionView を動かす (エラー表示)
デバッグモードを有効にしていると便利なのがエラー表示です。タグの不一致や ERB の文法エラーが見つかった際に ReActionView が専用のエラーページを表示します。
Rails 標準のエラーページよりもエラーの箇所がわかりやすく表示されます。これも開発体験を向上させてくれます。
注意点
Herb と同じく ReActionView もまだ若いプロジェクトであるため、導入に当たっていくつか問題がありました。ここで紹介します。
注意その 1: Herb のパースエラーを解消しておく必要がある
ReActionView は Herb エンジンを利用して HTML + ERB をパースしているため、タグ構造の不一致など、Herb のパースエラーが発生するような HTML が含まれていると、HTML としては正しくても ReActionView 経由ではレンダリングできなくなります。
ReActionView の恩恵を受けるには、事前に Herb の Lint を実行してパースエラーを解消しておくとよいでしょう。ReActionView のエラー表示を見つつ、ひとつずつ解決していく手もありますが、画面にアクセスしないといけないので herb-lint を使うのがスマートです。
いずれにせよ、パースエラーを解消しないと ReActionView が使いづらいため、導入するアプリの HTML の状態によっては、ある程度手を動かさないとスタートラインに立てない可能性があります。
注意その 2: 一部の環境で Segmentation Fault が発生する
Segmentation Fault on Ubuntu with view_components · Issue #54 · marcoroth/reactionview で報告されているのですが、Ubuntu 環境で ReActionView を利用すると Segmentation Fault が発生する問題があります。
今回、この記事を書くに当たって Rails チュートリアルのサンプルを動かそうとしたのですが、その際にこの問題を踏み抜きました。MacOS で利用したり、Ubuntu 以外の Linux の場合はうまくいくようです。ruby の公式 Docker イメージ (Debian slim) で動くことも確認済みです。
いずれ問題が解消されるとは思いますが、当面は制約になりそうです。
注意その 3: production 環境に影響しないような注意が必要
設定の際も注意を書きましたが、initializer をうまく設定しないと production モードにも影響が出てしまいます。
次の例は、閉じタグがひとつ欠けた状態で ReActionView 経由でユーザー詳細ページを表示しようとした例です。
ボディの部分が正しくレンダリングされていませんね。
そして、残念なことにアプリケーションログを見てもエラーの手がかりは得られません。サイレントにレンダリングに失敗するため、問題の特定が難しいのです。
I, [2025-11-16T16:34:56.341516 #62577] INFO -- : [a8bbb9fb-7263-46f5-9ae8-361d7959ebc3] Started GET "/users/101" for 127.0.0.1 at 2025-11-16 16:34:56 +0900
I, [2025-11-16T16:34:56.345470 #62577] INFO -- : [a8bbb9fb-7263-46f5-9ae8-361d7959ebc3] Processing by UsersController#show as HTML
I, [2025-11-16T16:34:56.345574 #62577] INFO -- : [a8bbb9fb-7263-46f5-9ae8-361d7959ebc3] Parameters: {"id" => "101"}
I, [2025-11-16T16:34:56.351590 #62577] INFO -- : [a8bbb9fb-7263-46f5-9ae8-361d7959ebc3] Rendered users/show.html.erb within layouts/application (Duration: 0.0ms | Allocations: 6)
I, [2025-11-16T16:34:56.359743 #62577] INFO -- : [a8bbb9fb-7263-46f5-9ae8-361d7959ebc3] Rendered layout layouts/application.html.erb (Duration: 8.2ms | Allocations: 1223)
I, [2025-11-16T16:34:56.359966 #62577] INFO -- : [a8bbb9fb-7263-46f5-9ae8-361d7959ebc3] Completed 200 OK in 14ms (Views: 8.5ms | ActiveRecord: 0.2ms | Allocations: 1685)※ E2E やインテグレーションテストといったテストが回っていれば、CI で気づく可能性もありそうです。
そのため、production モードでは利用しないよう、意識的な設定が必要となります。
注意その 4: デバッグモードが production モードでは動作しない
ReActionView そのものは production モードでも動作しますが、デバッグモードは production モードでは動作しないことがわかっています。
設定ファイルの初期値では、development モードでのみ動くという初期値になっていますが、ここを「常に有効 (true)」に変更しても、production モードでは動作しません。
config.debug_mode = trueいま関わっているプロジェクトでは、ローカル、dev, stg, prod といった複数の環境があるため、ローカルの開発環境だけでなく、dev 環境でもデバッグモードを有効にしてみようと考えていました。しかし、現在の実装ではアセット系のエラーにより、production モードではデバッグモードが利用できず、画面表示が一切できません。
この問題は修正 PR を提出済みです。これがどう進んでいくのか見てみましょう。
まとめ
今回は ReActionView を紹介しました。
- ReActionView はビュー構造の可視化や、ERB 関連のリッチなエラー表示など、開発体験を向上してくれる
- シンプルで薄いツールであるため、導入のハードルは低い
- production モードまわりの設定には注意が必要
少し注意が必要な部分もありますが、Herb とセットで導入すると幸せに開発できそうです。
まだまだ Rails で HTML を扱うプロジェクトも多いと思いますので、ぜひ試してみてください。
＃人気の記事
＃タグ
