htmxとは？初心者にもわかりやすく解説

2025年6月26日

近年注目を集めているのが、htmx。

これは、従来のSPA（Single Page Application）と異なるアプローチで、

HTMLだけでリッチなインタラクションを実現できる軽量ライブラリです。

この記事では、

htmxの始め方や特徴、

代表的な属性（hx-get / hx-swap / hx-target / hx-trigger）などを中心に、

サンプルコード付きでわかりやすく解説します。

htmx？なんかわからんのが出てきた。解説おねしゃす。

htmxとは何か？

htmxとは、HTML extensionsの略で、

「HTMLでAjaxやWebSocket的なことを簡単に実装できる」軽量のJavaScriptライブラリです。
従来のように大量のJSコードを書く代わりに、

HTML属性（カスタム属性）を追加するだけで、動的な動作を作り出せます。

特徴は以下のような感じ。

HTMLに属性を追加するだけの宣言的な記述
フロントエンドの複雑性を抑制
サーバーとの通信はシンプルなHTTPリクエストベース
バンドルサイズが小さく、パフォーマンスに優れる

htmxの基本構文：hx-get / hx-swap / hx-target / hx-trigger

htmxでは、以下のような属性をHTML要素に追加することで、

JavaScript不要で非同期通信が実現できます。

属性名	概要
`hx-get`	指定したURLにGETリクエストを送る
`hx-post`	指定したURLにPOSTリクエストを送る
`hx-trigger`	イベントトリガー（例：クリック時に実行）
`hx-target`	レスポンスを挿入する対象のDOM要素
`hx-swap`	挿入方法（replace, innerHTML, beforeなど）

<!-- ボタンクリックでGETリクエストし、結果を #result に表示 -->
<button 
  hx-get="message.html" 
  hx-trigger="click" 
  hx-target="#result" 
  hx-swap="innerHTML">
  メッセージを取得
</button>

<div id="result"></div>

HTML

上記コードでは、ボタンをクリックするだけで

/message にGETリクエストを送り、その結果を #result に差し替えます。

これだけで非同期通信が完了します。

HTMLだけ vs htmx：比較してみよう

通常のJavaScriptで同じ処理を行おうとすると、以下のようなコードが必要になります。

JavaScriptでの処理（非htmx）

<button id="btn">メッセージを取得</button>
<div id="result"></div>

<script>
  document.getElementById('btn').addEventListener('click', async () => {
    const res = await fetch('message.html');
    const text = await res.text();
    document.getElementById('result').innerHTML = text;
  });
</script>

HTML

htmxを使った場合（同じ動作）

<button 
  hx-get="message.html" 
  hx-trigger="click" 
  hx-target="#result" 
  hx-swap="innerHTML">
  メッセージを取得
</button>

<div id="result"></div>

HTML

これだけで同じ機能が実現できるのがhtmxの魅力です。
HTML主体のままでUIの動的更新が可能になり、

複雑な状態管理やJSコードの肥大化を防ぐことができます。

htmxの始め方：導入はとても簡単

ステップ1：CDNで読み込む

<script src="https://unpkg.com/htmx.org@2.0.0"></script>

HTML

HTMLの<head>や<body>内に上記のように追加するだけで、

すぐにhtmxの機能が使えるようになります。

ステップ2：htmxのコードを書く

今回のサンプルでは、同じフォルダに「message.html」がある想定です。

message.htmlには下記のような中身が書かれているとします。

message.html

<p>こんにちは、htmx！これは静的ファイルから読み込まれました。</p>

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>htmxの基本例</title>
  <script src="https://unpkg.com/htmx.org@2.0.0"></script>
</head>
<body>
  <button 
    hx-get="message.html" 
    hx-trigger="click" 
    hx-target="#result" 
    hx-swap="innerHTML">
    メッセージを取得
  </button>

  <div id="result"></div>
</body>
</html>