用語集 › 💻 プログラミング › 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の部品を返すだけでいい。たとえばボタンを押したらサーバーが「

  • 新しい項目
    • 」みたいなHTMLを返して、htmxがそれをリストに追加してくれるんだ

    ひよこ ひよこ

    なんかシンプルでいいね！でもSPAに比べてデメリットはないの？

    ペンギン先生 ペンギン先生

    複雑なクライアント側のインタラクション（ドラッグ＆ドロップとか）は苦手かな。でも実は世の中のWebアプリの8割はhtmxレベルのインタラクションで十分だと言われてるんだよ

    ひよこ ひよこ

    そういえば最近htmxが流行ってるって聞くけど、なんで今さら？

    ペンギン先生 ペンギン先生

    フロントエンドの複雑さに疲れた開発者が増えたんだよね。SPAは確かに強力だけど、ビルドツールやstate管理など覚えることが多すぎる。htmxは「Web本来のシンプルさに戻ろう」という思想で支持を集めているんだよ

    ペンギン
    まとめ：ざっくりこれだけ覚えればOK！
    「htmx」って出てきたら「HTMLの属性だけでページを動的にできるライブラリ」と思えればだいたいOK！
    📖 おまけ：英語の意味
    「HTML Extensions」 ＝ HTMLの拡張
    💬 HTMLを拡張（extend）してインタラクティブにするという意味で「htmx」と名付けられたよ。前身は intercooler.js というライブラリだよ
    🔗 あわせて読みたい
    ← 用語集にもどる