htmxを使ったシンプルで高速なダイアログの実装テクニック

ダイアログは、ユーザーに重要な情報を伝えたり、ユーザーからの入力を受け取ったりするためによく使われるUIパターンです。
従来、ダイアログの実装にはJavaScriptによる複雑な処理が必要でした。

しかし、htmxを使えば、シンプルなHTMLの属性だけでダイアログを実現できます。
この記事では、htmxを使ったダイアログの実装方法を詳しく解説します。

本記事の内容

ダイアログのHTML構造
ダイアログの動的生成
ダイアログの種類とオプション
エラーハンドリング
サンプルコード
まとめ

それでは、上記に沿って解説していきます。

ダイアログのHTML構造

htmxについてよくわからない場合は、次の記事からご覧ください。

まず、ダイアログのHTML構造を定義します。
ダイアログを呼び出すボタンと、ダイアログの結果を表示する要素を以下のように配置します。

<div>
  <button class="btn" 
          hx-post="submit.php"
          hx-prompt="文字列を入力してください"  
          hx-confirm="本当に実行しますか?"
          hx-target="#response">
    送信
  </button>
  <div id="response"></div>
</div>

ボタンにhx-promptとhx-confirmの属性を設定することで、それぞれプロンプトダイアログと確認ダイアログを呼び出すことができます。
hx-postで指定したPHPファイルに、ユーザーの入力が送信されます。
hx-targetで指定した要素に、PHPファイルからのレスポンスが挿入されます。

ダイアログの動的生成

次に、PHPを使ってダイアログの結果を動的に生成します。
submit.phpというPHPファイルを作成し、以下のようなコードを記述します。

<?php
if (isset($_SERVER['HTTP_HX_PROMPT'])) {
  $response = $_SERVER['HTTP_HX_PROMPT']; 
  echo "ユーザーが入力した文字列: <i>{$response}</i>";
} else {
  echo "プロンプトからの入力がありません";
}
?>

　$_SERVER[‘HTTP_HX_PROMPT’]でプロンプトダイアログからの入力を取得できます。
入力があれば、その内容を表示し、なければ「プロンプトからの入力がありません」というメッセージを表示します。

htmxは、このPHPファイルをAjaxで呼び出し、レスポンスを#response要素に挿入します。

ダイアログの種類とオプション

htmxでは、以下のようなダイアログの種類とオプションを使うことができます。

hx-prompt: プロンプトダイアログを表示し、ユーザーからの入力を受け取る
hx-confirm: 確認ダイアログを表示し、ユーザーの選択に応じて処理を実行する
hx-alert: アラートダイアログを表示し、ユーザーに情報を伝える

これらのダイアログには、以下のようなオプションを指定できます。

message: ダイアログに表示するメッセージ
title: ダイアログのタイトル
accept: 確認ダイアログの「OK」ボタンのラベル
cancel: 確認ダイアログの「キャンセル」ボタンのラベル

例えば、以下のようにオプションを指定できます。

<button hx-post="delete.php" 
        hx-confirm="本当に削除しますか?"
        hx-confirm-title="削除の確認"
        hx-confirm-accept="削除する"
        hx-confirm-cancel="キャンセル">
  削除
</button>

エラーハンドリング

ダイアログを使う際は、適切なエラーハンドリングも重要です。
例えば、プロンプトダイアログでユーザーが入力をキャンセルした場合、PHPファイルでは$_SERVER[‘HTTP_HX_PROMPT’]が設定されません。

この場合、以下のようにエラーメッセージを表示することができます。

<?php
if (isset($_SERVER['HTTP_HX_PROMPT'])) {
  $response = $_SERVER['HTTP_HX_PROMPT'];
  echo "ユーザーが入力した文字列: <i>{$response}</i>";  
} else {
  http_response_code(400);
  echo "プロンプトがキャンセルされました";
}
?>

http_response_code(400)を使ってHTTPステータスコードを400(Bad Request)に設定することで、htmxにエラーを通知します。
htmxは、エラーレスポンスを受け取ると、デフォルトではアラートダイアログでエラーメッセージを表示します。

サンプルコード

以上の内容を組み合わせた完全なサンプルコードは以下の通りです。

HTMLコード (index.html)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Dialogs Example</title>
  <script src="https://unpkg.com/htmx.org@1.7.0"></script>
</head>
<body>
  <div>
    <button class="btn" 
            hx-post="submit.php"
            hx-prompt="文字列を入力してください"
            hx-confirm="本当に実行しますか?"  
            hx-target="#response">
      送信
    </button>
    <div id="response"></div>
  </div>
</body>
</html>

PHPコード (submit.php)

<?php
if (isset($_SERVER['HTTP_HX_PROMPT'])) {
  $response = $_SERVER['HTTP_HX_PROMPT'];
  echo "ユーザーが入力した文字列: <i>{$response}</i>";  
} else {
  http_response_code(400);
  echo "プロンプトがキャンセルされました";
}
?>

このコードを実行すると、ボタンをクリックしたときにプロンプトダイアログと確認ダイアログが順番に表示されます。
ユーザーが入力した文字列は、#response要素に挿入されます。