【JavaScript】進捗率の基本計算について

今回はJavaScriptで進捗率を計算する方法を解説していきます。

進捗率とは

進捗率とは、作業が全体の中でどのくらい進んでいるかを割合で示した数字です。
ここで定義する進捗率は、0（0% 完全に開始前）～1（100% 完全に終了） の範囲で表現します。

なぜ進捗率を使うのか？

プログラムの世界では、進捗率を利用することで、画面上の動きや状態をインタラクティブに制御する場面があります。

• スクロール連動アニメーション
  ページのスクロール量に応じて、要素をフェードインさせたり移動させたりする効果を実現できます。
• プログレスバーの表示
  アップロードや処理進行状況をリアルタイムで可視化できます。
• 値の動的変化
  進捗率を基に色やサイズを段階的に変えることで、視覚的な効果を演出できます。

基本の計算式

進捗率を求めるには、次の式を使用します

const progress = (current - start) / (end - start);
//const progress = (現在値 - 開始時点の値) / (終了時点の値 - 開始時点の値);

この計算式を用いると、現在の状態を0〜1の範囲で表現できます。

// 0〜100の範囲で進捗を計算
const start = 0;
const end = 100;

console.log((0 - start) / (end - start)); // 0（開始前）
console.log((50 - start) / (end - start)); // 0.5（半分）
console.log((100 - start) / (end - start)); // 1（終了）

進捗を逆転させたい場合

進捗率を逆転させたい場合は、次のような計算をします。
逆転させた場合は、**1（開始）から0（終了）**に減少する形になります。

const reverseProgress = 1 - progress;

進捗をスケール変換する場合

進捗率を%に変換させたい場合は、次のような計算をします。

const scaledProgress = progress * 100;

進捗率の値を0-1の間で制限する

進捗率の計算では、対象となる値によって0未満、または1を超える値になる場合があります。
これを防ぐために、下記のような式を使うことによって値が範囲外の場合に適切な値に調整することができます。

const progress = (current - start) / (end - start);
const clampedProgress = Math.min(Math.max(progress, 0), 1);

• Math.max(progress, 0)
  • 進捗率が0未満の場合、0を返します。
  • 進捗率が0以上の場合、そのままの値を返します。
• Math.min(…, 1)
  • 上記で計算した値が1を超える場合、1を返します。
  • 値が1以下の場合、そのままの値を返します。

今回は進捗率の基本計算について解説しました。

進捗率の考え方は、ウェブサイトのインタラクションを一段階レベルアップさせるために役立つ知識です。
次回（？）は、今回の基礎を踏まえた上で、具体的な進捗率を活用したウェブページの実装方法なども解説できればと思っています。