HTML
HTML
開発者カーソン・グロス
初回リリース2020年11月24日[ 1 ] ( 2020-11-24 )
安定版リリース
2.0.7 [ 2 ] ウィキデータで編集する / 2025年9月11日 （2025年9月11日）
リポジトリgithub .com /bigskysoftware /htmx
書かれたJavaScript
ライセンスBSD 0節[ 3 ]
Webサイトhtmx .org

htmx （ HTMXとも表記）は、オープンソースのフロントエンドJavaScriptライブラリです。HTMLをカスタム属性で拡張することで、 HTML内で直接AJAXを使用したり、ハイパーメディア駆動型のアプローチを採用したりすることができます。これらの属性により、追加のJavaScriptを記述することなく、 HTMLとCSSで直接Webページを動的に定義できます。これらの属性により、従来JavaScriptの記述を必要としていたタスクを、HTMLだけで完全に実行できるようになります。このライブラリは、 intercooler.jsの新バージョンとしてCarson Grossによって作成されました。

このライブラリは、標準的なHTTPメソッドを用いたサーバーとの通信をサポートし、サーバーからのレスポンス（通常はテキストまたはHTMLフラグメント）をWebページの指定部分に挿入することを簡素化します。ページ全体を再描画する必要はありません。これにより、仮想DOMにおけるリコンシリエーション動作と同様の動作が可能になります。

歴史

htmxは、2013年にCarson Gross氏が作成したフロントエンドライブラリであるintercooler.jsに由来しています。[ 4 ]このライブラリは、 HTML属性を用いた簡素化されたアプローチを導入することで、 AJAX（非同期JavaScriptとXML）に伴う複雑さに対処することを目的としていました。[ 5 ]その目的は、Roy Fielding氏がREST（表現状態転送）の本来の意図、特にHATEOAS（アプリケーション状態エンジンとしてのハイパーメディア）に沿ったフレームワークを作成することでした。この問題は、Fielding氏が2008年10月にブログに投稿した「REST APIはハイパーテキスト駆動でなければならない」で説明されています。[ 6 ] [ 7 ]

htmxはjQueryに依存しないintercooler.jsの改良版として作成され、2020年11月にバージョン1.0.0がリリースされました。[ 8 ] htmxのリリースは、属性を使用してHTMLで直接AJAX、 CSSトランジション、WebSocket 、およびServer-Sent Eventsを利用する方法を提供することで、プロジェクトにとって重要なマイルストーンでした。[ 9 ]

2023年、htmxはGitHub Acceleratorプログラムの最初のコホートに追加されました。このプログラムは、成熟したオープンソースプロジェクトのメンバーから資金と指導をオープンソースプロジェクトに提供するプログラムです。[ 10 ]

デザインと機能性

htmx は、最新のフレームワークの機能と従来のウェブ アプリケーションのサーバー側処理を組み合わせています。[ 11 ]ライブラリの設計理念は、「HTML をハイパーテキストとして完成させる」という目標を中心に展開されています。[ 12 ]プレフィックスが付いたカスタムHTML 属性を活用してAJAXリクエストをhx-トリガーし、 DOMの一部を更新することで、htmx では、開発者がマークアップ内で直接動的な動作を定義できるため、広範な JavaScript コードの必要性が軽減されるか、まったくなくなることがあります。[ 13 ] [ 14 ]これにより、ライブラリは大きなバンドル、[ 15 ]複雑な状態管理、およびハイドレーションに関する問題を回避できます。[ 16 ]このアプローチにより、従来の JavaScript フレームワークによくある複雑さを回避しながら、最新のユーザー インターフェイスをよりアクセスしやすく直感的に構築できます。[ 17 ] htmxは、プレーンなHTMLやCSSの場合のようにページ全体をリロードする必要なくウェブページの特定の部分を更新できるため、サーバーからデータの一部のみを再取得する必要があるため、ユーザーエクスペリエンスとパフォーマンスが向上する可能性があります。[ 18 ]

