Blog

スタッフブログ

2024.07.22

HTMXとは何か

はじめに

皆さんは「htmx」というものご存じでしょうか？
「htmx」ではなく「html」はご存じの方が多いと思います。XというのはeXtensionsのことで「HTML extensions」で「htmx」だそうです。
私は最近知る機会がありまして、「へえ、こんなものあるんだな～、仕事に使えることあるかな～」なんて考えている最中です。
今回は、htmxを簡単に紹介いたします。

Htmxとは何か

公式によると下記のように書かれています。

htmxは、HTMLの属性を使用して、AJAX、CSSトランジション、WebSockets、およびサーバー送信イベントに直接アクセスできるようにするため、ハイパーテキストのシンプルさと強力さを兼ね備えたモダンなユーザーインターフェースを構築できます。

htmxは小さく（約14k min.gz’d）、依存関係がなく、拡張可能で、Reactと比較してコードベースのサイズを67％削減しました。（Chatgpt訳）

HTMLの属性を利用して、AJAXなどのサーバー送信ができる…みたいな感じでしょうか。「ajax処理でJavascriptがいらなくなるのか…？」みたいな気持ちになります。
実際に簡単なコードを作成してみましたので、紹介させていただきます。

Htmxの例

まずはindex.phpを作成します。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Htmxのテスト</title>
</head>
<body>
    <button hx-get="./clicked.php">
        Click Me
    </button>
    <br>
    <button hx-get="./clicked.php" hx-swap="outerHTML">
        Click Me
    </button>
    <br>
    <button hx-get="./clicked.php" hx-target="#response">
        Click Me
    </button>
    <div id="response">この中に内容が入る</div>
    <br>
    <button hx-get="./clicked.php" hx-trigger="mouseover" hx-target="#response2">
        Hover Me
    </button>
    <div id="response2">この中に内容が入る</div>
    <br>
    
    <label for="username">ユーザー名:</label>
    <input name="username" type="text" hx-get="./validate.php" hx-trigger="blur" hx-target="#response3">
    <div id="response3">この中に内容が入る</div>
    
    <script src="https://unpkg.com/htmx.org@2.0.1"></script>
</body>
</html>

次に、同じ場所にclicked.phpを作成します。

HTML

<h2>株式会社サーフボード</h2>
<p>株式会社サーフボードは、Web制作を行っている会社です。</p>

更に同じ場所にvalidate.phpも作成します。

PHP

<?php
if (isset($_GET['username'])) {
    $username = $_GET['username'];
    // バリデーションロジック
    if (empty($username)) {
        echo "ユーザー名を入力してください。";
    } elseif (mb_strlen($username) < 3) {
        echo "ユーザー名は3文字以上で入力してください。";
    } else {
        echo "ユーザー名「{$username}」は登録可能です。";
    }
} else {
    echo "ユーザー名を入力してください。";
}
?>

これで完了です。
実際の挙動を見てみましょう

解説

・hx-get属性
リクエストを送信先を指定する属性です。hx-postやhx-putというものもあります。GET・POST・PUTの送信ができます。

・hx-swap属性
レスポンスした結果をどのように出力するかを指定します。何も書かない場合はinnerHTMLとして扱われます。outerHTMLの場合はタグの外側に表示されます。今回の場合は、buttonタグ内かタグ外の例の２つ出してみました。

・hx-target属性
レスポンスの内容を表示する場所を指定できます。

・hx-trigger属性
どのタイミングでリクエストを送信するかを指定します。何も書かない場合はclickとして扱われます。mouseover（マウスカーソルを当てたとき）、blur（フォーカスを離れたとき）、keyup（keyを離したとき）など様々なタイミングを指定できます。

感想

実際にコードを書いて動かしてみましたが、htmxには可能性を感じるところがあります。特にリクエスト結果を表示させるという基本動作においては、javascriptを凌駕していると思います。javascriptはDOM操作が大変なところがありますから…。

私は基本的にJqueryを用いてajax処理を記述していますが、htmxを利用することで場合によってコード量を減らすことができる気がします。ただ、複雑な処理を行うには、まだまだ勉強不足なところがあります。新しいものであるため、情報も少ないでしょう。

htmxの利用の目標としては、適切なところで利用していきながら、知識を増やしていこうと考えています。皆さんもHTMXを試してはいかがでしょうか？

一覧へ戻る