073. none(更新しない:裏でこっそり通信だけを行う)
原理:画面に触れない「隠密」の通信
見た目を変える必要がない時
HTMXの基本は、通信して、画面を書き換えることです。しかし、時には「通信はしてほしいけれど、画面のHTMLは一文字も変えたくない」という場面があります。 - ログ(操作記録)をサーバーに送信する。 - ユーザーが「既読」にしたことをサーバーにこっそり教える。 - 定期的に「私はまだページを開いていますよ(生存確認)」という合図を送る。
こういった「裏方の仕事」に最適なのが none(ナーン)という設定です。
実践:ユーザーの邪魔をせずに仕事をこなす
1. 閲覧記録をサーバーに送る
ユーザーが記事の下までスクロールしたことを、画面を崩さずにサーバーへ通知する例です。
<!--
hx-post: 閲覧完了を報告
hx-trigger: intersect (この要素が見えたら発火)
hx-swap: none (画面は一切書き換えない)
-->
<div id="footer-marker"
hx-post="/api/read-complete"
hx-trigger="intersect once"
hx-swap="none">
読んでくれてありがとう!(ここを見ても画面は変わりません)
</div>
2. サーバー側からの制御を待つ(hx-trigger)
第3章のレスポンスヘッダー(051.解説)で学んだ hx-trigger を使って、JavaScriptを実行したい場合など、「HTMLは要らない、命令だけ欲しい」時にも none が使われます。
3. ステップ・バイ・ステップ解説
- 目的の確認: 「今の画面を一切いじりたくないんだな?」と確信したら使います。
- 記述:
hx-swap="none"と書き込みます。 - サーバーの応答: サーバーがどんなに立派なHTMLを返してきても、HTMXはそれをゴミ箱に捨てて、画面を守り通します。
比較:innerHTML vs none
innerHTML(通常)
- 結果: 画面が変わる。
- 目的: ユーザーに新しい情報を見せる。
none
- 結果: 画面は全く変わらない。
- 目的: サーバーへの通知、データの記録、または「ヘッダー」を通じた特殊な命令の受信。
まとめ:初心者のための「沈黙」の価値
none は、あなたのWebサイトに「静かだけど頼もしい」裏方のシステムを組み込むための属性です。
- ユーザーを驚かせない: 意図しない更新(画面のチカつきなど)はユーザーのストレスになります。「変える必要がない」と判断したら、潔く
noneを選びましょう。 - サーバーの反応は「なし」でOK: 画面を更新しないので、サーバー側もわざわざHTMLを作る必要はありません。「204 No Content」という「空っぽの成功」を返すのが、最も洗練されたやり方です。
- 副作用に集中する: 画面の変化がない分、サーバー側で行われる「データの保存」や「メール送信」などの裏の処理(副作用)に、より明確に意識を向けることができます。
静かに、確実に。none を使って、表舞台(画面)を汚すことなく、裏側でアプリを支える高度な通信機能を実装してください。次の記事では、更新後の「スクロール位置」や「視点」を操る「Show/Scroll」(074. Show/Scroll)をご紹介します。