はじめに (対象読者・この記事でわかること)

この記事は、Web開発初心者から中級者まで、JavaScriptでユーザーインターフェースを向上させたい方を対象としています。特に、ファイルアップロードの進捗表示やタスクの実行状況を視覚的に伝えたい方に最適です。

この記事を読むことで、JavaScriptを使用して様々なタイプのプログレスバーを実装する方法、CSSとの連携による見た目のカスタマイズ方法、アップロード進捗表示やタスク進捗表示など実際のアプリケーションでの活用法を理解できます。具体的なコード例を交えながら、基本から応用まで網羅的に解説します。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 前提知識1：HTML/CSSの基本的な知識 前提知識2：JavaScriptの基本的な文法とDOM操作の理解

プログレスバーの概要と重要性

プログレスバーは、ユーザーにタスクの進捗状況を視覚的に伝えるためのUI要素です。ファイルのアップロード、データの読み込み、インストールプロセスなど、時間のかかる処理において、ユーザーが待っている間に「何が起きているか」を伝えることで、ユーザーエクスペリエンスを大幅に向上させることができます。

Webアプリケーションでは、ユーザーの待ち時間を減らすことが理想ですが、避けられない待ち時間が発生する場合には、進捗を明確に示すことが重要です。JavaScriptを使用することで、動的にプログレスバーを更新し、リアルタイムに進捗状況をユーザーに伝えることができます。

また、プログレスバーは単なる機能的要素だけでなく、デザインの一部としても重要です。サイト全体のデザインに合わせてカスタマイズすることで、一貫性のあるユーザーインターフェースを実現できます。

プログレスバーの実装方法

ステップ1：基本的なプログレスバーの作成

まずは最も基本的な水平プログレスバーを作成してみましょう。HTMLでプログレスバーの領域を作成し、CSSで見た目を整え、JavaScriptで進捗を更新するという流れです。

Html

<div class="progress-container">
  <div class="progress-bar" id="myProgressBar"></div>
</div>

Css

.progress-container {
  width: 100%;
  background-color: #f3f3f3;
  border-radius: 5px;
  margin: 20px 0;
}

.progress-bar {
  width: 0%;
  height: 30px;
  background-color: #4CAF50;
  border-radius: 5px;
  text-align: center;
  line-height: 30px;
  color: white;
  transition: width 0.3s ease;
}

Javascript

function updateProgress(percent) {
  const progressBar = document.getElementById('myProgressBar');
  progressBar.style.width = percent + '%';
  progressBar.textContent = percent + '%';
}

// 例：50%まで進行
updateProgress(50);

このコードでは、progress-containerがプログレスバーの背景となり、progress-barが実際の進捗を示す部分です。JavaScriptのupdateProgress関数を呼び出すことで、進捗率を指定してプログレスバーを更新できます。

ステップ2：時間ベースのプログレスバー

次に、時間の経過に応じて自動で進捗が更新されるプログレスバーを作成します。例えば、10秒かかる処理をシミュレートしてみましょう。

Javascript

function startTimerProgress(duration) {
  const progressBar = document.getElementById('myProgressBar');
  let progress = 0;
  const increment = 100 / (duration / 100); // 100msごとに更新

  const timer = setInterval(() => {
    progress += increment;
    if (progress >= 100) {
      progress = 100;
      clearInterval(timer);
    }
    progressBar.style.width = progress + '%';
    progressBar.textContent = Math.round(progress) + '%';
  }, 100);
}

// 10秒かかる処理をシミュレート
startTimerProgress(10000);

このコードでは、setIntervalを使用して100msごとにプログレスバーを更新しています。durationパラメータで指定した時間（ミリ秒）が経過すると、プログレスバーが100%になります。

ステップ3：ファイルアップロードのプログレスバー

実際のアプリケーションでは、ファイルアップロードの進捗を示すプログレスバーがよく使われます。以下にその実装例を示します。

Html

<input type="file" id="fileInput">
<button id="uploadButton">アップロード</button>
<div class="progress-container">
  <div class="progress-bar" id="uploadProgressBar"></div>
</div>
<div id="uploadStatus"></div>

Javascript

document.getElementById('uploadButton').addEventListener('click', function() {
  const fileInput = document.getElementById('fileInput');
  const file = fileInput.files[0];

  if (!file) {
    alert('ファイルを選択してください');
    return;
  }

  const progressBar = document.getElementById('uploadProgressBar');
  const uploadStatus = document.getElementById('uploadStatus');

  // ファイルアップロードをシミュレート
  uploadStatus.textContent = 'アップロード中...';
  let progress = 0;

  const interval = setInterval(() => {
    progress += Math.random() * 10; // ランダムに進捗
    if (progress > 100) progress = 100;

    progressBar.style.width = progress + '%';
    progressBar.textContent = Math.round(progress) + '%';

    if (progress === 100) {
      clearInterval(interval);
      uploadStatus.textContent = 'アップロード完了！';
    }
  }, 300);
});

この例では、ファイル選択後にアップロードボタンをクリックすると、プログレスバーが表示され、ランダムな速度で進捗が更新されます。実際のファイルアップロードでは、XMLHttpRequestやFetch APIを使用してサーバーにファイルを送信し、その進捗イベントを監視してプログレスバーを更新します。

ステップ4：円形プログレスバーの作成

水平プログレスバーだけでなく、円形のプログレスバーも人気です。CSSとSVGを使用して作成してみましょう。

Html