このライブラリは、 JSON をHTTPリクエストの標準ペイロードとして利用する一般的なアプローチをHTML に置き換えることによって挑戦しています。[ 5 ]これは、 JavaScript や JSON が 2 の53乗を超える数値を正確に処理できないことや、浮動小数点数と整数を区別できないこと、 GraphQLや gRPC など JSON 指向の REST の代替に伴う複雑さなど、JSON のシリアル化、デシリアル化、およびその後のユーザーインターフェイスでの使用に関するパフォーマンスと認知オーバーヘッドに関連する問題を解決することを目的としています。[ 19 ]さらに、htmx やハイパーテキスト指向のアプローチ全般の潜在的な利点は、データベースから直接取得されたデータが、多くのドキュメントデータベースやPostgreSQLの JSON 型で使用されるような JSON または JSON 準拠の形式である必要がなく、バックエンドでシリアル化してからフロントエンドで再度デシリアル化する必要がないことです。[ 20 ]クライアント側の計算量が減ることで、開発の焦点をバックエンドに移すのにも役立ち、サーバーの負荷は高くなるものの、クライアント側のパフォーマンスが向上する可能性があります。また、開発者は、他のプログラミング言語でクライアント側のJavaScriptを使用して解決していた問題を、より簡単に解決できるようになります。[ 21 ]

使用法

htmx は HTML にカスタム属性を追加して、サーバー リクエストのトリガーやコンテンツの更新などの動的な動作を定義します。htmx の機能は、指定された HTTP メソッドで AJAX リクエストを発行する属性、、、、および に基づいています。hx-get[ 11 ] [ 18 ]これらのリクエストは、input 要素、select要素、textarea要素の場合、フォーム要素の場合、その他の要素の場合など、特定のDOM イベントが発生したときに作成されます。[ 11 ]イベントは で上書きすることもできます。[ 22 ]その他の属性には、現在の要素以外のターゲットを指定してコンテンツをスワップする属性や、サーバーから取得したコンテンツをターゲット要素を基準にしてどのようにスワップまたは配置するかを設定する属性などがあります。[ 23 ] [ 24 ]hx-posthx-puthx-deletehx-patchchangesubmitclickhx-triggerhx-targethx-swap

コミュニティと養子縁組

intercooler.js として始まり、その後 htmx へと進化して以来、このライブラリはウェブ開発コミュニティで大きな支持を得てきました。[ 25 ] [ 26 ] htmx は、 React、Vue.js、Angularなどの本格的な JavaScript フレームワークの、よりシンプルで軽量な代替手段と見なされてきました。[ 27 ] [ 28 ]その結果、動的なウェブアプリケーションを構築するためのほとんどの JavaScript フレームワークで使用されるアプローチの代替として、一定の人気を得ています。[ 29 ]

htmxの統合は、 Node.js、Django、Flask、Adobe ColdFusion、ASP.NET、Java、Clojure、Ruby on Railsなど、さまざまなフルスタック/バックエンドWebフレームワーク、プログラミング言語、テンプレートエンジン向けに開発されてきました。[ 30 ] htmxの移植性とミニマリストな設計により、事実上あらゆるHTMLテンプレートエンジンと統合できるため、このようなライブラリは通常、利便性のみを目的としています。[ 12 ]

参照

