progressで進み具合を示す：0件と割合不明の状態を分ける

進捗をまだ計算できないのに、画面へ「0%」と出していませんか。0%は全体の量が分かっていて、まだ一つも終わっていない状態です。progressで進み具合を示すときは、割合が分かる場合と、処理中だが割合は不明な場合を分けて作ります。

題材は架空の資料整理画面です。HTMLの要素と属性を少し書ける人向けに、三つの状態を並べる練習をします。ファイルの送信や実際の進捗取得は実装せず、受け取った状態をどう表すかに絞ります。エディターとブラウザーを用意してください。

全体量と完了量を、同じ単位で書き出す

今回は「資料を8件確認する」という作業を想定します。開始直後は全体8件・完了0件、途中は全体8件・完了3件です。一方、整理対象を調べている間は、全体が何件かまだ分かりません。この三つを、棒の色を決める前に文章へ置き換えます。

全体量にはmax、完了量にはvalueという属性を使います。途中の例ならmaxが8、valueが3です。全体を100に換算する必要はなく、同じ単位の二つの数を渡せば関係を表せます。件数と割合を混ぜ、maxを8、valueを37.5とする書き方は、この作業の値として合いません。

MDNのprogressの説明では、maxは0より大きい値、valueは0からmaxの範囲で指定することを確認できます。全体が不明な状態ではvalue属性自体を省きます。空文字や推測した数を入れて、不明を表そうとしないでください。

三つの状態を並べた練習ページを作る

次の全体をprogress-practice.htmlとして保存し、ブラウザーで開きます。三つは同じ処理の別時点を比較する見本です。本番画面で常に三本表示する提案ではありません。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>資料整理の状態｜練習</title>
  <style>
    body { margin: 1rem; font-family: sans-serif; line-height: 1.7; }
    main { max-width: 36rem; margin-inline: auto; }
    progress { display: block; width: 100%; max-width: 24rem; }
    section { margin-block: 2rem; }
  </style>
</head>
<body>
  <main>
    <h1>資料整理（架空の練習例）</h1>
    <section>
      <h2>対象を調査中</h2>
      <label for="discover">整理対象の調査</label>
      <progress id="discover"></progress>
      <p>対象を調べています。全体の件数はまだ分かりません。</p>
    </section>
    <section>
      <h2>確認開始</h2>
      <label for="start">資料の確認</label>
      <progress id="start" max="8" value="0">0 / 8</progress>
      <p>8件中0件を確認しました。</p>
    </section>
    <section>
      <h2>確認途中</h2>
      <label for="working">資料の確認</label>
      <progress id="working" max="8" value="3">3 / 8</progress>
      <p>8件中3件を確認しました。</p>
    </section>
  </main>
</body>
</html>

一本目にはvalueがなく、二本目には0があります。三本目では8件のうち3件が終わった関係を表しています。棒の形や動きは使用環境で違うため、見本と同じ色かではなく、属性と説明文の対応を確認します。自作のアニメーションは追加していません。

名前はlabelで付けます。forとprogressのidを一致させ、何の作業かを示してください。progressのタグの内側に書いた「3 / 8」だけを名前の代わりにはしません。表示される補足文も外側に残し、棒の長さだけに情報を任せない構成です。

0件と不明を混ぜた表示を直す

最初の失敗は、全体の調査中にvalue="0"を付けることです。作り手は「まだ分からない」と考えていても、属性には完了量0という値が入ります。修正ではvalue属性を丸ごと取り除き、外の文章も件数不明の案内へ戻します。

再確認では、開発者ツールで一本目を選び、value属性が存在しないことを見ます。棒が動いているかどうかだけで判定しません。また、この修正は実際の処理の停止を検出する仕組みではありません。失敗した処理を不明な進捗で表示し続けず、失敗の案内へ切り替える設計は別に必要です。

二つ目の失敗は、三本目のmaxを省くことです。maxの既定値は1なので、valueに3を渡しても「8件中3件」を伝えられません。max="8"を戻し、value="3"と外の文章を合わせます。再確認は、全体8、完了3、表示文の8件中3件という三つを照合します。

属性を正しく直しても、外の文が「8件中0件」のままなら矛盾が残ります。実装を動的な更新へ広げる際も、進捗値と説明文を同じ状態から更新する方針が必要です。今回は静的な見本なので、一方だけを変えた失敗を手で作ってから、二か所を直します。

何の進捗かを示し、割合で表せない作業は分ける

ラベルには「進捗」だけでなく「資料の確認」のような作業名を使います。関連付けが切れていたら、labelとidの対応を確かめる記事を参照してください。複数の棒に同じidを使わず、それぞれの名前との対応を追います。

progressは、完了へ向かう作業の進み具合を示すときの候補です。「作業前・確認中・差し戻し」のような段階名しか分からない場合は、まず段階を文章で示す方法を考えます。三段階だから各段階が三分の一の作業量だと決める必要はありません。

また、対象0件が確定しているなら、max="0"の棒を作るのではなく「確認する資料はありません」と伝える案を選べます。終わった結果と、結果を待っている状態を区別する考え方は、一覧が空のときの案内にもつながります。

読み上げ環境では、作業名と値の伝わり方も確かめます。ただし、値を変えれば必ずその都度読み上げる、とは考えないでください。通知の設計や更新頻度は別の課題です。静的な属性確認と、実際に聞いた結果は記録を分けます。

進捗が不明な状態と、0件完了を区別できるか

最後に三本目だけを「8件すべて確認済み」へ直します。valueと内側の代替文、外側の説明文を更新し、次の条件で判定してください。

• 一本目にはvalueがなく、件数不明という説明が残っている。
• 二本目にはmax="8"とvalue="0"があり、開始時点の説明になっている。
• 三本目はmax="8"、value="8"となり、説明文も8件中8件になっている。
• 三つのidは異なり、各labelのforが対応する一本を指している。

画面幅を狭めたとき、棒と説明文の末尾が読めることも確認します。基本のHTMLを見直すには無料レッスンを使えます。完成記録には棒の見た目だけでなく、「分かっている全体量と完了量」を書き添えましょう。