コンテンツにスキップ

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. ステップ・バイ・ステップ解説

  1. 目的の確認: 「今の画面を一切いじりたくないんだな?」と確信したら使います。
  2. 記述: hx-swap="none" と書き込みます。
  3. サーバーの応答: サーバーがどんなに立派なHTMLを返してきても、HTMXはそれをゴミ箱に捨てて、画面を守り通します。

比較:innerHTML vs none

innerHTML(通常)

  • 結果: 画面が変わる。
  • 目的: ユーザーに新しい情報を見せる。

none

  • 結果: 画面は全く変わらない。
  • 目的: サーバーへの通知、データの記録、または「ヘッダー」を通じた特殊な命令の受信。

まとめ:初心者のための「沈黙」の価値

none は、あなたのWebサイトに「静かだけど頼もしい」裏方のシステムを組み込むための属性です。

  • ユーザーを驚かせない: 意図しない更新(画面のチカつきなど)はユーザーのストレスになります。「変える必要がない」と判断したら、潔く none を選びましょう。
  • サーバーの反応は「なし」でOK: 画面を更新しないので、サーバー側もわざわざHTMLを作る必要はありません。「204 No Content」という「空っぽの成功」を返すのが、最も洗練されたやり方です。
  • 副作用に集中する: 画面の変化がない分、サーバー側で行われる「データの保存」や「メール送信」などの裏の処理(副作用)に、より明確に意識を向けることができます。

静かに、確実に。none を使って、表舞台(画面)を汚すことなく、裏側でアプリを支える高度な通信機能を実装してください。次の記事では、更新後の「スクロール位置」や「視点」を操る「Show/Scroll」(074. Show/Scroll)をご紹介します。