032. hx-prompt（通信前にユーザーへ「短い入力」を求める）

原理：対話から始まるアクション

ユーザーの「言葉」を通信の条件にする

前回の hx-confirm は「はい / いいえ」を選択させるだけのものでした。しかし、時にはもう少し踏み込んで、ユーザーに「短いテキスト」を入力してもらってから通信を行いたい場面があります。 - 「削除するために、"DELETE" と打ち込んでください。」 - 「新しいフォルダの名前を決めてください。」 - 「キャンセルの理由を一言お願いします。」

このように、ブラウザ標準の入力ダイアログを表示し、ユーザーが打ち込んだ内容をリクエストと一緒にサーバーへ届ける仕組み。それが hx-prompt 属性です。

JavaScriptの window.prompt() という機能を、HTMXがスマートにラップ（包み込み）したものであり、フォームを自作するまでもない「ちょっとした入力」を手軽に実現してくれます。

実践：入力内容をサーバーへ添える

1. 削除時の「合言葉」確認

重要なデータを消す際、意図的な操作であることを確認するために特定の文字列を打たせる例です。

<!-- 
  hx-prompt: ダイアログに出す質問文
  ユーザーが入力を完了すると、リクエストヘッダー（hx-prompt）
  にその内容が書き込まれて送信されます。
-->
<button hx-delete="/api/permanent-delete" 
        hx-prompt="削除するには、半角で 'OK' と入力してください">
    完全削除
</button>

2. その場で名前を付ける

クイックな作成や名前変更にも便利です。

<button hx-post="/api/folders/create" 
        hx-prompt="新しいフォルダの名前：">
    新規フォルダ
</button>

3. ステップ・バイ・ステップ解説

入力の必要性: 「わざわざ入力欄を画面に作るのは大げさだけど、一言だけ情報が欲しい」という時に hx-prompt を選びます。
サーバー側の処理: ユーザーが入力した文字は、HTTPリクエストのヘッダーにある hx-prompt という名前の場所に格納されて届きます。サーバー側でこの値を読み取って、処理の分岐やデータの保存に使います。
キャンセルの扱い: ユーザーが何も打たずに「キャンセル」を押すと、HTMXは通信を中止します。

比較：自作モーダル vs hx-prompt

自作の入力モーダル

開発コスト: HTML（背景・枠・入力欄・ボタン）、CSS（中央寄せ・装飾）、JS（表示/非表示・値の取得）をすべて自分で作らなければならず、数時間はかかります。
メリット: デザインを自由自在に凝ることができます。

HTMXの hx-prompt

開発コスト: 属性を一文字書くだけ。所要時間は3秒です。
メリット: ブラウザ標準の部品を使うため、アクセシビリティ（使い心地）が保証されており、管理の手間が一切ありません。

まとめ：初心者のための「クイック対話」

hx-prompt は、あなたのアプリに「軽量なやり取り」を付け加える属性です。

サーバー側の準備: この属性を使うときは、サーバー側のプログラムで「ヘッダー（hx-prompt）から値を取り出す」コードを忘れずに書いてください。これが唯一の注意点です。
使いすぎに注意: プロンプトのダイアログは、出すぎるとユーザーにとって「邪魔」に感じられます。ここぞという時の「短い対話」に絞って使いましょう。
プロトタイプに最適: 開発の初期段階で、「とりあえず動くものを作りたい」という時には、これほど便利な属性はありません。

一歩踏み込んで、ユーザーに問いかける。hx-prompt を使って、画面とユーザーの距離を縮める「小さなコミュニケーション」を実装してみてください。次の記事では、通信中に誤操作をさせないための「停止」の技 hx-disable（033. hx-disable）をご紹介します。