Ruby版 JSXのRuxが気になる

■ イベント
Omotesando.rb #118
https://omotesandorb.connpass.com/event/381209/

■ 発表者
技術本部 Eight Engineering Unit Product Devグループ
鳥山 らいか

■ エンジニア 採用情報
https://media.sansan-engineering.com

Transcript

1. pvcresin Ruby版 JSXのRuxが気になる Omotesando.rb #118
2. pvcresin 仕事 Sansan で Eight の Webエンジニア 興味 フロントエンド / デザイン / 型 趣味 アニメ / お笑い / 謎解き ⾃⼰紹介
3. RailsでHTMLを返す場合
4. = APIモード / Inertia.js は除外
5. Viewのロジックをどこに置くか
6. “コンポーネント設計”
7. Partial
8. - コンポーネントごとにファイルを切り出せて便利 - ロジックも閉じ込めることが可能 Partial _name.html.erb index.html.erb
9. Partialに関する問題 - 変数がどこから渡されているのか追いづらい - テンプレートの中に if / each などのロジックが増えていく - Helperなどに逃がしても、スコープやテンプレートとの距離に課題 - コンポーネント固有のロジックはどうするか
10. ViewComponent
11. ViewComponent テンプレートに対応するRubyクラスにロジックを閉じ込める name_component.rb index.html.erb name_component.html.erb
12. ViewComponent - 変数の受け渡しが明⽰的 - テストが容易 - Partialより描画パフォーマンスが良い - Previewが容易（Lookbook / Storybook）
13. Ruby + ERB の 2ファイル必要...？
14. 1ファイルでもできる name_component.rb name_component.rb name_component.html.erb
15. Ruby → ERB → Ruby
16. 若⼲のまわりくどさ
17. Rux
18. - Rubyコードの中にHTMLでUIを書ける - ViewComponentベース Rux page_component.rux name_component.rux
19. Ruxの制約
20. .rux → .rb へのトランスパイルが必要 name_component.rb name_component.rux ※ リクエストが来たら⾃動変換する機能もある（dev / testで有⽤）
21. 微妙な点
22. - 完成度がやや怪しい - エラーの情報が少ない - Rux::Parser::UnexpectedTokenError - トランスパイルを挟むので、sourcemapが必要そう 微妙な点 次のバージョンで直るよ by 作者 ⭕ OK ❌ NG
23. まとめ
24. まとめ - RuxはViewComponentをベースとした、Ruby版 JSXのようなライブラリ - プロダクション利⽤には、まだまだ課題が残る - フロントエンドの考えを持ち込むことでRailsの世界もさらに広がりそう