Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components

https://kaigionrails.org/2025/talks/kudoas/#day1
Kaigi on Rails 2025 での発表資料

## 参考資料

猫でもわかるHotwire入門 Turbo編

Hotwire で UI/UX を実現する発表（Kaigi on Rails）
- Hotwire的な設計を追求して「Web紙芝居」に行き着いた話 - Kaigi on Rails 2023
- Hotwire or React? 〜Reactの録画機能をHotwireに置き換えて得られた知見〜 - Kaigi on Rails 2024
- 高度なUI/UXこそHotwireで作ろう - Kaigi on Rails 2025

各種主要フレームワークのコンポーネントの Custom Elements への変換API の仕様
- Angular
- Vue
- React (3rd party: eg. react-to-web-component)

Web Components 関連
- Web Components Introduction - webcomponents.org
- Using custom elements - MDN
- Restrictions for contents of script elements - HTML Standard
- Embedding custom non-visible data with the data-* attributes - HTML Standard
- CustomEvent - MDN

Action View フォームヘルパー
- FormHelper - Rails API
- Action View フォームヘルパー - Rails ガイド
- config.action_view.default_form_builder - Rails ガイド

Transcript

1. Web Componentsで実現する Hotwireとフロントエンドフレーム ワークの橋渡し 2025.9.26 Kaigi on Rails 2025 Daichi KUDO (@da1chi24)
2. 自己紹介 • Daichi KUDO ◦ GitHub @kudoas ◦ Twitter @da1chi24 • Classi 株式会社 • Ruby歴 3年 • Startup Angular 運営
3. https://corp.classi.jp/careers/ 「Classi」「tetoru」 は Ruby on Rails で作られています
4. この発表で伝えたいこと • Web Components で Rails/Hotwire サービスに フロントエンドフレームワークのコンポーネントを 少しずつ導入 できること • Web Components と Rails の 連携方法 や 活用のヒント
5. この発表の対象者 • Hotwire に関心がある／すでに利用している人 • フロントエンドの知識やコンポーネントの資産を 活かして開発したい人
6. この発表では話さないこと • Hotwire とはなにか • Hotwire での UI/UX の実現方法
7. Hotwireとは何か知りたい方はおすすめです 猫でもわかるHotwire入門 Turbo編 - zenn

