TailwindCSSとReact(useState)で作るProgressBarの備忘録

はじめに

WEBアプリ開発の途中で、プログレスバー（ProgressBar）を作成したので、備忘録として残しておきます。

前提

• React (18.3.1)
• TailwindCSS

全体コード

import React, { useState, useEffect } from "react";

const Progressbar = () => {
  const [progress, setProgress] = useState("");
  const [progressbar, setProgressbar] = useState("");

  useEffect(() => {
    setProgress("33");
    setProgressbar("w-1/3");
  }, []);

  return (
    <div className="flex justify-center">
      <div className="w-2/4 bg-sky-500 rounded-full h-5 text-center">
        <div className={` bg-blue-500 h-5 rounded-full ${progressbar}`}></div>
        {progress}%
      </div>
    </div>
  );
};

export default Progressbar;

結果

解説

ReactのuseStateとuseEffectを使ってプログレスバー（ProgressBar）を作成しています。
進捗バーの表示と進捗度合い（％）の表示を行うコンポーネントです。

import

import React, { useState, useEffect } from "react";

まず最初に、ReactのuseStateとuseEffectフックをインポートします。
useStateは状態管理、useEffectは処理を行うために使用されます。

変数宣言

const Progressbar = () => {
  const [progressbar, setProgressbar] = useState("");
  const [progress, setProgress] = useState("");

  useEffect(() => {
    setProgress("33");
    setProgressbar("w-1/3");
  }, []);

  return (
        {/* 後述 */}
  );
};

Progressbarコンポーネント内で2つの状態変数progressとprogressbarを定義します。
progressは進捗のパーセンテージ（数値）、progressbarはTailwindCSSクラスを使って進捗バーの幅を管理しています。

useState

  const [progressbar, setProgressbar] = useState("");
  const [progress, setProgress] = useState("");

useStateを使用して状態を初期化します。
デフォルトでは、どちらも空の文字列で初期化されています。
この状態は、後述のuseEffectで更新されます。

useState("");

useEffect

  useEffect(() => {
    setProgress("33");
    setProgressbar("w-1/3");
  }, []);

useEffectは、コンポーネントがレンダリングされた後に実行されるstateを定義しています。
コンポーネントが最初に表示された際に、progressとprogressbarを更新します。
setProgress("33")によって進捗度を33%と表示し、setProgressbar("w-1/3")でバーの幅を全体の3分の1に設定しています。
w-1/3はTailwindCSSのクラスで、幅を親要素の3分の1に指定しています。

return (JSX , TailwindCSS)

  return (
    <div className="flex justify-center">
      <div className="w-2/4 bg-sky-500 rounded-full h-5 text-center">
        <div className={` bg-blue-500 h-5 rounded-full ${progressbar}`}></div>
        {progress}%
      </div>
    </div>
  );

returnでは、JSXを使用して、ProgressBarのレイアウトを描画します。

外側の<div>要素は、flexとjustify-centerクラスを使って、ProgressBarを中央に配置しています。
その中に、w-2/4で幅50%、bg-sky-500で背景色を指定した要素を表示し、その中に進捗バーを配置しています。
progressbarの値は、TailwindCSSのクラスとして設定されており、w-1/3が適用されています。これにより、進捗バーの幅が親要素の3分の1になる仕組みです。
最後に、進捗率{progress}%を表示しています。

export

export default Progressbar;

exportを指定することで、progressbarがコンポーネントとして利用できるようになります。

おわりに

備忘録として、TailwindCSS×React（useState）のprogressbar作成方法をまとめました。
何かの役に立つと幸いです。