<div class="circular-progress">
  <svg width="120" height="120">
    <circle cx="60" cy="60" r="50" stroke="#f3f3f3" stroke-width="10" fill="none"></circle>
    <circle id="progressCircle" cx="60" cy="60" r="50" stroke="#4CAF50" stroke-width="10" fill="none"
            stroke-dasharray="314" stroke-dashoffset="314" transform="rotate(-90 60 60)"></circle>
  </svg>
  <div class="progress-text" id="progressText">0%</div>
</div>

Css

.circular-progress {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 20px auto;
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  font-weight: bold;
}

circle {
  transition: stroke-dashoffset 0.35s;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

Javascript

function updateCircularProgress(percent) {
  const circle = document.getElementById('progressCircle');
  const text = document.getElementById('progressText');

  // 半径50の円の円周を計算 (2 * π * r)
  const circumference = 2 * Math.PI * 50;
  const offset = circumference - (percent / 100) * circumference;

  circle.style.strokeDashoffset = offset;
  text.textContent = percent + '%';
}

// 例：75%まで進行
updateCircularProgress(75);

このコードでは、SVGの円要素のstroke-dasharrayとstroke-dashoffsetプロパティを使用して、円の一部だけを表示することで円形プログレスバーを実現しています。stroke-dasharrayには円の全周の長さを設定し、stroke-dashoffsetを減らすことで円の表示部分が増加していきます。

ステップ5：アニメーション付きプログレスバー

プログレスバーにアニメーションを加えることで、よりユーザーに親しみのあるUIを実現できます。以下に、波紋のようなアニメーションを追加したプログレスバーの例を示します。

Html

<div class="animated-progress-container">
  <div class="animated-progress-bar" id="animatedProgressBar">
    <div class="progress-fill" id="progressFill"></div>
    <div class="progress-wave"></div>
  </div>
  <div class="progress-percentage" id="progressPercentage">0%</div>
</div>

Css

.animated-progress-container {
  position: relative;
  width: 100%;
  height: 30px;
  background-color: #f3f3f3;
  border-radius: 15px;
  overflow: hidden;
  margin: 20px 0;
}

.animated-progress-bar {
  position: relative;
  width: 100%;
  height: 100%;
}

.progress-fill {
  position: absolute;
  height: 100%;
  background: linear-gradient(90deg, #4CAF50, #8BC34A);
  border-radius: 15px;
  width: 0%;
  transition: width 0.3s ease;
}

.progress-wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: wave 2s linear infinite;
}

@keyframes wave {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(50%);
  }
}

.progress-percentage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  color: #333;
}

Javascript

function updateAnimatedProgress(percent) {
  const progressFill = document.getElementById('progressFill');
  const progressPercentage = document.getElementById('progressPercentage');

  progressFill.style.width = percent + '%';
  progressPercentage.textContent = percent + '%';
}

// 例：60%まで進行
updateAnimatedProgress(60);

このコードでは、CSSのアニメーション機能を使用して、プログレスバー上に波紋のような動きを追加しています。progress-wave要素は、幅が200%に設定されているため、アニメーションによって滑らかにスライドし、波紋のような効果を生み出します。

ハマった点やエラー解決

問題点1：プログレスバーの更新がカクカクする

プログレスバーの更新頻度が高すぎると、ブラウザのレンダリング性能に限界があり、アニメーションがカクカクして見えることがあります。

解決策：

更新頻度を調整するか、requestAnimationFrameを使用してブラウザの描画タイミングに合わせて更新することで、滑らかなアニメーションを実現できます。

Javascript

function smoothUpdateProgress(percent) {
  const progressBar = document.getElementById('myProgressBar');
  let start = null;

  function animate(timestamp) {
    if (!start) start = timestamp;
    const progress = timestamp - start;
    const percentage = Math.min(progress / 1000 * 100, percent); // 1秒かけてpercent%まで

    progressBar.style.width = percentage + '%';
    progressBar.textContent = Math.round(percentage) + '%';

    if (percentage < percent) {
      requestAnimationFrame(animate);
    }
  }

  requestAnimationFrame(animate);
}

// 使用例
smoothUpdateProgress(75);

問題点2：プログレスバーの高さがブラウザ間で異なる

異なるブラウザやデバイスでプログレスバーの表示が崩れることがあります。

解決策：

CSSリセットや、具体的な単位（px, remなど）を使用して一貫性を持たせることで、ブラウザ間の差異を減らせます。

Css

.progress-bar {
  height: 30px; /* 具体的な値を指定 */
  box-sizing: border-box; /* パディングとボーダーを含めた高さにする */
}

問題点3：プログレスバーのパフォーマンス問題

複雑なアニメーションや多数の要素を持つプログレスバーでは、パフォーマンス問題が発生することがあります。

解決策：

CSSのwill-changeプロパティを使用して、ブラウザにアニメーション対象のプロパティを事前に通知することで、パフォーマンスを改善できます。

Css

.progress-bar {
  will-change: width, transform;
}

まとめ

本記事では、JavaScriptを使用して様々なタイプのプログレスバーを実装する方法について解説しました。

  • 基本の水平プログレスバー：HTML、CSS、JavaScriptを組み合わせたシンプルな実装方法
  • 時間ベースのプログレスバー：時間の経過に応じて自動で進捗が更新されるプログレスバー
  • ファイルアップロード用プログレスバー：実際のアプリケーションでよく使われるファイルアップロードの進捗表示
  • 円形プログレスバー：SVGを使用した円形のプログレスバーの実装方法
  • アニメーション付きプログレスバー：CSSアニメーションを使用して視覚的に魅力的なプログレスバー

この記事を通して、読者はJavaScriptでユーザーフレンドリーなプログレスバーを実装する知識を得られたことと思います。今後は、より複雑な進捗管理や、ユーザーインタラクションを組み合わせた高度なプログレスバーの実装についても記事にする予定です。

参考資料