- Official: </> htmx - high power tools for html
- HTML Extentionの略。最新バージョンは2.0.0(2024/06/18現在)
- 属性を記述することでAjax通信、ページの(部分)置き換え、サーバーとの通信(SSE, WebSocket)などができる。
- JavaScriptヘビーな現代に「こういうのでいいんだよ」を提供してくれるツール
HTMXには様々な属性があるが、すべてを一度に理解しようとすると大変なので基本の4つを把握する。
hx-get: 指定したURLにGETリクエストを送信する属性hx-swap: サーバーから受け取ったコンテンツを対象の要素とどのように交換するのかを指定する属性hx-target: サーバーから受け取ったコンテンツ(HTML/JSON)を、ターゲットとして設定した場所に差し込む属性hx-trigger: 特定のイベントが発生した時に、サーバーにリクエストを送信する属性
我々が作るものはほぼHTMXが得意とする When Should You Use Hypermedia?
- 画像や文書等の情報提供
- CRUD中心
- データがセクションに分かれる
- エクセルのように要素間のリアルタイムでな依存がある
- オフラインが必要
- ゲームのように頻繁な更新が必要
- HTMLファーストなツール。
- 簡単に動的処理を実現でき、FWに依存しない。Django(Template)とも組み合わせやすい。
- 一定以上のパフォーマンス、セキュリティ、継続性がある基盤でJavaScriptのチューニングも最小限にして開発速度の向上が期待できる。
- htmxはこれひとつですべてを提供するものではないので、必要に応じてツールを組み合わせていく。
- 本格的なJSフレームワーク/ライブラリに移行することなく、少しの柔軟性を必要とする多くのDjangoプロジェクトに適している。
- Djangoはフルスタックフレームワークなので、それを活用することでフロントエンド側で考慮することを減らすこともできる。
- サンプルリポジトリを探してみるとAlpine.js/Tailwindと組み合わせている例が多い。
- スクリプトを外部に置くのではなく、ハイパーメディア内に直接記述することが好まれるアーキテクチャのため。
以下にサンプルや機能一覧があるのでざっと眺めたり使ってみると良い。
- awesome-htmx
- 資料がないか探したときにほぼここのリンクにたどり着く。
- PyHAT-stack/awesome-python-htmx: A curated list of things related to python-based web development using htmx
- DjangoやFastAPI、Flaskの例がまとまっている。htmx単体でなくDjangoと組み合わせる例を学べる。
- arcanemachine/django-htmx-alpine: A sandbox for using Django with HTMX and Alpine.JS
- Alpine.jsも使っており、メッセージの表示も行う。htmxと組み合わせたときの使い勝手のサンプルになる。
- bblanchon/django-htmx-modal-form: Django+HTMX modal form
- Djangoのメッセージフレームワークとの連携の例として最適だと思われる。
- toast.js/htmlを用意しているが、既存プロジェクトでも似たようなものを使っていればそちらを使用可能。
- Django HTMX Components
- htmxの公式の例をDjangoと組み合わせて実装した例。django-components を使っている。