Ruby版 JSXのRuxが気になる

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の世界もさらに広がりそう

25. None