HTMXとは

2024-07-13

HTMX（HTML Extensions）は、HTML属性を拡張してインタラクティブなウェブアプリケーションを簡単に作成するためのライブラリです。

JavaScriptの使用を最小限に抑え、サーバーサイドとシームレスに連携することで、リアルタイム検索やインプレース編集など多様な機能を簡単に実装できます。

特徴

おもに以下の4つの特徴があります。

動的コンテンツのロード
hx-get、hx-post、hx-put、hx-deleteなどの属性を使用して、指定したURLからコンテンツを取得し、ページの一部を更新します。
インタラクティブなフォーム
フォームの送信やバリデーションを簡単に実装できます。
hx-trigger属性を使用して、特定のイベントに反応してアクションを実行します。
部分的なページ更新
AJAXリクエストを利用して、ページ全体をリロードせずに部分的な更新を行います。
hx-target属性を使って、更新したい要素を指定します。
イベントハンドリング
hx-trigger属性を使って、クリックやホバーなどのイベントに応じてアクションを実行します。
複数のイベントを組み合わせることも可能です。

インクリメンタルサーチ（リアルタイム検索）

完成コード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Incremental Search</title>
  <script src="https://unpkg.com/htmx.org@1.8.0"></script>
</head>
<body>
  <input
    type="text"
    id="search"
    hx-get="search.php"
    hx-trigger="keyup changed delay:500ms"
    hx-target="#results"
  >
  <div id="results"></div>
</body>
</html>

通常のHTMLではinputタグを1行で書きますが、記述が多いため、見やすく改行してあります。

<?php
$query = $_GET['q'] ?? '';
$results = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
$filtered = array_filter($results, function($item) use ($query) {
  return stripos($item, $query) !== false;
});
foreach ($filtered as $result) {
  echo '<p>' . htmlspecialchars($result) . '</p>';
}
?>

解説

HTML部分

inputタグにhx-get属性が指定されており、入力欄内の文字列をsearch.php宛にGETリクエストで送信します。
hx-trigger=”keyup changed delay:500ms”は、入力欄内の入力内容に変化があった後500ミリ秒後にリクエストを送信するように指定しています。

※上記でなぜ入力直後ではなく500ミリ秒後にリクエストを送信しているかというと、連続で入力している最中に不要な通信を発生させないためです。

PHP部分

PHPはGETリクエストと同時に、HTMLの入力欄内の内容も受け取ります。
$results配列にある項目を、受け取った入力内容でフィルタリングし、部分一致するものだけを返します。
結果としてマッチした項目をHTMLタグ、ここではpタグに包んで出力します。

最終処理部分

PHPが出力したpタグはHTMLに渡されます。
hx-target=”#results”は、渡されたpタグを<div id=”results”>内に挿入することを意味しています。
このことにより、入力欄に入力した内容で検索された結果が、<div id=”results”>内に出力されることになります。

コンテンツ追加表示

完成コード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Load More</title>
  <script src="https://unpkg.com/htmx.org@1.8.0"></script>
</head>
<body>
  <div id="content">
    <li>記事1</li>
    <li>記事2</li>
    <li>記事3</li>
    <li>記事4</li>
    <li>記事5</li>
    <li>記事6</li>
    <li>記事7</li>
    <li>記事8</li>
    <li>記事9</li>
    <li>記事10</li>
  </div>
  <button
    id="load-more"
    hx-get="load_more.php?page=2"
    hx-trigger="click"
    hx-target="#content"
    hx-swap="beforeend"
  >
    Load More
  </button>
</body>
</html>

通常のHTMLではbuttonタグを1行で書きますが、記述が多いため、見やすく改行してあります。

<?php
$page = $_GET['page'] ?? 1;
$moreContent = [
  '記事11',
  '記事12',
  '記事13',
  '記事14',
  '記事15',
  '記事16',
  '記事17',
  '記事18',
  '記事19',
  '記事20'
];
foreach($moreContent as $list) {
  echo '<li>' . $list . '</li>';
}
?>

配列の内容をliタグで囲んで出力するためにループ処理しています。

解説

HTML部分

ボタンにhx-get属性が指定されており、クリックされるとload_more.php?page=2にGETリクエストを送信します。

PHP部分

PHPはGETリクエストと同時に、GETパラメータとして送信されたページ番号も受け取ります。
そして受け取ったページ番号に基づいて、事前に用意されている配列の内容をHTMLタグ、ここではliタグに包んで出力します。

最終処理部分

PHPが出力したliタグはHTMLに渡されます。
hx-target=”#content”は、レスポンスの内容を<div id=”content”>に挿入することを意味しています。
hx-swap=”beforeend”は、<div id=”content”>の内容の末尾にliタグを追加することを指定しています。
このことにより、ボタンをクリックすると、<div id=”content”>内にコンテンツが出力されることになります。

まとめ

HTMXを用いたインタラクティブなWebアプリケーションは、ユーザーエクスペリエンスを向上させ、ページ全体のリロードを回避して動的にコンテンツを更新する手法です。

例えば、インプレース編集、動的なフォームフィールドの追加、モーダルダイアログの動的ロードなどが挙げられます。
しかし、これらの機能を一般公開のWebページで利用する際は注意が必要です。

悪意のある操作や、意図しない操作によるデータ変更の可能性があるため、適切な認証や検証をサーバーサイドで行う必要があります。
管理画面や特定のユーザーグループ向けのアプリケーションでは非常に有効であり、適切なセキュリティ対策を講じることで、安全に活用できます。

実際にHTMXを使用する際は、管理画面側（WEBアプリ側）をHTMXで作成して、公開側（WEBサイト側）には使用しないほうが良いでしょう。
公開側でgetを記述していたとしても、知識があればputやdeleteに書き換えられます。
改めて言います。
新しい技術だといって、安易に導入しないようにしましょう。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！