はじめに
こんにちは、Gakken Leap のフロントエンドエンジニアの日下です。
みなさんは htmx をご存知でしょうか。HTML の属性を拡張し、マルチページアプリケーション（MPA）に Javascript を書かずに SPA のような動的な振る舞いをさせることができるライブラリです。
どうやら海外のフロントエンド界隈で人気とのことなのですが、あまり日本では流行っている感じはしません。なぜ人気なのかを調査するため、ライブラリ製作者の書いたオンラインブック「Hypermedia Systems」を読みました。
この記事では Hypermedia Systems を読んだ所感を共有したいと思います。
Hypermedia Systems とは？
語弊はあるかもしれませんが、 Rails 等で作られた昔ながらの MPA をイメージしてもらえれば、それが Hypermedia System です。
ハイパーメディアドリブンなアプリケーションは、HTML を返すサーバーがあり、クライアントはデータをどのように扱うかについての知識を持ちません。
上記の特徴は SPA とは対照的です。SPA では JSON を返すサーバーがあり、クライアントはどのようにデータを活用し画面を更新するかという責務を負います。
SPA は動的な UI を容易に作ることができますが、上記のようにアプリケーションのコードがフロントエンドとバックエンドで分断されることにより、複雑性が上がるという問題点があります。
著者は htmx を活用し、ハイパーメディアドリブンな開発を行うことでアプリケーションをシンプルに保ったまま動的な UI が作れると主張します。
htmx について
htmx は、HTML 属性を拡張することで、追加の JavaScript を書くことなく動的なウェブアプリケーションを構築できるライブラリです。
基本的な仕組み
htmx の特徴は、HTML 属性を通じて非同期リクエストを簡単に実装できることです。以下は典型的な例です：
<button hx-post="/click" hx-target="#result">Click Me</button>
このボタンをクリックすると：
-
/clickエンドポイントに POST リクエストを送信 - レスポンスを
#result要素に自動的に挿入
上記が Javascript を書かずに実現できます。
主な属性
主に以下のような属性があります。
- hx-get, hx-post, hx-put, hx-delete 等、HTTP メソッドに対応した属性
- hx-target、更新する要素を指定する属性
- hx-swap、要素の更新方法をカスタマイズする属性
- hx-trigger、イベントをトリガーとして非同期リクエストを送信する属性
- hx-validate、フォーム入力のインラインバリデーションを実現する属性
- hx-include、追加のフォームデータをリクエストに含める属性
メリット
- シンプルな実装
- 学習コストの低さ
- パフォーマンスの向上
- サーバーサイドテンプレートとの相性が良い
デメリット
- 複雑な状態管理が必要なアプリには向かない
- 例：表計算ソフトのようにセルを更新すると他のセルも自動で変わるような副作用が激しいアプリケーション
- クライアントサイドの柔軟性が低い
所感
デベロッパーエクスペリエンスの観点から
htmx と Hypermedia Systems の考え方は、SPA に慣れ親しんだフロントエンドエンジニアの開発体験を根本的に変える可能性を秘めています。
従来の SPA アーキテクチャでは避けられなかった複雑性を、シンプルな方法で解決できるアプローチです。
モダンな UI/UX を作るためのフロントエンドの学習コストは年を追うことに増していて、ライブラリやフレームワークの全て理解して追いかけ続けるのはとても困難です。
Javascript 疲れという言葉があるようですが、一開発者として共感でき、htmx は魅力的なアプローチに見えました。
htmx を使う方法だと html ベースなので学習コストが低く、メンテナンスが比較的容易なのも嬉しい点です。
実際の導入を考えると
ただし、すべてのプロジェクトで即座に htmx に移行できるわけではありません。
特に toC アプリのように UI/UX が重視され、高度なインタラクティビティが求められるアプリケーションだとまだ SPA に軍配が上がるかなと感じます。
htmx を以下のようなケースで特に有効だと考えています：
- 比較的シンプルな業務アプリケーション
- サーバーサイドテンプレートを使用している既存プロジェクト
- パフォーマンスと開発効率を重視するプロジェクト
- 小さなチーム
弊社でも toC 向けのアプリでは SPA を使っていますが、社内向けのシステムでは Hotwire という htmx に似た技術で MPA の UI 改善を行なっています。
まとめ
昨今のフロントエンドの潮流を見ていると、複雑性をいかに低減するかということが大きなテーマになっているなと感じます。
Hypermedia Systems の考え方は、複雑性低減のためのフロントエンド開発の新しい（というより、古くて新しい）アプローチを提示しています。
htmx は、その選択肢の一つとして、十分に検討する価値のあるライブラリだと思います。
エンジニア募集中
Gakken LEAP では教育をアップデートしていきたいエンジニアを絶賛大募集しています！！
ぜひお気軽にカジュアル面談へお越しください！！