060. Polling（ポーリング：定期的に情報を「見守り続ける」自動更新）

原理：Webサイトが「自ら動く」ようになる魔法

ユーザーに「更新ボタン」を押させない

これまでのHTMXは、「ユーザーがボタンを押す」というきっかけで通信が始まっていました。しかし、世の中にはそうではないアプリもあります。 - チャット画面：新しいメッセージが届いたら勝手に表示されてほしい。 - 株価や仮想通貨：値動きを常にリアルタイムで監視したい。 - 処理の進行状況：巨大なファイルのアップロード状況を、座って眺めていたい。

このように、ユーザーの操作を待たずに、一定の時間（例：5秒ごと）にブラウザが自らサーバーへ「何か新しい情報はない？」と聞きに行く仕組み。これが「Polling（ポーリング）」です。

属性一つで「定期点検」を開始

HTMXでは、hx-trigger="every 5s" という属性を書くだけで、その要素が「生きたパーツ」に変わります。5秒ごとに勝手にサーバーと話し始め、最新のHTMLパーツを受け取って自分の姿を更新し続けます。複雑なプログラミングは一切不要です。

実践：最新情報を自動でキャッチし続ける

1. 最新ニュースの自動受信

何もしなくても、30秒ごとに最新の見出しが降ってくるニュースエリアの例です。

<div hx-get="/api/latest-news" 
     hx-trigger="every 30s" 
     hx-target="#news-box">
    <div id="news-box">
        ここに30秒ごとに最新ニュースが届きます...
    </div>
</div>

2. プログレスバー（進捗）の監視

サーバーで重い処理をしている間、1秒ごとに進捗状況を聞きに行く例です。

<div hx-get="/api/job/status" hx-trigger="every 1s">
    <!-- サーバーは <progress value="45" max="100"></progress> のようなHTMLを返す -->
    処理を開始しました...
</div>

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

時間の間隔を決める: 1秒（1s）なら非常にキビキビ動きますが、30秒（30s）ならサーバーに優しくなります。用途に合わせて選びましょう。
属性の記述: hx-trigger="every XXX" を、更新したいエリア（またはその親）に書き込みます。
サーバーの応答: サーバーは、その時々の「最新の状態」を表す小さなHTMLを返すだけ。普段のHTMXと同じです。

比較：手動の setInterval vs HTMXのPolling

JavaScriptの場合

setInterval(async () => {
    const res = await fetch('/api/data');
    const html = await res.text();
    document.getElementById('box').innerHTML = html;
}, 5000);

タイマーを止めたり（エラー時）、ページが切り替わった時に掃除したりといった「管理」がとても大変です。

HTMXの Polling

<div hx-trigger="every 5s">

要素が画面から消えれば（ページ移動など）、HTMXが賢くタイマーを止めてくれます。無駄な通信を勝手に防いでくれる、とても省エネで安全な仕組みです。

まとめ：初心者のための「見守り」のデザイン

ポーリングを導入すると、あなたのWebアプリは「静止画」から「動画」のような、生命感あふれるものに変わります。

サーバーの気持ちを考える: たくさんのユーザーが「1秒ごと」にポーリングを始めると、サーバーは悲鳴を上げてしまいます。本当に必要な速さを見極めましょう。
変化がない時は静かに: 先ほどの「条件付きリクエスト（059）」と組み合わせるのが上級者の技です。サーバーが「304」を返せば、通信コストはさらに低くなります。
ユーザーへの配慮: 画面が急に書き換わるとユーザーが驚くことがあります。フワッと表示を切り替えるCSSなどを添えると、より洗練された印象になります。

じっと見守る、自動化の力。hx-trigger="every ..." という一行で、あなたのWebサイトに「自律的な動き」を与えてみてください。次の記事では、読み込みが終わった直後に一度だけ自動実行する特殊なポーリング「Load Polling（061. Load Polling）」をご紹介します。