Reactで現在日付を取得する方法

Reactで現在日付を取得する方法

Reactで現在の日付を取得するためには、JavaScriptのDateオブジェクトを使用するのが一般的です。
以下にTypeScriptを使用したReactコンポーネントの例を示します。

この例では、日付を取得して表示するシンプルなコンポーネントを作成します。

TypeScriptでのReactコンポーネント例

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

const CurrentDate: React.FC = () => {
    const [currentDate, setCurrentDate] = useState<string>('');

    useEffect(() => {
        const date = new Date();
        setCurrentDate(date.toLocaleDateString());
    }, []);

    return (
        <div>
            <h1>今日の日付: {currentDate}</h1>
        </div>
    );
};

export default CurrentDate;

説明

1. useState
現在の日付を保存するためのステートを宣言します。
2. useEffect
コンポーネントがマウントされたときに一度だけ実行されるようにし、日付を取得してステートを更新します。
3. toLocaleDateString
日付をローカルフォーマットの文字列に変換します。

このコードは、追加のライブラリを必要としません。
基本的なReactとTypeScriptのセットアップがされていれば、そのまま動作します。

もし、エラー処理や他のメッセージを表示する場合は、日本語で表示することができます。
例えば、日付の取得に失敗した場合のメッセージを追加するには、以下のようにします。

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

const CurrentDate: React.FC = () => {
    const [currentDate, setCurrentDate] = useState<string>('');
    const [error, setError] = useState<string>('');

    useEffect(() => {
        try {
            const date = new Date();
            setCurrentDate(date.toLocaleDateString());
        } catch (e) {
            setError('日付の取得に失敗しました。');
        }
    }, []);

    return (
        <div>
            {error ? (
                <p style={{ color: 'red' }}>{error}</p>
            ) : (
                <h1>今日の日付: {currentDate}</h1>
            )}
        </div>
    );
};

export default CurrentDate;

このようにすることで、エラーが発生した場合に日本語のメッセージを表示することができます。