[React] 現在の日付と時刻を表示する（デジタル時計）

Reactで現在の日付や時刻を表示する方法の備忘録となります。

JavaScriptでは下記のメソッドを利用することで日付や時刻の値を取得することができます。

let d = new Date();
console.log(d.getFullYear());                // 2023 ・・・ 年の値を取得する
console.log(d.getMonth());                   // 0        ・・・ 月の値を取得する
console.log(d.getDate());                     // 17      ・・・ 日の値を取得する
console.log(d.getDay());                       // 2        ・・・ 曜日の値を取得する
console.log(d.getHours());                   // 8         ・・・ 時の値を取得する
console.log(d.getMinutes());                // 28      ・・・ 分の値を取得する
console.log(d.getSeconds());               // 17      ・・・ 秒の値を取得する
console.log(d.getMilliseconds());         // 438    ・・・ ミリ秒の値を取得する

これらのDate関数を利用して、日付と時刻をリアルタイムに更新するものを作成していきたいと思います。

useEffectとuseStateを使う

まずは、DigitalDateTime.js というファイルを新しく作成し、useEffectとuseStateをimportします。

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

次に曜日を日本語で表示するために配列として定義しておきます。

const weekday = ['日', '月', '火', '水', '木', '金', '土'];

では、実際にごりごり書いていきます。

日時については、先ほど述べましたが、今回はただ表示させるのではなく一秒ごとに更新処理をおこなうために「setIntervalメソッド」を利用していきます。

まずuseStateフックを使って日付および時刻の状態を管理できるようにしておきます。

const DigitalDateTime = () => {
  const [date, setDate] = useState([]);
  const [time, setTime] = useState([]);
}

次にuseEffectを使って画面へのレンダー結果が反映された後に動作するように処理を記述していきます

useEffect(() => {
    setInterval(() => {
      let d = new Date();
      let year = d.getFullYear();
      let month = d.getMonth() + 1;
      let day = d.getDate();
      let dayofweek = d.getDay();
      setDate(year + '年' + month + '月' + day + '日' + '[' + weekday[dayofweek] + ']');

      let hour = d.getHours().toString().padStart(2, '0');
      let minute = d.getMinutes().toString().padStart(2, '0');
      let seconds = d.getSeconds().toString().padStart(2, '0');
      setTime(hour + ':' + minute + ':' + seconds);
    }, 1000);
  }, []);

1秒ごと現在の時刻を取得し、setDate/setTimeとして現在の日時を設定します。時刻については、2桁表記を維持するため0パディング処理を行なっています。

最後に、出力するDOMを返します。

return (
    <div className="Digit">
      <p class="digit">{date} <span>{time}</span></p>
    </div>
);

レンダリングするindex.jsに先ほど今回作成した処理をインポートします。

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import Digit from './DigitalDateTime';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Digit />
  </React.StrictMode>
);

reportWebVitals();

デジタル時計が作成できました。

サンプルスクリプト

今回作成したスクリプトのは下記の通りです

DigitalDateTime.js

import React, {useEffect, useState} from 'react';
import './DigitalDateTime.css';

const weekday = ['日', '月', '火', '水', '木', '金', '土'];

const DigitalDateTime = () => {
  const [date, setDate] = useState([]);
  const [time, setTime] = useState([]);

  useEffect(() => {
    setInterval(() => {
      let d = new Date();
      let year = d.getFullYear();
      let month = d.getMonth() + 1;
      let day = d.getDate();
      let dayofweek = d.getDay();
      setDate(year + '年' + month + '月' + day + '日' + '[' + weekday[dayofweek] + ']');
      let hour = d.getHours().toString().padStart(2, '0');
      let minute = d.getMinutes().toString().padStart(2, '0');
      let seconds = d.getSeconds().toString().padStart(2, '0');
      setTime(hour + ':' + minute + ':' + seconds);
    }, 1000);
  }, []);

  return (
    <div className="Digit">
      <p class="digit">{date} <span>{time}</span></p>
    </div>
  );
}

export default DigitalDateTime

最後に

デジタル時計は様々な場面で利用することがが多いので、是非使い方を覚えておくと良いかと思います。特にuseEffectやuseState周りの使い方ですかね。