プログレスバー

Progress Bar

development web beginner

ファイル転送や処理などの進み具合を、棒や数値で視覚的に伝えるUI部品。

概要（サマリー）

プログレスバー（Progress Bar）とは、ファイル転送や処理などの進み具合を、棒や数値で視覚的に伝えるUI部品である。

全体量と完了量が分かる場合は「60%完了」のように進捗を表示できる。完了までの割合が分からない場合は、処理中であることだけを示す不定状態のプログレスバーを使うこともある。

進捗を表示すると、利用者は処理が継続していることを確認できる。ただし、進捗率だけで残り時間を正確に予測できるとは限らない。

以下は、ボタンを押すと0%から100%まで進む簡単なデモである。

ファイル処理の進捗

開始ボタンを押してください

不定型・決定型・ステップ型の作り方やコピペ用コードは、プログレスバーの実装方法詳細で確認できる。

詳細解説

1. プログレスバーの役割

ファイルのアップロード、ソフトウェアのインストール、データ変換などに時間がかかると、画面が止まったように見えることがある。

プログレスバーは、処理が進んでいることや現在の段階を利用者へ伝える。処理を中断すべきか待つべきかを判断しやすくし、同じ操作を繰り返す誤操作も減らせる。

ただし、見た目だけを一定速度で動かし、実際の処理と連動していなければ、正確な進捗表示とはいえない。可能な範囲で実データに基づいて更新する必要がある。

2. 確定状態と不定状態

全体量と完了量を計算できる状態を、確定状態のプログレスバーと呼ぶ。ダウンロード済みバイト数を総バイト数で割る場合などが該当する。

一方、処理時間や全体量が分からない場合は、不定状態を使う。HTMLの<progress>要素では、value属性を付けないことで不定状態を表せる。

処理量を計算できないからといって、必ずローディングスピナーを使う必要はない。画面構成や処理の重要度に応じて、不定状態のプログレスバーも選択できる。

3. HTMLの`progress`要素

HTMLには、タスクの進捗を表す<progress>要素が用意されている。意味とアクセシビリティが組み込まれているため、単純な用途では独自のdiv要素より優先して検討できる。

<label for="upload-progress">ファイルをアップロード中</label>
<progress id="upload-progress" value="60" max="100">60%</progress>
<output id="upload-status">60%</output>

valueは完了した量、maxは全体量を表す。min属性は使用せず、最小値は常に0である。

要素内の60%という文字列は、古い環境向けの代替表示であり、アクセシブルな名前にはならない。labelやaria-labelなどで何の進捗かを明示する。

4. JavaScriptで進捗を更新する

次の例では、進捗値と画面上の数値を同時に更新する。

const progress = document.querySelector("#upload-progress");
const status = document.querySelector("#upload-status");

function setProgress(value) {
  const safeValue = Math.max(0, Math.min(100, value));

  progress.value = safeValue;
  status.value = `${safeValue}%`;
}

setProgress(75);

実際の処理では、アップロード済みのデータ量や完了した作業数などから値を計算する。タイマーだけで100%まで進めると、処理が終わっていないのに完了表示になる可能性がある。

5. カスタムデザインとアクセシビリティ

CSSで<progress>の見た目を調整できるが、ブラウザによって対応する疑似要素や表示差がある。完全に同じ見た目が必要な場合は、独自要素で作る方法もある。

独自要素を使う場合は、role="progressbar"、aria-valuemin、aria-valuemax、aria-valuenow、アクセシブルな名前などを適切に設定する必要がある。

色だけで状態を伝えず、割合や状態を文字でも表示する。バーと背景には十分なコントラストを確保し、アニメーションが強すぎないようにすることもアクセシビリティ上重要である。

6. 残り時間を表示するときの注意

進捗率が50%でも、残り時間が半分とは限らない。ファイルごとの処理時間が異なる場合や、ネットワーク速度が変化する場合があるためである。

残り時間を表示する場合は、直近の処理速度から推定し、値が大きく変動しないよう平均化する方法が使われる。それでも正確な保証はできないため、「約2分」のように推定値であることを示す。

処理が複数段階に分かれる場合は、「アップロード中」「確認中」「保存中」のように現在の段階も表示すると理解しやすい。

7. 実装時の確認項目

プログレスバーを実装するときは、次の点を確認する。

実際の処理結果と進捗値が連動しているか
何の処理かをラベルで説明しているか
完了、失敗、中断の状態を区別できるか
0%から100%の範囲外にならないか
画面読み上げでも進捗を理解できるか
更新頻度が高すぎて描画負荷や読み上げの妨げにならないか

処理に失敗した場合は、バーを止めるだけでなく、エラー内容と再試行方法を表示する必要がある。

AIコーディングとの関係

AIは、<progress>要素を使った実装、ファイル転送と連動する処理、Reactなどのコンポーネントを作る際に利用できる。

依頼するときは、「確定状態か不定状態か」「進捗値をどこから取得するか」「失敗・中断・再試行をどう扱うか」「アクセシブルなラベルが必要」といった条件を含める。

AIは見た目を優先してdivだけのプログレスバーを生成し、ARIA属性やキーボード・読み上げ対応を省くことがある。標準の<progress>を使えるか確認し、独自実装ではアクセシビリティをレビューする必要がある。

また、Fetch APIだけでは一般的なアップロード進捗を直接取得しにくい環境がある。AIが提示したAPIやライブラリの機能が、対象ブラウザと使用バージョンで利用できるか確認する。

よくある勘違い