</> htmx _{HTML用の高機能ツール}

紹介

htmxを使用すると、AJAX、CSSトランジション、Webソケット、サーバー送信イベントに直接アクセスできます。HTMLで属性を使用するので、モダンなユーザーインターフェースをシンプル&強力なハイパーテキストで構築できます。

htmxは最小(約14k min.gz)で、依存関係のない、拡張可能なコードで、Reactと比較するとコードのベースサイズが67%削減されています。

動機

• なぜHTTPリクエストを行うのは<a>と<form>だけでしょうか。
• それらをトリガーするのはなぜclickとsubmitイベントだけでしょうか。
• 使用できるのはなぜGETとPOSTメソッドだけなのでしょうか。
• なぜ画面全体のみを置き換えることができるのでしょうか。

これらの制約を取り除くことにより、htmxはHTMLをハイパーテキストとして完成させます。

クイックスタート

  <script src="https://unpkg.com/htmx.org@2.0.3"></script>
  <!-- have a button POST a click via AJAX -->
  <button hx-post="/clicked" hx-swap="outerHTML">
    Click Me
  </button>

このボタンのhx-post属性とhx-swap属性は、htmxに次のことを指示します。

「ユーザーがこのボタンをクリックすると、/clickedにAJAXリクエストを送信し、ボタン全体をHTMLレスポンスに置き換えてください。」

htmxはintercooler.jsの後継です。

ドキュメントの序章でさらに詳しい説明を読むことができます。

htmx 2.xはIEのサポートを廃止した点に注意してください。IEサポートが必要な場合は、1.xコードラインを使用できます。これは永久にサポートされます。

書籍

htmxおよびその他のツールを使用したハイパーメディア駆動型アプリケーションの構築方法に関する本であるHypermedia Systemsのリリースを発表できることを嬉しく思います。

スポンサー

htmxの開発はGitHubスポンサーからサポートされています。

すべての寛大なサポーターに感謝します。次の方々が含まれます。

プラチナスポンサー

#ゴールドスポンサー

#シルバースポンサー