参考文献

  1. ^ 「リリース v1.0.0 - HTMX」。GitHub 。
  2. ^ 「リリース 2.0.7」 . 2025年9月11日. 2025年9月15日閲覧。
  3. ^ "htmx/LICENSE" . HTMX . 2024年4月30日閲覧– GitHub経由。
  4. ^ 「htmx 1.0.0がリリースされました」 . HTMX. 2020年11月24日. 2024年4月4日閲覧。
  5. ^ a b Melanson, Mike (2022年1月19日). 「Htmx: JavaScriptの世界におけるインタラクションへのHTMLアプローチ」 . The New Stack . 2024年4月24日閲覧。
  6. ^ Gross, Carson. 「HTML属性を使用したシンプルなAJAX」 . Intercooler.js . 2024年4月24日閲覧。
  7. ^ Fielding, Roy T. (2008年10月20日). 「REST APIはハイパーテキスト駆動型でなければならない」Untangled .
  8. ^ "htmx ~ htmx 1.0.0 がリリースされました！" . htmx.org . 2024年4月24日閲覧。
  9. ^ "htmx | テクノロジーレーダー" . Thoughtworks .
  10. ^ Sowles, Kara (2023年4月12日). 「GitHub Accelerator：最初のコホートと今後の展望」 GitHubブログ. 2024年4月24日閲覧。
  11. ^ a b c Hibbard, James (2023年8月8日). 「HTMLに特化した動的UIライブラリ、htmx入門」 . SitePoint . 2024年4月4日閲覧。
  12. ^ a b Tyson, Matthew (2023年9月20日). 「HTML入門：JavaScript不要のダイナミックHTML」InfoWorld . 2024年4月24日閲覧。
  13. ^ 「HTMX入門 | 改良」 2023年10月26日。
  14. ^ Tyson, Matthew (2024年3月13日). 「複雑性は悪影響：HTMX開発者Carson Gross氏へのインタビュー」 InfoWorld . 2024年4月24日閲覧。
  15. ^ Sheppard, Dennis (2017)、「Leveling Up Your PWA」、Beginning Progressive Web App Development、カリフォルニア州バークレー：Apress、pp.  243– 259、doi：10.1007/978-1-4842-3090-9_12、ISBN 978-1-4842-3089-3、2024年4月30日取得{{citation}}: CS1 maint: ISBNによる作業パラメータ（リンク）
  16. ^ 「HTMX の初見と React との比較」Builder.io。
  17. ^ "htmx ~ Essays" . htmx.org . 2024年4月30日閲覧。
  18. ^ a b "htmx ~ ドキュメント" . htmx.org . 2024年4月30日閲覧。
  19. ^ Kleppmann, Martin (2017-03-01). 「データエンコード形式」.データ集約型アプリケーションの設計(epub) (第1版). 1005 Gravenstein Highway North, Sebastopol, CA 95472, アメリカ合衆国: O'Reilly Media . JSON、XML、およびバイナリバリアント. ISBN 9781491903100。{{cite book}}: CS1 メンテナンス: 場所 (リンク)
  20. ^史、玄華;張、宜鵬。黄、ホン。胡振宇。ジン、ハイ。シェン、フアン。周永琳。彼、ビンシェン。李、ルイボ。周、圭庸（2020年4月）。 「マクソン: 生データの重複解析オーバーヘッドを削減」。2020 IEEE 第 36 回データ エンジニアリング国際会議 (ICDE)。 IEEE。 pp.  1621–1632。土井: 10.1109/ICDE48307.2020.00144。ISBN 978-1-7281-2903-7。
  21. ^エッケルト、ラファエロ (2023-03-23). Erstellen eines einfach bedienbaren und einfachimplementierbaren UI-Konzepts mit Go und htmx [ Go と htmx を使用した使いやすく、実装が簡単な UI コンセプトの作成] (PDF) (ドイツ語)。ハイルブロン:ハイルブロン大学。
  22. ^ Jack, Bobby (2024年1月22日). 「htmxとは何か、そしてウェブサイトを簡素化するにはどうすればよいか？」 MUO . 2024年9月3日閲覧。
  23. ^ "htmx ~ hx-target 属性" . htmx.org . 2024年9月3日閲覧。
  24. ^ "htmx ~ hx-swap 属性" . htmx.org . 2024年9月3日閲覧。
  25. ^ "@htmx_org" . X (旧Twitter) . 2024年5月19日閲覧。
  26. ^ "htmx.org" . npm . 2024年4月17日. 2024年4月30日閲覧。
  27. ^ Tyson, Matthew (2024年4月1日). 「最高のJavaScriptフレームワークは何か？」 InfoWorld . 2024年5月19日閲覧。
  28. ^デール、キラン (2022-12-07)。 「第 4 章 Webdev 101」。Python と JavaScript によるデータ視覚化(第 2 版)。カリフォルニア州セバストポル：オライリーメディア。ISBN 9781098111878。
  29. ^ Letusheva, Valeria (2024年5月9日). 「Django開発者調査2024のハイライト」 . InfoWorld . 2024年5月19日閲覧。
  30. ^ "htmx ~ サーバーサイドの例" . htmx.org . 2024年5月19日閲覧。
「 https://en.wikipedia.org/w/index.php?title=Htmx&oldid=1334406445」から取得