フロントエンド社内勉強会：HTMX, Hotwireについてキャッチアップ・議論

CTOをしております、村上です。 今回から、社内勉強会の内容をログとして投稿させていただきます。(今回の発表者は私です)
担当制で、各回の担当者には議論したいアジェンダとその材料を持って来てもらいます。 業務に完全に直結するものは業務でアウトプットすると思うので、世の中で話題になっているものや自分の中で興味が出ているものなどを想定しています。 ただ、業務と少しずらしていれば問題なしです。

ログなので内容として不正確、不十分なところはあると思いますが、ご了承ください。

概要

• どちらも、SPAのレスポンスの良さを極力Javascriptを使わないで実現する仕組み
  • REST APIではなくHTMLの一部をレスポンスで送る
• ウェブフレームワークのMVCだとページの一部を書き換えるのが難しい
  • かといってReactなどを導入すると、ロジックがウェブフレームワーク側とReact側に分かれてややこしくなる

詳細

• HTMX
  • https://htmx.org/
  • https://htmx.org/examples/
    • https://htmx.org/examples/click-to-edit/
• Hotwire
  • https://hotwired.dev/
  • Rails7から標準になっている
    • https://rubyonrails.org/2021/12/15/Rails-7-fulfilling-a-vision
    • https://www.hotrails.dev/turbo-rails
  • example
    • 最小バージョン
      • https://qiita.com/ShinKano/items/018e32d25f40bce201de
    • https://hotwiredcases.dev/

議論したい内容

• SaaSの管理画面を作るのに使えないかという観点で調べました
  • 管理画面のフロントエンド側の作り方案
    • v0でNext.jsのUIを作る
      • きれいなUIは出来るが、コンポーネントの改良が大変そう
    • アプリケーションのUIを流用する
      • 楽ではありそう
      • 使わない部分も多いので取捨選択どうするか
      • 管理画面にはやや過剰
    • テンプレートエンジンで作る
      • 1から作るコストは掛かる
      • 管理画面で必要な機能・デザイン要件は少ないので、その面は合致している

議事録

• コンポーネントの再利用はどうするか
  • テンプレートエンジンなら、切り出して参照する形になりはず
  • honoならJSX使えるのでありかも
  • https://twig.symfony.com/
    • extendとか出来るので
    • 言語での置き換え(日本語とか)
• そもそもReactアプリケーションでも、実運用上コンポーネントが使いまわし出来ているのか
  • 開発段階ではある程度汎用性持たせてコンポーネントを作る
  • リリース後一部の箇所のために、拡張する必要が出たとき
    • 互換性を持たせて拡張するか
      • その場合はテストがないと辛い
    • 別コンポーネントに切り出して、それに一部の箇所だけ置き換える
  • コンポーネントを細かい粒度にすれば汎用性持たせられるが、作る段階だと今後の全部を対応するのは限界がある
• hydrationの問題はReactのserver actionで解消されそう
• 管理画面については、tailwind & 生成AIの構成で新規プロジェクトの前に試してみるのはあり