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