こんにちは。植松です。
HTMXと呼ばれる技術が流行っているようなので調べてみました。

HTMXとは

公式には以下が書いてありました。

htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext
訳：htmxは、属性を使用して、AJAX、CSSトランジション、WebSocket、およびサーバー送信イベントにHTMLで直接アクセスできます。

HTMLに専用の属性を付加することで簡単にAjaxやWebSocketなどが使えるということのようです。
ということで、さっそく試してみました。

※以下記載する内容は執筆時点で私が試したものになります。

導入方法

CDNやダウンロード、npm、Webpackにて導入が可能
※CDNは本番環境では非推奨とのこと

今回はCDNにて導入します。

<script src="https://unpkg.com/htmx.org@1.9.12" integrity="sha384-ujb1lZYygJmzgSwoxRggbCHcjc0rB2XoQrxeTUQyRjrOnlCoYta87iKBWq3EsdM2" crossorigin="anonymous" type="text/javascript"></script>

サンプルコード1

See the Pen Untitled by yukimat (@yukimat) on CodePen.

サーバーにあるデータを取得し、表示するだけのコードです。
hx-get属性でサーバーのエンドポイントを指定
hx-trigger属性でクリック時の動作を定義
hx-target属性で更新対象の要素を指定
サーバーはJSON Placeholderを使いました。

サンプルコード2

リアルタイム検索機能
キーボードから入力するたびに、500ミリ秒の遅延の後、サーバーへのリクエストが行われます。

ディレクトリの構造は以下にしています。
プロジェクトルート
├── index.html
└── api
    └── search.php

フロント(index.html)

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTMXサンプルコード2</title>
        <script src="https://unpkg.com/htmx.org@1.9.12" integrity="sha384-ujb1lZYygJmzgSwoxRggbCHcjc0rB2XoQrxeTUQyRjrOnlCoYta87iKBWq3EsdM2" crossorigin="anonymous"></script>
    </head>
    <body>
        <h1>HTMXサンプルコード2</h1>
        <p>検索キーワードを入力してください。</p>
        <input type="text" hx-get="/htmx/api/search.php" hx-trigger="keyup delayed:500ms" hx-target="#results" name="search" />
        <div id="results"></div>
    </body>
</html>

バック(search.php)

<?php
// CORS(Cross-Origin Resource Sharing)の設定
// サーバーとフロントエンドが別のオリジンで動作している場合は必要になるケースあり
// 本来は特定のオリジン、ヘッダーのみを許可するがテストなので全許可
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: *");
// 手動で定義したデータリスト
$items = [
    ['name' => 'りんご'],
    ['name' => 'ゴリラ'],
    ['name' => 'らっぱ'],
    ['name' => 'パイナップル']
];
$request_path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
if ($_SERVER['REQUEST_METHOD'] === 'GET' && $request_path === '/htmx/api/search.php') {
    try {
        $query = isset($_GET['search']) ? $_GET['search'] : '';
        if (!empty($query)) {
            $results = array_filter($items, function ($item) use ($query) {
                return stripos($item['name'], strtolower($query)) !== false;
            });
            echo ('検索キーワード:' . $_GET['search']);
            $results_html = '';
            foreach ($results as $item) {
                $results_html .= "<div style='margin-bottom: 10px;'>{$item['name']} は登録されています。</div>";
            }
            if (!empty($results_html)) {
                echo $results_html;
            } else {
                echo "<div>入力したデータは見つかりません。</div>";
            }
        } else {
            echo "<div>検索キーワードが空欄です。</div>";
        }
    } catch (Exception $e) {
        error_log("Error: {$e->getMessage()}");
        http_response_code(500);
    }
} else {
    // 指定のエンドポイント以外へのアクセス
    http_response_code(404);
}

触ってみた感想

Ajaxを実装する場合それなりにJavaScriptを書く必要があったりしますので、この技術を使いこなしたら生産性が上がりそうな印象を持ちました。
ポーリングやリクエストインジケーター、バリデーションやJSONレスポンスを受け取るときのテンプレートエンジンの指定など多岐に渡る機能を提供しているので、かなり使い勝手のよいライブラリだと個人的には思います。