092. hx-prompt（ユーザー入力の要求：実行時に「一言」添えてもらう）
原理：対話から始まるアクション
単なる確認の一歩先へ
前回の hx-confirm は「はい/いいえ」を選ぶだけでしたが、時には「実行するために、何か一つ情報を入力してほしい」という場面があります。
- 「削除するために、確認のために『DELETED』と入力してください」
- 「新しいフォルダの名前を決めてから作成してください」
HTMXの hx-prompt 属性を使うと、JavaScriptを書くことなく、「入力欄付きのダイアログを出し、ユーザーが入力した文字をリクエストと一緒にサーバーへ送る」という高度なやり取りが可能になります。
実践：入力とアクションを一つに繋げる
1. 削除の最終確認（キーワード入力）
間違いを防ぐために、特定の言葉を打たせる例です。
<!--
hx-prompt: ダイアログの内容。
入力された文字は "hx-prompt" という名前の「リクエストヘッダー」に入れて送られます。
-->
<button hx-delete="/project/123"
hx-prompt="削除するには 'YES' と入力してください">
プロジェクトを削除
</button>
2. サーバー側での受け取り
サーバー側では、届いたリクエストのヘッダー（hx-prompt）をチェックします。もし中身が YES でなければ、処理を中断してエラーを返すといったプログラミングが可能です。
3. ステップ・バイ・ステップ解説
- 「一声」必要な場面の設定: 実行に際してユーザーの意思表明や、短いテキストが必要な場所を探します。
- 属性の追加:
hx-prompt="指示文"を書き込みます。 - サーバーの対応: リクエストヘッダーから値を取り出せるようにサーバー側のプログラムを少しだけ調整します。
比較：専用フォーム vs hx-prompt
専用の入力フォーム（モーダル等）
- メリット: デザインを自由に凝れる。長い文章も打てる。
- デメリット: HTMLとCSS、表示/非表示のロジックを気にする必要があり、実装が大変。
hx-prompt (今回)
- メリット: 属性一行で完成！準備が一切不要。
- デメリット: デザインがブラウザ標準のものになり、味気ない。
まとめ：初心者のための「簡潔な対話」
hx-prompt は、大掛かりなフォームを作るまでもない「ちょっとした入力」をスマートに処理するための近道です。
- 管理者機能に最適: 見た目にこだわらない管理画面などでは、これほど便利な機能はありません。サクサクと機能を追加できます。
- 「hx-prompt」ヘッダーを忘れずに: 入力内容はURLのパラメータではなく「ヘッダー」として届きます。サーバー側のプログラミングガイド（第7章で詳述）を見ながら、正しく値を取り出しましょう。
- 入力がない時は自動キャンセル: ユーザーが入力せずに「キャンセル」を押したり、窓を閉じたりすれば、通信はそもそも発生しません。この安全性も魅力の一つです。
問いかけに、答える。hx-prompt を使って、ユーザーの意思をダイレクトにサーバーへ届ける、効率的で力強い機能を実装してください。次の記事では、通信中の「待ち時間」を視覚的に伝える「hx-indicator」（093. hx-indicator）をご紹介します。