103. Progress Bars（プログレスバーの実装：長い道のりを「見える化」する）

原理：終わりが見える安心感

「あとどれくらい？」に答える

ファイルのアップロードや、重い計算処理、あるいは長いデータのインポート……。こうした時間がかかる処理において、「ぐるぐる（スピナー）」を出し続けるだけでは不十分です。ユーザーは「あと5秒で終わるのか、それとも5分かかるのか」を知りたがっています。

「プログレスバー（Progress Bars）」は、「現在の完了度（%）」を視覚的なメーターとして表示する仕組みです。HTMXを使えば、サーバー側から刻一刻と送られてくる「今の進捗」を受け取って、滑らかにメーターを伸ばしていくことができます。

実践：リアルタイムに伸びるバーを作る

1. サーバーから進捗HTMLを受け取る（ポーリング）

第3章で学んだ「ポーリング（060.）」を使い、数秒おきにサーバーに「今何パーセント？」と聞きに行く例です。

<!-- 
  hx-get: 進捗状況を取得
  hx-trigger: "every 2s" (2秒ごとに更新)
-->
<div id="job-progress" 
     hx-get="/api/job/status" 
     hx-trigger="every 2s"
     hx-target="this">
    <div class="progress-container">
        <div class="progress-bar" style="width: 0%"></div>
    </div>
    <p>準備中...</p>
</div>

<!-- (サーバーが返すHTMLの例) -->
<div id="job-progress" ...>
    <div class="progress-container">
        <div class="progress-bar" style="width: 60%"></div>
    </div>
    <p>60% 完了しました...</p>
</div>

2. イベントベースの更新

最近のブラウザ機能（SSEやWebSockets）とHTMXを組み合わせると、サーバーから「今60%だよ！」とプッシュ通知を送って、より滑らかに動かすことも可能です（第8章で詳述します）。

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

バーの土台を作る: 背景用のグレーの枠と、伸び縮みする青いバー（width を変えるもの）をHTMLで用意します。
更新ルートの作成: サーバー側に、現在の進捗に合わせて width: ◯◯% を書き換えたHTMLを返す仕組みを作ります。
トリガーの発火: 最初はボタンで開始し、その後は every 2s などのポーリングでバーを育てていきます。

比較：スピナー vs プログレスバー

スピナー

意味: 「動いています」。
心理的影響: 不安は消えるが、いつ終わるかわからないので長く待てない（10秒程度が限界）。

プログレスバー

意味: 「◯◯まで終わりました」。
心理的影響: 終わりが予測できるため、数分かかる処理でもユーザーは辛抱強く待ってくれます。

まとめ：初心者のための「達成感」の演出

プログレスバーは、単なる進捗表示以上の「信頼」をユーザーとの間に築きます。

滑らかな動き: CSSに transition: width 0.3s ease; と一行書いておくだけで、サーバーから届いたデータが変わるたびにバーが「スルスルッ」と伸びるようになり、高級感が爆増します。
100%のあとのご褒美: バーが最後まで到達した瞬間に、「完了しました！」というメッセージや、次のページへのボタンを出す仕掛けを作ると、ユーザーは達成感を感じてくれます。
偽の進捗（？）: 通信の仕組み上、正確な%が出せない時でも、「とりあえず最初だけゆっくり進ませておく」といった演出（フェイク・プログレス）も、UXの世界ではよく使われる親切な嘘の一つです。

長い待ち時間を、納得の時間へ。プログレスバーを使いこなして、大規模なデータ処理や時間のかかるアクションも安心して任せてもらえる、タフなWebアプリを実現してください。次の記事では、より今どきなローディング手法「スピナーとスケルトン表示（104. Spinners/Skeletons）」をご紹介します。