Schedule.select meets Hotwire

Schedule.select meets Hotwire RubyKaigi 2024事前勉強会@SmartHR kinoppyd 2024-04-25

だれおめー？ kinoppyd プロダクト連携チーム プログラミング ロードバイク ポーカー CONFIDENTIAL

Schedule.select 大幅にアップデートしたよ CONFIDENTIAL

CONFIDENTIAL

これまで ● SmartHR UI（React + styled-components) ● ERB + rails-ujs ● Webpacker CONFIDENTIAL

大変だった点 ● SmartHR UIのアップデートに追従できない ● SPAではないので、制御がReactとRailsで分かれて いた ● ロジックがReact側に多くてテストが難しい CONFIDENTIAL

これから ● TailwindCSS ● ERB + Turbo Frames + Turbo Streams ● esbuild CONFIDENTIAL

どんな感じです？ ● アセットのビルドめっちゃ速くて最高 ● テストがとにかく書きやすくなった ● Hotwireをガンガン使える CONFIDENTIAL

Hotwireはいいぞ！ CONFIDENTIAL

Turbo ● 全体的に使ってる ● 特にスケジュール画面から予定を作るときに、ボタン を押してもリロードしなくなった ● ダイアログとかもTurbo Frames CONFIDENTIAL

Stimulus ● スケジュールテーブルの日付切り替え ● ダイアログを出すボタン ● ロケールの予測や切り替え CONFIDENTIAL

Happy CONFIDENTIAL

まあでも大変なこともある CONFIDENTIAL

TableとTurbo CONFIDENTIAL

TableとTurbo Framesの相性 ● HTMLの仕様では、テーブルを構成するタグを他の タグで囲めない ● つまり、<turbo-frame>で<tr>とかを囲めない ● どうすればよい？ CONFIDENTIAL

TableはTurbo Streamsで書き換える ● Turbo Streamsは任意の要素を書き換えられる ● <tr>とかはStreamsで書き換えられる ● Frames と Streams のリクエストは共存できるので、 ケースによって切り替える CONFIDENTIAL

まーでもメンドイ ● テーブルに対応するクラスを持ってるからIDとかは 発行できる ● でもStreamsは強い目的が無いとメンドイ ● Framesの気軽さが無いのが悲しいが仕方ない CONFIDENTIAL

DialogとTurbo CONFIDENTIAL

DialogとTurbo Framesもまあまあ大変 ● dialogの中身だけを書き換えるなら良い ● dialogのボタンを押すと、閉じて元の画面を更新とか が大変 ● 名前のバリデーションとか CONFIDENTIAL

こういうやつとか CONFIDENTIAL

こういうやつとか CONFIDENTIAL

どうやったの ● 失敗時はDialogの中身をエラー付きでTurbo Framesで書き換え ● 成功時は元のリソースにリダイレクト ● リダイレクトはTurbo Framesが壊れるので、 breakoutする必要あり（セッションでやった） CONFIDENTIAL

DialogとTurboのありかた ● そもそもDialogのボタンで閉じてリソースを更新みた いな行動をしないほうが良い ● SmartHR UIのデザインに寄せたので致し方なし ● Campfireだとダイアログも一つのViewにしてる CONFIDENTIAL

エラーの出し分けがムズい CONFIDENTIAL

エラーの出し分け？ ● バリデーションが失敗するエラーと、例外が発生する エラーはそもそも違う ● ActiveRecord::NotFoundはrescueしたいが、valid? はそうではない ● でもこれTurbo Frames壊れる CONFIDENTIAL

エラーの分類 ● rescueが必要なエラーは、本来UIからその操作がで きてはいけない ● なので、ユーザー操作できる範囲は422でTurbo Frames、それ以外はエラー画面へ ● ここでもframeがないのでbreakoutが必要になる CONFIDENTIAL

これはあんまり良い解決策ではない ● リソースのエラーやvalidationを正確にハンドルする のは難しい ● エラーだけどエラー表示したくないときや逆もある ● どうすればいいんだろう……？ 謎です CONFIDENTIAL

モバイル対応 CONFIDENTIAL

CONFIDENTIAL

最後に CONFIDENTIAL

トロフィ実装しときました CONFIDENTIAL

それでは沖縄で お会いしましょう CONFIDENTIAL