8. Hotwire 実践編はこちらがおすすめです Hotwire or React? 〜Reactの録画機能をHotwireに置き換えて得られた知見〜 高度なUI/UXこそHotwireで作ろう
9. アジェンダ • Web Components を選択した背景 • 段階的な導入事例 • まとめ
10. アジェンダ • Web Components を選択した背景 • 段階的な導入事例 • まとめ
11. 新規サービスの立ち上げ 少人数エンジニア・スピード重視
12. 新規サービスの立ち上げ 少人数エンジニア・スピード重視 単一の Rails アプリで開発できる Hotwire⚡採用
13. 自社サービス間のデザインを統一したい課題 サービスA サービスB サービスC 共通化のために UIコンポーネント を利用している Angular製
14. 提供されるコンポーネント例 Storybook - Classi Design System 他にモーダルやカレンダー などのよく利用されるものが 用意されている
15. Classiの一般的なアーキテクチャ Angular SPA Rails API Angular UIコンポーネント Angular SPA Rails API Angular SPA Rails API
16. 今回の場合 Rails + Hotwire これができれば理想 Angular UIコンポーネント
17. 今回の場合 そのままテンプレートに 埋め込んでも動かない Rails + Hotwire Angular UIコンポーネント
18. 今回の場合 Angular UIコンポーネント Angular Rails + Hotwire サービスで管理するものを 増やしたくない
19. 橋渡し役の Web Components を採用した Rails + Hotwire Web Components Angular UIコンポーネント
20. Web Components とは Web標準に基づく 新しいカスタムの、再利用可能な、カプセル化された HTMLタグを作成できる Webプラットフォーム APIのセット Introduction - webcomponents.org
21. Custom Element（カスタム要素） 任意の振る舞いを定義したクラスでHTML要素を登録 UIコンポーネントを HTML要素 として使える カスタム要素の使用 - Web API | MDN JavaScript
22. HTML要素なので Hotwire と共存できる サーバーで HTML をレスポンスする 名前: Daichi KUDO メール: example@com テンプレート（ERB）
23. Railsと疎結合で変更に強い HTML標準の インターフェース でやり取りする Rails + Hotwire Web Components Angular UIコンポーネント
24. アジェンダ • Web Components を選択した背景 • 段階的な導入事例 • まとめ
25. コンポーネントを Web Components に変換 Rails + Hotwire Web Components Angular UIコンポーネント
26. コンポーネントを Web Components に変換 Web Components （Custom Element） フロントエンド コンポーネント Rails起動時に登録 フレームワーク・ライブラリ
27. コンポーネントを Web Components に変換 HTML属性/DOMプロパティ Custom Event 入力 出力 Web Components （Custom Element） 変換する実装の詳細はこの発表では割愛します フロントエンド コンポーネント インターフェースは Web標準にマッピング
28. Angular UIコンポーネント Web Components を Rails に導入する Rails + Hotwire Web Components Web Components
29. ※実際のサービスに存在する画面ではありません この画面を題材に導入します
30. 段階的な導入事例 • 相互作用しない独立したもの • Railsからデータを連携するもの • ユーザー入力を連携するもの シンプルなものから 複雑なものの順に導入します
31. 段階的な導入事例 • 相互作用しない独立したもの • Railsからデータを連携するもの • ユーザー入力を連携するもの シンプルなものから 複雑なものの順に導入します
32. アイコン フッター
33. • 標準のHTML要素と同じ • HTML属性も設定できる 利用方法
34. これだけで導入完了
35. 段階的な導入事例 • 相互作用しない独立したもの • Railsからデータを連携するもの • ユーザー入力を連携するもの
36. ヘッダー エラーメッセージ
37. ユーザー情報（ハッシュ） 学校名（文字列） エラーメッセージ（文字列） 表示切り替え（真偽値）
38. Custom Elementへのデータの渡し方 app/views/layouts/application.html.erb
39. Custom Elementへのデータの渡し方 app/views/layouts/application.html.erb HTML属性で渡す 文字列のみ・宣言的
40. Custom Elementへのデータの渡し方 app/views/layouts/application.html.erb DOMプロパティで渡す 柔軟なデータ型・命令的
41. Custom Elementへのデータの渡し方 JSONに変換してエスケープを外す ⚠注意が必要 ⚠ app/views/layouts/application.html.erb
42. ユーザー入力が含まれる場合の脆弱性 Restrictions for contents of script elements - HTML Standard 任意のDOMを挿入できる </script> で script タグを強制終了
43. カスタムデータ属性を利用した安全な渡し方 JSONをエスケープして データ属性に渡す データ属性をパースする Embedding custom non-visible data with the data-* attributes - HTML Standard
44. サービスの骨格が完成
45. 段階的な導入事例 • 相互作用しない独立したもの • Railsからデータを連携するもの • ユーザー入力を連携するもの
46. 日付入力要素
47. 1.2 フォーム要素を生成するヘルパー form_with で生成されるフォームビルダーオブジェクトには、 「テキストフィールド」「チェックボックス」「ラジオボタン」などの一般的な フォーム要素を生成するためのヘルパーメソッドが多数用意されていま す。 通常 Rails でフォームを組み立てる場合 フォーム要素を生成するヘルパー - Railsガイド
48. フォームヘルパーとモデルの連携 Userモデルに紐づいたフォーム
49. フォームヘルパーとモデルの連携 Userモデルに紐づいたフォーム Railsの規約に基づいた HTML属性を付与 生成される HTML フォーム入力の命名規約とparamsハッシュ - Railsガイド
50. 最初に試したこと：カレンダーだけを導入する 日付イベント発火 Custom Element フォームヘルパーの input 要素 日付クリック 👇 Custom Event
51. フォームとカレンダーの連携 Custom Element Custom Event の連携 雰囲気だけ見てください
52. フォームとカレンダーの連携 雰囲気だけ見てください 赤い部分が連携のための実装
53. フォームとカレンダーの連携 雰囲気だけ見てください 赤い部分が連携のための実装 毎回連携するのが面倒
54. 理由：再利用する単位が間違っていた カレンダー input要素 Rails モデル 面倒なポイント フォームヘルパー Custom Element
55. 本来こうした方が再利用しやすい カレンダー input要素 Rails モデル フォームヘルパー Custom Element 日付入力要素として１ つにまとめる
56. 目指す形：フォームヘルパーだけで導入できる UI Model連携 フォームバリデーション 機能 デザイン
57. Custom Elements を１つにまとめる デザイン カレンダーと input 要素を １つにする Custom Element 属性 を input 要素に連携する ステップ1
58. Custom Elements を１つにまとめる デザイン Custom Element 属性 を input 要素に連携する input 要素と 同じ属性を設定できるように するのがポイント ステップ1
59. フォームヘルパーと連携する フォームビルダーをカスタマイズする - Railsガイド フォームビルダーを カスタマイズして ヘルパーを追加できる ステップ2
60. Custom Elment フォームヘルパーを上書きして input を差し替え input 要素の属性を引き継いで Custom Element に差し替える 既存の input 要素 ステップ2
61. フォームビルダー （MyFormBuilder）の実装例
62. フォームビルダー（ MyFormBuilder）の実装例 作成した Custom Element に input要素の属性を詰め替える
63. フォームビルダー（ MyFormBuilder）の実装例 インターフェースが同じなのでシンプル 作成した Custom Element に input要素の属性を詰め替える
64. builderオプションで 自動的に処理を引き継げる Custom Element を利用するヘルパーが完成 共通で適用したい場合 ActionView::Base.default_form_builder
65. 一通り導入完了
66. アジェンダ • Web Componentsを選択した背景 • 段階的な導入事例 • まとめ
67. まとめ • Web Componentsを利用した事例の紹介 ◦ Custom Element とRails は Web標準の仕様で連携可能 • 利用のヒント ◦ シンプルなものから少しずつ導入する ◦ カスタムデータ属性で安全にデータを渡す ◦ 利用しやすい単位で Custom Element を再設計する ◦ Rails の書き味を変えない工夫
68. ご清聴ありがとうございました EOL 2025.9.26 Kaigi on Rails 2025 Daichi KUDO (@da1chi24)