Kaigi on Rails 2023 でTurbolinks嫌いにTurboを食わせる登壇をしました #kaigionrails

先月の大阪Ruby会議03, 松江Ruby会議10 から続く3連続登壇の最終回！
なんと「Kaigi on Rails 2023」で登壇させていただきました。

「Turbolinksアレルギー患者に捧げるTurbo & Stimulusでの時短実装術」 www.youtube.com

スライドはこちらです。

speakerdeck.com

感想

去年のKaigi on Railsに提出したプロポーザルは落選してしまったので、今回は2回目の挑戦でした。

とはいえ今年は100件以上のCFPが提出されていたので「まず通らんやろなぁ……」くらいに思っていましたが、なんと採択いただけたので「ありがたい…うれしい…」という気持ちになっています。

また、Hotwire枠の登壇が3つもあったのが驚きでしたね。世の中のフロントエンドの主流ではありませんが、意外と大きな波が来ているのでしょうか。
最近は htmx も話題になっていましたし、現代のフロントエンドしんどすぎ民としては今後も使われていくとよいなと思います。

参加者400人というデカめの会でしたが、登壇者側としては特に困ることもなく発表することができました。
会場が存在して、その場の休憩時間や懇親会で直接質問したりされたりが発生するので、登壇内容以上の収穫があるイベントでしたね。

コミュの障の者で且つ陰の者なので、勉強会などでは交流できないことも多いのですが、登壇していると発表内容の話ができるので最強でした。 そこから他の方の登壇内容などにも繋げていけるので、今回は話のネタに困ることは無かったように思います。

陰の者たちよ、登壇しよう。

登壇のふりかえり

満員御礼

セッション当日は、会場満席 & サテライト会場の方にご案内　となっており、まさに満員御礼という嬉しい状況でした。オンライン視聴を含めるとかなりの人数になりそうですね。セッションにお越しいただき誠にありがとうございました。

登壇後も「面白かった」という声をたくさん頂けたので、心の中で小躍りしております。

大きな失敗もなく無事に登壇を終えられたので、備忘録もかねてざっくりふりかえりを残しておきましょう。

使用技術

Hotwireの実用例

15分枠だったためHotwire入門をやっている時間はなく、TurboやStimulusを使うと嬉しいケースをいきなり紹介&実践しました。

一部分のみHTMLを差し替えできる機能によりモーダルダイアログの表示が可能

Turboは機能の1つとしてbodyの全体または一部の要素を差し替える処理を提供しており、それをサーバーサイドで容易に実装することができます。

モーダルダイアログの表示も、以下のようにRailsのviewからダイアログのHTMLを返却しているだけです。

= turbo_stream.update "modal" do
  .modal.is-active
    .modal-background
    .modal-content
      .box
        .block
          p
          | この内容で問い合わせてよろしいですか？
        .block
          = form_with url: inquiries_path, model: @inquiry do |f|
            = f.hidden_field :email
            = f.hidden_field :subject
            = f.hidden_field :body
(以降は省略)

また、HTMLの一部を差し替えるということは「他の要素を変更せず保護する」ということでもあります。

「変更が必要な部分のみrenderし、保持したい要素はrenderしない」という選択肢が取れるのが嬉しい所ですね。

これでエラー表示の際などによく実装する、「ユーザー入力値を再現したフォームをrenderする」という面倒くさい処理を全撤廃することが可能です。
パスワードフォームの値などは平文でHTMLに埋め込んで返す必要がありますからね。セキュリティ的にもやめておいた方がよいでしょう。

こういった使い方を駆使して「時短実装できるぜ！」というような内容の登壇をしました。

Turboを食わず嫌いして無効化する人が減ればよいですねえ。

Hotwireを実用Tipsの解説

Hotwire称賛ばかりでは不誠実だろうと考え、メリット/デメリットの紹介をしました。

• メリット
  • Javascript実装の負荷を最小限にできる
  • サーバサイドに資産を集約できる
• デメリット
  • 毎回サーバと通信してDOM操作するため通信なしでDOM操作がしたい場合に弱い

Hotwireには上記の特徴があるかなぁと個人的には考えています。

あとは細かいハマりどころと対処法もいくつか解説。昔ほどではないとは言え、iOSのMobile Safari対応は強敵ですね。
Mobile Safariはポップアップを無断でブロックするのやめろや。ユーザーに通知しろ。

毎度おなじみの楽しいデモ

今年の登壇は全て動作するデモを用意して壇上で動かしています。今回のKaigi on Railsでも、実際にHotwireを動かした際の挙動をスクリーン上に映して解説しています。

今回は「デモを動かしながらテキストで補足したら分かりやすいのでは…？」と直前に閃いてしまい、スライドとデモ画面を同時にスクリーンに投影する方式を開発/採用しました。もう2週間早く思いついていたらスライド作り直さずに済んだのになぁ。

かなり自然な出来だったようで、スライド中のデモ動画かと思っていた人も居たようです。この辺の技術もいつか書き残したい所ですね。

デモしつつ解説できる自慢の新技術

デモというものは、何故か本番で動かないもののため多用するのは非常にリスキーなのですが、毎回バクチを打ってデモ披露を敢行しています。

しかしながら今年はなんとノーミスです。やったね。

コール & レスポンス

「せっかくオフライン登壇だし、コーレスとかやってみてぇ〜〜〜〜〜」という欲が出てきたので、プレゼンのつかみとして実施しました。

• 「Turbolinksを知ってる人〜？」→ 👏👏👏👏👏
• 「Turbolinksを使ってる人〜？」→ 😐………

なるべく合わせやすいような話し方は心がけましたが、予想以上にバッチリ100%決まってしまったのでビックリしています。

実際の所はTurbolinks使っている人も居たはずですが、みんな流れを読むのがうますぎる

聴衆からのレスポンスを受け取れるのはオフライン登壇の良いところですね。

おわりに

ということで振り返りは以上！

フルタイムで仕事しつつ2ヶ月で3登壇は無茶だった……
体力の限界なのでしばらくはのんびり暮らそう。