JavaScriptで特定の時間帯に応じて文字を変更する方法

Posted on by

ウェブページやアプリケーションでは、ユーザーに対して時間帯に応じたメッセージを表示することで、
よりパーソナライズされた体験を提供できます。
たとえば、朝なら「おはようございます」、昼なら「こんにちは」、
夜なら「こんばんは」といったように、現在の時間に応じて適切な挨拶を表示することが可能です。

この記事では、JavaScriptを使って特定の時間帯に応じて文字を変更する方法を解説します。

実装の全体像

以下は、実際に時間帯によってメッセージを切り替えるコードです。
このコードを使えば、ページを開いた時点の時間を基にメッセージを表示し、
その後も1分ごとに自動でメッセージが更新されるようになります。

コードの例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>時間に応じて文字を変える</title>
    <script>
        function updateMessage() {
            // 現在の時間を取得
            const now = new Date();
            const hours = now.getHours(); // 現在の時刻（時間）を取得
            let message = '';

            // 時間帯に応じて表示するメッセージを変更
            if (hours >= 6 && hours < 12) {
                message = 'おはようございます';
            } else if (hours >= 12 && hours < 18) {
                message = 'こんにちは';
            } else if (hours >= 18 && hours < 22) {
                message = 'こんばんは';
            } else {
                message = 'おやすみなさい';
            }

            // HTML内の要素にメッセージを設定
            document.getElementById('timeMessage').innerText = message;
        }

        // ページがロードされたときにメッセージを更新
        window.onload = function() {
            updateMessage();
        };

        // 一定時間ごとにメッセージを更新（例: 1分ごとに更新）
        setInterval(updateMessage, 60000);
    </script>
</head>
<body>
    <h1>現在の時間に応じたメッセージ</h1>
    <p id="timeMessage"></p>
</body>
</html>

コードの解説

Dateオブジェクトで現在の時間を取得

const now = new Date();
この行で、現在の日時情報を持つDateオブジェクトを作成します。
このオブジェクトからgetHours()メソッドを使って、現在の「時間」だけを取得しています。

条件分岐でメッセージを設定

if文を使って、時間帯に応じて表示するメッセージを切り替えます。
具体的には、以下のようにしています。

6時〜12時: 「おはようございます」
12時〜18時: 「こんにちは」
18時〜22時: 「こんばんは」
22時〜翌朝6時: 「おやすみなさい」

HTML要素にメッセージを設定

document.getElementById('timeMessage').innerText = message;
この部分では、取得したメッセージをHTML内のid="timeMessage"で指定された要素に挿入しています。
これにより、JavaScriptで動的にメッセージを更新することができます。

ページが読み込まれたときにメッセージを更新

window.onloadイベントを使って、ページが読み込まれたタイミングでupdateMessage()関数を実行します。これにより、ページを開いた直後に現在の時間に対応したメッセージが表示されます。

1分ごとにメッセージを更新

setInterval(updateMessage, 60000);
この行ではsetIntervalを使って、1分（60,000ミリ秒）ごとにupdateMessage関数を実行し、
メッセージを定期的に更新します。
これにより、ユーザーがページを開いた後も時間帯に応じたメッセージが常に最新の状態で表示されます。

どのようなシーンで役立つか？

このような実装は、以下のようなシーンで役立ちます。

ウェブサイトのパーソナライズ

ユーザーが訪れる時間帯に応じて挨拶を変えることで、親しみやすい印象を与えることができます。
特に、eコマースサイトやブログなどで、ユーザーエクスペリエンスを向上させるために利用できます。

ダッシュボードやアプリケーションのステータス表示

特定の時間帯に応じた通知やステータス表示にも応用可能です。
たとえば、営業時間や休業時間を自動的に表示したり、昼と夜でテーマや表示内容を変えることができます。

まとめ

JavaScriptを使うことで、現在の時間に応じた動的なメッセージを簡単に実装できます。
これにより、ユーザーがいつサイトに訪れても、その時間に適した情報や挨拶を提供することが可能です。
ぜひ、この方法を活用して、ユーザーにとってより魅力的なウェブサイトやアプリケーションを作成してみてください。