HTMX入門: HTMLだけで動的なWebアプリを作る方法 🚀

はじめに

HTMXは、JavaScriptをほとんど書かずに、HTMLだけで動的なWebアプリケーションを構築できる軽量ライブラリです。
「HTMLを拡張して、モダンなブラウザ機能を直接利用する」というコンセプトのもと、シンプルかつ効率的な開発体験を提供します。

この記事では、HTMXの基本的な使い方やメリットを解説しつつ、実際に動作するコード例や図解を交えて、その魅力に迫ります。

HTMXとは？

HTMXは、HTMLの属性（例: hx-get, hx-post）を利用して、AJAXリクエストや部分的なDOM更新を簡単に実現するライブラリです。

主な特徴

軽量 & 高速: ライブラリ自体が非常に小さく、ページロードが速い。
HTML駆動のインタラクション: HTML属性により、動的な動作を実現。
部分更新: ページ全体ではなく、一部のDOM要素のみを更新可能。
プログレッシブエンハンスメント: 必要に応じて段階的に機能追加が可能。

HTMXの仕組み

以下はHTMXの基本的なフローを示したフローチャートです：

HTMX Flowchart

HTML要素がユーザー操作（例: クリック）をトリガー。
AJAXリクエストがサーバーに送信される。
サーバーからのレスポンス（HTML）が返される。
指定されたDOM要素が更新される。

基本的な使い方

1. HTMXの導入

以下のコードでHTMXライブラリをCDNから読み込みます：

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

これだけで準備完了！あとはHTML属性を追加するだけで動的な機能が使えます。

2. 簡単な例: ボタンでデータ取得

以下は、ボタンをクリックしてサーバーからデータを取得し、それをページ内に表示する例です：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>HTMX Example</title>
  <script src="https://unpkg.com/htmx.org" defer></script>
</head>
<body>
  <button hx-get="/data" hx-target="#result" hx-swap="innerHTML">
    データ取得
  </button>
  <div id="result">ここに結果が表示されます</div>
</body>
</html>

解説

hx-get="/data": /dataエンドポイントへGETリクエストを送信。
hx-target="#result": レスポンスの内容を#result要素に挿入。
hx-swap="innerHTML": レスポンスで現在の内容を置き換える。

応用例: 動的フォーム

次は、フォーム送信時にページ全体をリロードせず、結果だけを更新する例です：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Dynamic Form</title>
  <script src="https://unpkg.com/htmx.org" defer></script>
</head>
<body>
  <form hx-post="/submit" hx-target="#response" hx-swap="innerHTML">
    <label for="name">名前:</label>
    <input type="text" id="name" name="name">
    <button type="submit">送信</button>
  </form>

  <div id="response">ここにサーバーからの応答が表示されます。</div>
</body>
</html>

解説

hx-post="/submit": フォームデータをPOSTリクエストとして送信。
サーバーから返されたHTMLレスポンスが#response要素内に挿入されます。

HTMXのメリットと注意点

メリット

シンプルなコード: JavaScriptを書く必要がほとんどないため、コード量が大幅に削減。
高速な開発: HTML中心の記述で直感的に開発可能。
柔軟性: あらゆるバックエンド技術と組み合わせて使用可能。

注意点

サーバー依存度: 動的部分の処理は基本的にサーバー側で行うため、負荷分散設計が重要。
複雑なUIには不向き: ReactやVueほど高度な状態管理はできない。

実践例：TODOアプリ

以下は簡単なTODOアプリの一部です。新しいタスクを追加し、一覧表示します：

<div id="todo-list">
  <!-- タスク一覧 -->
</div>

<form hx-post="/add-todo" hx-target="#todo-list" hx-swap="beforeend">
  <input type="text" name="task" placeholder="新しいタスク">
  <button type="submit">追加</button>
</form>

このコードでは、新しいタスクがサーバー側で処理され、その結果が#todo-list内に追加されます。

結論

HTMXは、「シンプルさ」と「効率性」を兼ね備えたライブラリです。特に、小規模プロジェクトや部分的なインタラクションには最適です。ぜひ試してみてください！

Happy coding! 🎉

💖 ご支援いただけませんか？

このブログでは、高品質な情報提供と学習活動を通じて、読者の皆さまのお役に立つことを目指しています。もしこの記事が役立ったと感じていただけましたら、ご支援いただけると幸いです！

暗号資産による寄付

以下のウォレットアドレスをご利用ください。重要：Ethereum (ETH)、BNB Chain (BNB)、Polygon (MATIC)、Avalanche (AVAX) は、全て以下の同一アドレスを使用しますが、送金ネットワークの選択を間違えると資金が失われます！送金時には、絶対に使用するネットワーク（例: ERC-20、BEP-20、Polygon、Avalanche C-Chain）を必ず正しく選択してください。

Ethereum (ETH) （ネットワーク: ERC-20）

0x5CDA2F68f59F641B00aD172475c3d5fC10321174

BNB Chain (BNB) （ネットワーク: BEP-20）

0x5CDA2F68f59F641B00aD172475c3d5fC10321174

Polygon (MATIC) （ネットワーク: Polygon）

0x5CDA2F68f59F641B00aD172475c3d5fC10321174

Avalanche (AVAX) （ネットワーク: Avalanche C-Chain）

0x5CDA2F68f59F641B00aD172475c3d5fC10321174

Solana (SOL)

EnPFbqDbF67rU9mAPvfgh4YYtncJNbFQ9NLQ5R6z5S2f

Stellar (XLM) メモ: 必要に応じて入力してください。

GCSMWCACKVEZ737GZAV4AJRFL52ZZKVQ7M3B3KYY64JJGOAO2GDYKABO

Ripple (XRP) タグ: 必要に応じて入力してください。

r1s4EASr3zQRrfpDA3ptTahezBhGo2hhN

Cardano (ADA)

addr1q8heq6ddw8rwlqa5hqlucnfk36arah9tzc8ajxvu83870h7lrre25wzq9yemex857we56cm0xu8tmxqvm8nykmtgsjdqavdpv7

Dogecoin (DOGE)

DRFZ9JhAk3DTtu1tV85cawekWNrm1vKm3H

資金用途

寄付金は以下の目的で活用させていただきます：

サーバー維持費やデザインツール購入
学習活動（オンラインコース受講・書籍購入）
読者向け無料コンテンツ制作

ご協力いただいた皆さまには心より感謝申し上げます！ 🙏

補足情報

Ethereum (ETH)、BNB Chain (BNB)、Polygon (MATIC)、Avalanche (AVAX)について
上記4つのネットワークは同じウォレットアドレス（0x5CDA2F68f59F641B00aD172475c3d5fC10321174）を使用します。ただし、送金時には、絶対に使用するネットワーク（例: ERC-20、BEP-20、Polygon、Avalanche C-Chain）を必ず正しく選択してください。
USDCやUSDTなどのステーブルコインも、対応するネットワーク経由であれば送金可能です。ただし、送金先のネットワークと選択するネットワークが一致していることを必ず確認してください。
初回送金時には少額でテスト送金することをおすすめします。