React でカウントダウンタイマーを設定する

React に組み込まれている最新の Web アプリケーションでは、多くの場合、時間を追跡する必要があります。たとえば、ブログがある場合、すべての記事には、その日付と投稿からの経過時間を表示する必要があります。

React アプリケーションは、さまざまな機能セットを持つことができます。JavaScript でカウントダウンタイマーを実装するのはかなり難しい場合があります。これには、日付値の操作またはフォーマットが含まれます。

React アプリケーションでのカウントダウンのサンプル実装を見てみましょう。

React でのカウントダウンタイマーの実装

一般に、すべての React フレームワークのカウントダウンタイマーは同じように構成されています。コンポーネントは、React アプリケーションの主要な構成要素です。

この例では、カウントダウンタイマーの機能コンポーネントを作成します。フックを使用して状態を維持し、副作用を管理します。

React で useState() および useEffect() フックを使用してカウントダウンタイマーを設定する

Functional React コンポーネントは異なる構造を持つことができますが、それらはすべて同じ基本パターンに従います。関数を設定して、カウントダウンと呼びましょう。

おそらく、このコンポーネントは親コンポーネント内で使用するので、props も受け入れる必要があります。

export default function Countdown(props){
    return (
    <div>
    {!(mins && secs) ? "" : (
        <p>
          {" "}
          {mins}:{secs < 10 ? `0${secs}` : secs}
        </p>
      )}    
    </div>
    )
}

これまでのところ、これは非常に簡単です。プロップから開始分と秒の値を取得します。カウントダウンする分と秒がない場合、空の文字列を表示するタイマーはありません。

値が使用可能な場合は、1 桁の数値であっても、フォーマットの一貫性を保つために、常に秒を 2 桁で表示することをお勧めします。中括弧内のテンプレートリテラルを使用することで、これを実現します。

ご覧のとおり、mins と secs の値は構造化されていないため、次のステップはそれを行うことです。また、useState() フックと useEffect() フックが必要になることにも言及しました。前者は、時代の変化を追跡するために必要になります。

クラスコンポーネントを使用している場合は、ライフサイクルメソッドを使用して時間の変更を処理します。多くのライフサイクルメソッド機能を備えた機能コンポーネントに useEffect() フックを使用できます。

それで、これ以上面倒なことはせずに、アプリケーションにフックを導入しましょう。

import React from "react";
import { useState, useEffect } from "react";
export default function Countdown(props){
  const { startingMinutes = 0, startingSeconds = 0 } = props;
  const [mins, setMinutes] = useState(startingMinutes);
  const [secs, setSeconds] = useState(startingSeconds);
    return (
    <div>
    {!(mins && secs) ? "" : (
        <p>
          {" "}
          {mins}:{secs < 10 ? `0${secs}` : secs}
        </p>
      )}    
    </div>
    )
}

コアライブラリから useState フックと useEffect フックのインポートを開始する必要があります。

これまでのところ、mins と secs の状態変数は 0 に設定されているため、画面には何も表示されません。ただし、props の startingMinutes と startingSeconds の値を変更すると、カウントダウンの開始点が表示されます。上記のコードでは、状態を更新するための関数も定義しました。

カウントダウンの本質は、特定の時間値を定期的に差し引くことです。そのためには、setInterval() メソッドが必要になります。指定された時間ごとに 1 回コードを実行します。

この場合、1 秒ごとに、合計秒数を 1 ずつ減らす必要があります。60 秒ごとに、開始分も 1つ減らす必要があります。

完成したアプリケーションは次のようになります。

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

export default function Countdown(props) {
  const { startingMinutes = 111, startingSeconds = 0 } = props;
  const [mins, setMinutes] = useState(startingMinutes);
  const [secs, setSeconds] = useState(startingSeconds);
  useEffect(() => {
    let sampleInterval = setInterval(() => {
      if (secs > 0) {
        setSeconds(secs - 1);
      }
      if (secs === 0) {
        if (mins === 0) {
          clearInterval(sampleInterval);
        } else {
          setMinutes(mins - 1);
          setSeconds(59);
        }
      }
    }, 1000);
    return () => {
      clearInterval(sampleInterval);
    };
  });

  return (
    <div>
      {!(mins && secs) ? "" : (
        <p>
          {" "}
          {mins}:{secs < 10 ? `0${secs}` : secs}
        </p>
      )}
    </div>
  );
}

ここで開梱するものはたくさんあります。まず、setInterval() コールバックのロジックについて説明します。これは、指定された時間ごとに 1 回実行されるコードだからです。

まず、secs 状態の値が 0 より大きいかどうかを確認し、0 より大きい場合は、secs - 1 値で状態を更新します。これは、実質的にカウントダウンのコア機能です。

次のステップでは、secs と mins が 0 の場合に何が起こるかを定義します。この場合、clearInterval() 関数を呼び出して、コードの繰り返し実行をキャンセルします。

最後に、else ステートメントでは、秒が 0 に達した場合を処理しますが、差し引く時間はまだあります。

コールバック関数が最初の引数です。これには、繰り返し実行する必要のあるコードが含まれています。

この例では、インライン関数を作成しましたが、次のように、簡単に個別に作成して、setInterval() メソッドで参照することもできます。

setInterval(someFunction, 1000)

その例の 2 番目の引数は、元のサンプルと同様に、遅延を示しています。setInterval() 関数がコードの実行の間に待機する時間を指定します。

時間の値はミリ秒単位で指定されます。この例では、カウントダウンタイマーを 1 秒ごとに 1000 ミリ秒実行する必要があります。

最後に、useEffect() フックの戻り値は、サブスクリプションをクリーンアップし、setInterval() などの反復関数をキャンセルするために一般的に使用されます。この例では、まさにそれを実行し、sampleInterval() コールバック関数を実行するときに clearInterval() を呼び出します。