HTMX 2025 - JavaScriptフレームワーク不要のモダンWeb開発

HTMXの台頭

2025年、HTMXはGitHubスター数でReact、Svelte、Vueを上回り、開発者コミュニティで大きな注目を集めています。わずか14KBのライブラリが、Web開発のあり方を根本から問い直しています。

HTMXとは

HTMXは、HTML属性を拡張してJavaScriptなしで動的なWebページを構築するオープンソースライブラリです。その目標は、ハイパーテキストをWeb開発の中心に取り戻すこと。

<!-- シンプルなHTMX例 -->
<button hx-get="/api/data"
        hx-target="#result"
        hx-swap="innerHTML">
  データを取得
</button>

<div id="result">
  <!-- ここにレスポンスが挿入される -->
</div>

なぜHTMXが注目されるのか

SPAへの疲労

開発者は「SPAデフォルト」の考え方に疲れを感じています。複雑なビルドツール、膨大なnode_modules、フレームワークのバージョンアップ対応…

HTMXの哲学

・HTML本来の力を活用
・JavaScriptを最小限に
・サーバーサイドレンダリングとの親和性
・10年後も同じコードが動く安定性

基本的な使い方

AJAX リクエスト

<!-- GETリクエスト -->
<div hx-get="/users" hx-trigger="load">
  読み込み中...
</div>

<!-- POSTリクエスト -->
<form hx-post="/users" hx-target="#user-list">
  <input name="name" type="text" required>
  <button type="submit">追加</button>
</form>

トリガーイベント

<!-- クリック時（デフォルト） -->
<button hx-get="/data" hx-trigger="click">クリック</button>

<!-- 入力変更時（500msデバウンス） -->
<input hx-get="/search"
       hx-trigger="keyup changed delay:500ms"
       hx-target="#results"
       name="q">

<!-- スクロール時（無限スクロール） -->
<div hx-get="/more"
     hx-trigger="revealed"
     hx-swap="afterend">
</div>

スワップ方法

<!-- innerHTML（デフォルト）：内部を置換 -->
<div hx-get="/content" hx-swap="innerHTML">

<!-- outerHTML：要素全体を置換 -->
<div hx-get="/content" hx-swap="outerHTML">

<!-- beforeend：末尾に追加 -->
<div hx-get="/items" hx-swap="beforeend">

<!-- delete：要素を削除 -->
<button hx-delete="/item/1" hx-swap="delete">削除</button>

バックエンドとの統合

Python (Flask)

from flask import Flask, render_template_string

app = Flask(__name__)

@app.route('/users')
def users():
    users = get_users()
    return render_template_string('''
        {% for user in users %}
        <li>{{ user.name }}</li>
        {% endfor %}
    ''', users=users)

@app.route('/users', methods=['POST'])
def create_user():
    name = request.form['name']
    user = create_user(name)
    return f'<li>{user.name}</li>'

Go (Gin)

func main() {
    r := gin.Default()

    r.GET("/users", func(c *gin.Context) {
        users := getUsers()
        c.HTML(200, "users.html", gin.H{
            "users": users,
        })
    })

    r.Run()
}

Node.js (Express + EJS)

app.get('/users', async (req, res) => {
    const users = await User.findAll();
    res.render('partials/user-list', { users });
});

HTMXの安定性哲学

HTMXチームは明確な方針を掲げています:

「2025年に書いたHTMXコードは、2035年以降も同じように動くべき」

・後方互換性の重視
・低メンテナンスコスト
・HTML標準への貢献を目指す

理想的には、HTMXのコアアイデアがHTML標準に組み込まれ、ライブラリ自体が不要になることを目指しています。

適したユースケース

向いているケース

✅ CRUDアプリケーション
✅ 管理画面・ダッシュボード
✅ フォーム処理が中心のサイト
✅ SSRフレームワークとの組み合わせ
   (Django, Rails, Laravel, Flask, Express)
✅ 段階的なインタラクティブ化

向かないケース

❌ リッチなインタラクティブUI
❌ オフライン対応が必要
❌ 複雑なクライアントサイド状態管理
❌ リアルタイムコラボレーション

Alpine.jsとの組み合わせ

追加のインタラクティブ性が必要な場合、Alpine.jsと組み合わせるパターンが人気。

<!-- HTMX + Alpine.js -->
<div x-data="{ open: false }">
  <button @click="open = !open">メニュー</button>

  <div x-show="open"
       hx-get="/menu-items"
       hx-trigger="load">
    <!-- HTMXで動的にロード -->
  </div>
</div>

パフォーマンス比較

今後の展望

2026年に向けた予測:

• SSRフレームワーク（Django、Flask、Laravel）との統合強化
• Go、Rustなどのバックエンドとの組み合わせ増加
• コンポーネントベースのパターン確立
• HTML標準への影響（将来的な組み込み）

参考: HTMX - The future of htmx

まとめ

HTMXは「JavaScriptフレームワーク疲れ」に対する解答として、2025年に大きな支持を集めています。すべてのアプリケーションに適しているわけではありませんが、シンプルさ、安定性、サーバーサイドとの親和性を重視する多くのプロジェクトで、HTMXは強力な選択肢となっています。