一文で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のコールバック関数では、1 秒ごとに呼び出されるタイマーをsetTimeoutを使用して設定し、呼び出すたびに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 ループで実装しようと考えていました。これは実現できるかもしれませんが、問題があります。それはなぜでしょうか？🤭