React Hooksで作るカウントダウンタイマー

ReactはJavaScriptのライブラリで、UIを構築するために利用されます。Reactを利用することで、コンポーネント単位でUIを構築することができます。Reactには、Class ComponentやFunctional Componentなど、様々なコンポーネントがありますが、本記事ではFunctional Componentを利用したReact Hooksの使い方を紹介します。

React Hooksとは

React Hooksは、Reactの機能の一つで、Functional Componentの状態管理やライフサイクルメソッドの利用を可能にします。これにより、Class Componentに比べてシンプルなコードで同じ機能を実装することができます。

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

React Hooksを利用して、カウントダウンタイマーを実装してみましょう。カウントダウンタイマーは、指定された時間が経過するまでの時間を表示するUIです。以下のコードは、useStateフックを利用してカウントダウンタイマーを実装する例です。

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

const CountdownTimer = ({ time }) => {
  const [seconds, setSeconds] = useState(time);

  useEffect(() => {
    if (seconds > 0) {
      setTimeout(() => setSeconds(seconds - 1), 1000);
    }
  }, [seconds]);

  return (
    <div>
      {seconds}秒
    </div>
  );
};

export default CountdownTimer;

上記のコードでは、useStateフックを利用して、secondsという状態を宣言しています。そして、useEffectフックを利用して、secondsの状態が変化した場合に、setTimeoutを利用して1秒ごとにsecondsの値を更新しています。最後に、return文でカウントダウンの秒数を表示しています。

まとめ

React Hooksを利用することで、Class Componentよりもシンプルなコードで同じ機能を実装することができます。本記事では、useStateフックとuseEffectフックを利用して、カウントダウンタイマーを実装する例を紹介しました。Reactを利用する際は、Hooksの利用も検討してみてください。