一文でReactのカウントダウンを理解し、煩雑なコードをおさらばしましょう。

カウントダウン機能は、ウェブサイトやアプリケーションでよく見られ、オンライン試験、待機時間、タイムセールなどさまざまな場面で使用されます。React 初心者の場合、このような機能を実装するには複雑なコードを書く必要があると思うかもしれません。しかし、実際には、React の設計思想と強力なフック（Hooks）により、これは非常に簡単になります。

この記事では、簡単な 60 秒カウントダウンタイマーをステップバイステップで実装し、React での状態管理と副作用の処理方法、および React のフックを使用してコードを簡素化する方法を理解します。

カウントダウンタイマーの必要性#

カウントダウンタイマーは、ユーザーエクスペリエンスを向上させ、ユーザーに明確な時間フィードバックを提供することができます。特定の時間内にタスクを完了したり、イベントの発生を待ったりする場合、カウントダウンタイマーは明確な視覚的指示を提供し、ユーザーが反応できるように支援します。

スタート：React アプリの作成#

まず、Node.js と npm がインストールされていることを確認し、次のコマンドで新しい React アプリを作成します：

npx create-react-app countdown-timer

プロジェクトに移動し、アプリを起動します：

cd countdown-timer
npm start

カウントダウンロジックの考慮事項#

カウントダウン機能を実装するための主な考慮事項は次の 2 点です：

状態管理：カウントダウン時間の持続的な更新は、典型的な状態管理の問題です。
副作用の処理：時間の更新は JavaScript のタイマーに依存しており、これは副作用です。

React では、useStateフックは状態管理に、useEffectフックは副作用の処理に使用されます。

カウントダウンコンポーネントの作成
srcフォルダ内にCountdown.jsという名前のファイルを作成し、次のコードを記述します：

// src/Countdown.js
import React, { useState, useEffect } from 'react';

const Countdown = () => {
  // カウントダウン時間をuseStateで管理
  const [seconds, setSeconds] = useState(60);

  // useEffectでカウントダウンロジックを処理
  useEffect(() => {
    if (seconds > 0) {
      // secondsが0より大きい場合にのみタイマーを設定
      const timerId = setTimeout(() => setSeconds(seconds - 1), 1000);
      // タイマーをクリア
      return () => clearTimeout(timerId);
    }
  }, [seconds]);// secondsに依存し、secondsが変更されるたびにtimeoutを再設定する
  
  return <div>残り時間：{seconds} 秒</div>;
};

export default Countdown;

キーポイントの解説#

useState フック：カウントダウンの状態secondsを宣言し、初期値を 60 に設定します。setSecondsは、secondsの値を更新するための関数です。

useEffect フック：副作用の処理であり、ここではタイマーが該当します。useEffectは関数を受け取り、その関数はコンポーネントが画面にレンダリングされた後に実行されます。secondsが変更されると、この関数が再度実行されます。

useEffectのコールバック関数では、setTimeoutを使用して 1 秒ごとに呼び出されるタイマーを設定し、呼び出すたびにsetSecondsを使用してsecondsの値を減らしています。

注意点として、useEffect内で関数を返しています。この関数は、コンポーネントがアンマウントされる前またはuseEffectが再度実行される前に呼び出され、前のタイマーをクリアするためのものです。これにより、メモリリークの問題が回避されます。

Countdown コンポーネントの使用#

src/App.jsでCountdownコンポーネントをインポートして使用します：

// src/App.js
import React from 'react';
import './App.css';
import Countdown from './Countdown';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>カウントダウンタイマー</h1>
        <Countdown />
      </header>
    </div>
  );
}

export default App;

これでアプリを起動すると、60 からカウントダウンするタイマーがページ上に表示されるはずです。

まとめ#

このシンプルな例を通じて、ReactでuseStateとuseEffectフックを使用して状態と副作用を管理する方法を学びました。これは、Reactの宣言的なプログラミングの特徴を示しています - Reactに望む結果を伝えるだけで、Reactがそれを実現します。

これでシンプルなカウントダウンタイマーの作成方法を学びましたので、この知識をより複雑な機能に適用したり、リセットボタンやカスタム時間などの追加機能をカウントダウンタイマーに追加してみることができます。

最初の考えでは、useEffect内でsetTimeOutを使用し、for ループで実装しようとしました。これは実現できるかもしれませんが、問題があります。それはなぜでしょうか？🤭