Islands on Rails !!

Izumo Developers' Guild Brazilian BBQ(第10回)
https://izumo-developers-guild.connpass.com/event/365015/

Transcript

1. Islands on Rails !! Hotwireを用いたRailsへのReactコンポーネント導入 今回のリポジトリ： 　https://github.com/matsudai/islands-on-rails-sample
2. 自己紹介 名前： matsudai / ふじはら 所属： 　　　　　　　　　　事業推進部 　　　松江でソフトウェアエンジニアをやっています。 　　　Ruby、React、Javaなどを利用した製造業向け Webシステム開発など。 　　　すきなこと：ゲーム、プログラミング。 今回のリポジトリ： 　https://github.com/matsudai/islands-on-rails-sample
3. もくじ • きっかけ • 実現方法 • デモ • まとめ 今回のリポジトリ： 　https://github.com/matsudai/islands-on-rails-sample
4. きっかけ • Kaigi on Rails 2025 > 「高度なUI/UXこそHotwireで作ろう」 　　　→ 埋め込む…？🤔 https://speakerdeck.com/naofumi/uxkosohotwiredezuo-rou-kaigi-on-rails-2025
5. きっかけ • まずHotwireとは？ ◦ 超ざっくりいうとRailsに乗った Ajax ▪ Turbo：HTMLの部分更新、WebSocketでの双方向通信など ▪ Stimulus：JavaScriptで定型的なイベント処理を簡単に実装 ◦ 例）通常のRailsのコード+10行くらいでリアルタイム更新が実現
6. きっかけ • （本題）ReactをHotwireに埋め込むとは？ ◦ UIとAPIをHTTP経由のJSON APIで結合する…
7. きっかけ • （本題）ReactをHotwireに埋め込むとは？ ◦ UIとAPIをHTTP経由のJSON APIで結合する…のではなく ◦ Hotwireでブラウザまでデータを運ぶ ◦ ReactはJavaScriptオブジェクトを表示する
8. 実現方法 今回のリポジトリ： 　https://github.com/matsudai/islands-on-rails-sample
9. • ReactコンポーネントをRailsで利用するには 🤔 実現方法
10. • ReactコンポーネントをRailsで利用するには 🤔 • → ReactとRailsのJS/CSSを連携させる必要がある ◦ ※ React-Railsのスタイル共有のため TailwindCSS利用 ◦ ※ React環境を簡単に作るため Vite利用 実現方法 ↓ Vite (React) ↑ Rails ？ ？
11. 実現方法 ↓ Vite (React) ↑ Rails • ReactコンポーネントをRailsで利用するには 🤔 ◦ Vite (React) は設定でESModule（ESM）へビルド可能 ✅ ◦ RailsはデフォルトのimportmapでESMを取込可能 ✅ ◦ TailwindCSSのビルドツールはフレームワーク非依存 ✅ 　　　　→ これでいけそう！ ① Reactコンポーネントを ESMにビルド 　 → Railsでimport ② React側のCSSをRailsでimport 　 → TailwindCSSでビルド
12. 実現方法 代表的な設定 時間がないので飛ばす 今回のリポジトリ： 　https://github.com/matsudai/islands-on-rails-sample Rails: ReactのESM・CSSのロード設定 Vite (React): ESMへのビルド ※ 実際はモジュール（React/Tailwind） 　 の導入や、Railsサーバ起動時に 　 Viteのビルドサーバを起動する設定 　 が必要なので↓をご確認ください。
13. 実現方法 コンポーネント呼び出し方法の比較（左：Rails、右：React）　 このコンポーネントを利用 クセはあるが許容範囲内か…？ ※ JSX構文はimportmapでなく 　 esbuildを使えば利用可能
14. デモ 今回のリポジトリ： 　https://github.com/matsudai/islands-on-rails-sample
16. • React/Railsの境界をHTTP APIでなくJSオブジェクトにする方法の紹介 • 利点・欠点： ◦ ❌ Reactコンポーネントの呼び出し方にクセがある ◦ ⭕ JSON APIが不要 ▪ → CORS設定、CSRF対策、エラーハンドリング複雑化などの回避 ◦ ⭕ WebSocketによる双方向通信 も簡単に実装可能 ◦ ⭕ Railsのデフォルト （importmap）で実現可能 ▪ → Railsで開発を進めていき、 UIに行き詰ってから導入できる 　　→ UIへの要求・開発体制に応じた段階的導入が可能、 　　　開発初期からビジネス上の課題解決に集中できる！ まとめ 今回のリポジトリ： 　https://github.com/matsudai/islands-on-rails-sample
17. 余談 今回のリポジトリ： 　https://github.com/matsudai/islands-on-rails-sample
18. 余談 「アイランド・アーキテクチャ 」 　－ パフォーマンスのため基本的にサーバ側でページを生成。 　　 クライアント（Webブラウザ）側で部分的なコンポーネントを生成。 　　　　　　　　　　　　　↓ 今回は ↓ 「アイランド …？　　　　　　」 　－ 基本的にRailsでページを生成・更新（サーバ側＋動的なデータの搬送） 。 　　 クライアント側（React）で複雑なUIコンポーネントを生成。
19. Islands on Rails …