用語集 › 💻 プログラミング › htmx
【エイチティーエムエックス】

htmx とは？

最終更新:
💡 HTMLだけで動的ページ？魔法の属性、htmx！
📌 このページのポイント
SPA vs htmx アーキテクチャ比較 従来のSPA ブラウザ React / Vue / Angular 大量のJavaScript JSON APIサーバー JSON APIを設計・実装 データベース htmx ブラウザ HTML + hx-get, hx-post JSほぼ不要 HTML断片 サーバー HTMLテンプレートを返すだけ データベース
SPA vs htmx のアーキテクチャ比較
ひよこ ひよこ
htmxって何がすごいの？普通のHTMLと何が違うの？
ペンギン先生 ペンギン先生
普通のHTMLだとリンクをクリックするとページ全体がリロードされるよね。htmxを使うと、HTML属性を書くだけでページの一部だけを更新できるんだよ
ひよこ ひよこ
えっ、それってReactとかVueがやってることと同じ？
ペンギン先生 ペンギン先生
似てるけどアプローチが全然違うんだ。ReactやVueはJavaScriptでUIを構築するけど、htmxはサーバーがHTMLの断片を返して、それをページに差し込むだけ。JavaScriptをほぼ書かなくていいんだよ
ひよこ ひよこ
じゃあサーバー側はどうなるの？
ペンギン先生 ペンギン先生
サーバーはJSON APIじゃなくてHTMLの部品を返すだけでいい。たとえばボタンを押したらサーバーが「<li>新しい項目</li>」みたいなHTMLを返して、htmxがそれをリストに追加してくれるんだ
ひよこ ひよこ
なんかシンプルでいいね！でもSPAに比べてデメリットはないの？
ペンギン先生 ペンギン先生
複雑なクライアント側のインタラクション（ドラッグ＆ドロップとか）は苦手かな。でも実は世の中のWebアプリの8割はhtmxレベルのインタラクションで十分だと言われてるんだよ
ひよこ ひよこ
そういえば最近htmxが流行ってるって聞くけど、なんで今さら？
ペンギン先生 ペンギン先生
フロントエンドの複雑さに疲れた開発者が増えたんだよね。SPAは確かに強力だけど、ビルドツールやstate管理など覚えることが多すぎる。htmxは「Web本来のシンプルさに戻ろう」という思想で支持を集めているんだよ
ペンギン
まとめ：ざっくりこれだけ覚えればOK！
「htmx」って出てきたら「HTMLの属性だけでページを動的にできるライブラリ」と思えればだいたいOK！
📖 おまけ：英語の意味
「HTML Extensions」 ＝ HTMLの拡張
💬 HTMLを拡張（extend）してインタラクティブにするという意味で「htmx」と名付けられたよ。前身は intercooler.js というライブラリだよ
🔗 あわせて読みたい
← 用語集にもどる