Repolode
投稿する
bigskysoftware

bigskysoftware/htmx

htmxを使うと、カスタムJavaScriptなしでHTML属性からAJAX、WebSocket、Server-Sent Eventsのリクエストを送り、ページ内容を置き換えられます。

GitHub で見る公式サイト
スター
49,579
フォーク
1,694
未解決の Issue
303
最終コミット
3 日前

これは何？

htmxはHTMLを拡張し、あらゆる要素からHTTPリクエストを送信したり、任意のイベントをきっかけに処理を実行したり、サーバーのレスポンスでページの任意の部分を置き換えたりできるようにします。動作はhx-postやhx-swapなどの属性で宣言するため、HTMLフラグメントを返す役割をサーバーに保たせたまま、インタラクティブなUIを構築できます。

このライブラリは軽量で依存関係がなく、公式の拡張機能を使って拡張できるよう設計されています。また、CSSトランジション、WebSocket接続、SSE接続にも対応しており、クライアントサイドフレームワークなしで一般的なリアルタイムUIのパターンを実現できます。

htmxはintercooler.jsの後継で、htmx.org npm package、またはCDNのscriptタグから利用できます。

主な機能

  • 01hx-getやhx-postなどの属性を使い、あらゆる要素からAJAXリクエストを送信できます。
  • 02設定可能な置換方法で、レスポンスの内容をページ内の任意の場所に反映できます。
  • 03clickやsubmitに限らず、あらゆるDOMイベントをきっかけにリクエストを送信できます。
  • 04HTMLから直接WebSocketとServer-Sent Eventsを利用できます。
  • 05依存関係がなく、scriptタグひとつで導入できるほど軽量です。
  • 06公式の拡張機能を使って動作を拡張できます。

ユースケース

  • サーバーサイドレンダリングのWebアプリに、インライン編集やライブ検索などのインタラクティブな更新を追加する。
  • WebSocketやSSEで更新をプッシュするリアルタイムダッシュボードを構築する。
  • 既存のマルチページサイトをシングルページアプリに書き換えず、段階的に機能を強化する。

トピック

#html#javascript#ajax#hypermedia#frontend#websocket#server-sent-events#hateoas#htmx#hyperscript

よくある質問

htmx とは？
htmxを使うと、カスタムJavaScriptなしでHTML属性からAJAX、WebSocket、Server-Sent Eventsのリクエストを送り、ページ内容を置き換えられます。 htmxはHTMLを拡張し、あらゆる要素からHTTPリクエストを送信したり、任意のイベントをきっかけに処理を実行したり、サーバーのレスポンスでページの任意の部分を置き換えたりできるようにします。動作はhx-postやhx-swapなどの属性で宣言するため、HTMLフラグメントを返す役割をサーバーに保たせたまま、インタラクティブなUIを構築できます。
htmx は無料で使えますか？ライセンスは？
htmx は Other ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
htmx は今もメンテナンスされていますか？
活発にメンテナンス中。htmx の最終コミットは 2026年10月15日 です。
htmx は何に使えますか？
サーバーサイドレンダリングのWebアプリに、インライン編集やライブ検索などのインタラクティブな更新を追加する。 WebSocketやSSEで更新をプッシュするリアルタイムダッシュボードを構築する。 既存のマルチページサイトをシングルページアプリに書き換えず、段階的に機能を強化する。
htmx はどこで入手できますか？
ソースコードとインストール手順は GitHub にあります：https://github.com/bigskysoftware/htmx

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト