用語集 › 💻 プログラミング › 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 というライブラリだよ
🔗 あわせて読みたい
← 用語集にもどる