HTMXは、JavaScriptを少なくともしくは全く使用せず（JSのライブラリは読み込みます）に、サーバーとの非同期通信を行い、ページの一部を動的に更新できるWeb開発ライブラリです。
HTML属性を拡張することで、ウェブページの特定の部分のみを更新するAjaxリクエストを簡単に実装できます。
HTMX
HTMLの読み込み方法 CDN
<script src="https://unpkg.com/htmx.org@1.9.10/dist/htmx.js"></script>
サンプル1 HTMXの簡単な例
HTMXは、フロントエンドの複雑さを軽減し、サーバーサイドのロジックに集中できるようにすることで、ウェブ開発の効率を向上させます。JavaScriptの詳細な知識がなくても、インタラクティブなウェブページを簡単に作成できるのが大きな利点です。
簡易なサンプル：ボタンクリックでコンテンツを更新
<!DOCTYPE html>
<html lang="ja">
<head>
<title>HTMX Example</title>
<script src="https://unpkg.com/htmx.org@1.9.10/dist/htmx.js"></script>
</head>
<body>
<h1>HTMX Example</h1>
<!-- hx-get属性でサーバーのエンドポイントを指定 -->
<!-- hx-trigger属性でクリック時の動作を定義 -->
<!-- hx-target属性で更新対象の要素を指定 -->
<div id="data-section1">
<p>
ボタンを押すとここにデータ表示されます<br />
hx-target属性で更新対象の要素を指定
</p>
</div>
<button hx-get="https://jsonplaceholder.typicode.com/posts/1" hx-trigger="click" hx-target="#data-section1">データを取得</button>
<hr />
<div id="data-section2">
<p>ボタンを押すとここに下のボタンが差し替わります</p>
<button hx-get="https://jsonplaceholder.typicode.com/posts/1">クリック</button>
</div>
</body>
</html>
この例では、「データを取得」ボタンをクリックするとhttps://jsonplaceholder.typicode.com/posts/1エンドポイントからデータを非同期に取得し、#data-section1内のコンテンツを更新します。
同様に「クリック」ボタンで、https://jsonplaceholder.typicode.com/posts/1エンドポイントからデータを非同期に取得し、自らのコンテンツを更新します。
読み込む内容ををHTMLフラグメント化して、動的にバックエンドからHTMLを生成しても出すことが可能です。
補足：HTMLフラグメントとは？
HTMLフラグメントは、完全なHTML文書ではなく、HTML文書の一部を構成するコード片を指します。これは、ページ全体ではなく、ページ内の一部分を表し、例えばフラグメントを使うことで、ページの一部のみを軽量に更新することができます。
サンプル2 HTMXを使用したリアルタイム検索機能の実装
リアルタイムで検索結果を表示する機能をHTMXを使用して実装する例を示します。
ユーザーが検索ボックスに入力するたびに、サーバーにリクエストを送信し、検索結果を動的に更新します。
コード1：HTML(HTMX)フロントエンド側
<!DOCTYPE html>
<html lang="ja">
<head>
<title>HTMX Search Example</title>
<script src="https://unpkg.com/htmx.org@1.9.10/dist/htmx.js"></script>
</head>
<body>
<h1>リアルタイム検索</h1>
<!-- 検索ボックス。入力毎にサーバーへリクエスト -->
<input type="text" hx-get="http://127.0.0.1:5000/search" hx-trigger="keyup delayed:500ms" hx-target="#results" name="search" />
<!-- 検索結果表示エリア -->
<div id="results"></div>
</body>
</html>
このコードでは、ユーザーがキーボードから入力するたびに、500ミリ秒の遅延の後、サーバーへのリクエストが行われます。応答は#results要素に表示されます。
GETリクエストエンドポイント指定: hx-get="http://127.0.0.1:5000/search"
トリガー（500ミリ秒の遅延）: hx-trigger="keyup delayed:500ms"
Inputタグのname属性: name="search"
コード2：サーバーサイド側（Python/Flask）
from flask import Flask, render_template_string, request
from flask_cors import CORS
# Flaskアプリケーションのインスタンスを作成
app = Flask(__name__)
# CORS(Cross-Origin Resource Sharing)の設定をアプリケーションに適用
CORS(app)
# 手動で定義したデータリスト
items = [
{'name': 'あっぷる'},
{'name': 'りんご'},
{'name': 'ばなな'}
]
# '/search'エンドポイントへのルーティング
@app.route('/search')
def search():
try:
# クエリパラメータ 'search' の値を取得
query = request.args.get('search')
if query:
# クエリに一致するアイテムをフィルタリング
results = [item for item in items if query.lower() in item['name'].lower()]
# 結果をHTML形式で生成
results_html = ''.join(f"<div style='margin-bottom: 10px;'>{item['name']}、は登録されています。</div>" for item in results)
# 結果が存在すれば返却、なければメッセージ表示
return results_html or "<div>入力したデータは見つかりません。</div>"
else:
# 検索キーワードが入力されていない場合のメッセージ
return "<div>検索キーワードを入力してください。</div>"
except Exception as e:
# エラー発生時のログ記録とエラーメッセージの返却
app.logger.error(f"Error: {e}")
return "サーバーエラーが発生しました", 500
# Flaskアプリケーションの実行
if __name__ == '__main__':
app.run(debug=True)
Python/Flaskバックエンド環境構築サンプル
# MacOSでの場合
## Pythonが入っているか確認
python3 --version
## Flaskライブラリを入れる
## Flask-CORS拡張をインストール（FlaskアプリケーションでCORSを許可させる）
pip3 install Flask
pip3 install flask-cors
## Flaskで新規プロジェクトを作成
mkdir my_flask_app
cd my_flask_app
# FLASKサーバー起動
FLASK_APP=app.py flask run
Flaskアプリケーションでは、/searchエンドポイントがユーザーの検索クエリを処理し、それに基づいた結果を返します。この結果は、HTMLフラグメントとしてクライアントに送られ、HTMXによってページに表示されます。
以上、この記事ではHTMXの概要説明からリアルタイム検索機能の実装例まで説明しました。
HTMXを活用することで、簡易にJavaScriptをほとんど書かずにインタラクティブなウェブアプリケーションを作成できることがわかります。コードの見通しも良くなるので世界的に流行っているのもうなずけますね。