Reactでトップローディングバーを実装する方法

まず、Reactプロジェクトを作成し、必要なパッケージをインストールします。以下のコマンドを使用して、Reactアプリケーションの雛形を作成します。

npx create-react-app my-app

次に、ローディングバーを表示するコンポーネントを作成します。新しいファイル LoadingBar.js を作成し、以下のコードを追加します。

import React, { useState, useEffect } from 'react';
const LoadingBar = () => {
  const [progress, setProgress] = useState(0);
  useEffect(() => {
    const interval = setInterval(() => {
      setProgress((prevProgress) => {
        if (prevProgress === 100) {
          clearInterval(interval);
          return 0;
        } else {
          return prevProgress + 10;
        }
      });
    }, 500);
    return () => {
      clearInterval(interval);
    };
  }, []);
  return (
    <div className="loading-bar">
      <div
        className="progress"
        style={{ width: `${progress}%` }}
      ></div>
    </div>
  );
};
export default LoadingBar;

このコンポーネントでは、useState フックを使用して進捗状況の値を管理し、useEffect フックを使用して進捗状況を更新します。setInterval 関数を使用して0.5秒ごとに進捗状況を更新し、100に達したらインターバルをクリアして進捗状況をリセットします。

次に、ローディングバーを表示するコンポーネントをアプリケーションに組み込みます。App.js ファイルを編集し、以下のコードを追加します。

import React from 'react';
import LoadingBar from './LoadingBar';
const App = () => {
  return (
    <div>
      <h1>Reactトップローディングバーの実装</h1>
      <LoadingBar />
      <p>アプリケーションのコンテンツ</p>
    </div>
  );
};
export default App;

最後に、アプリケーションを起動します。以下のコマンドを使用して、Reactアプリケーションを実行します。

npm start

これで、Reactアプリケーションにトップローディングバーが表示されます。ブラウザでアプリケーションを開くと、ローディングバーが進捗状況に応じて表示されます。

この方法を使えば、Reactでシンプルで簡単なトップローディングバーを実装することができます。必要に応じてスタイリングやカスタマイズを行い、より魅力的なローディングバーを作成することもできます。