【初心者向け解説】JavaScriptで時間ごとに異なるメッセージを表示する方法

プログラミング

JavaScriptを使って時間ごとに異なるメッセージを表示する方法の解説記事です。朝は「おはようございます!」、昼は「こんにちは!」夜は「こんばんは!」と表示させます。初心者向けにやさしく解説しました。

JavaScriptを使った挨拶文の例

ここにあいさつを表示します
このブログへの訪問ありがとうございます!

ごん先生
ごん先生

ブログ閲覧時の時間に合う「あいさつ」が表示されましたか?

テスト用HTMLファイル

今回はスタイルシート無しで、以下のファイルで実験しました。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>あいさつのメッセージを表示</title>
    <meta name="description" content="テスト用">
</head>
<body>
     <p><span id="greeting">ここにあいさつを表示します</span><br>
     このブログへの訪問ありがとうございます!</p>
<script src="js/main.js"></script><!-- jsファイルへのリンク -->
</body>
</html>

jsファイルを別に作る場合(main.js)

上のHTMLでは、「main.js」という名前をつけたjsファイルを「js」フォルダに入れて適用させています。同じHTMLに記述する場合は上のjsファイルへのリンクを削除して、以下のコードを<script></script>で囲んでください。

//現在の時間を取得する
const hour = new Date().getHours();

//朝4時〜10時59分まで
if(hour >= 4 && hour < 11){
document.getElementById('greeting').textContent ="おはようございます!";
//昼11時〜16時59分まで
}else if(hour >=11 && hour <17){
document.getElementById('greeting').textContent ="こんにちは!";
//夜18時〜3時59分まで
}else{
document.getElementById('greeting').textContent ="こんばんは!";
}

「時間ごとに異なる表示をするソースコード」のやさしい解説

現在の時間(○時)を取得する new Date().getHours();

最初の一文で現在の時間を取得しています。「○時」にあたる部分を定数consthourにして、現在の時間を取得するDateオブジェクト代入します。

今回は「何時」を取得するので、その後ろに「.(ドット)」で繋いでgetHours()というメソッドを追加しています。最後はセミコロンを忘れずに。

const hour = new Date().getHours();

【Dateオブジェクトのメソッド記述方法】
 Dateオブジェクト.メソッド名()
ごん先生
ごん先生

メソッド名には他にも年を取得するgetFullYear()、何月かを0〜11の値で取得するgetMonth()など、いろいろなメソッドがあります。

=(イコール)は、JavaScriptでは代入を意味する

「=」は右側のデータを左側の「変数」「定数」「プロパティ」などに代入する役割をする代入演算子です。ここでは定数hourに代入しています。

表示する挨拶文の時間の範囲(条件)を決める

例えば「この時間帯ならば、このあいさつを表示する」と決めます。

朝4時〜10時台(10:59)ならば「おはようございます!」
昼11時〜17時台(17:59)ならば「こんにちは!」
夜18時〜3時台(3:59)ならば「こんばんは!」

24時=0時と表現しました

if文を使って条件分岐を考える

条件aを満たす時→「おはようございます」と表示する。
条件aは満たさないが、条件bを満たす時→「こんにちは」と表示する。
条件a,条件bを満たさない時→「こんばんは」と表示する。
という場合、以下のような構文を使います。

if(条件aの時){条件aを満たす時の処理} ;
else if(条件aは満たさないが、条件bを満たす時){条件bの時の処理};
else{条件a,条件bを満たさない時の処理};

「かつ」を意味する&&演算子を使う

A && B
意味:条件Aと条件Bを共に満たす

条件aとして「朝4時〜10時台(10:59)」ならば「おはようございます!」と表示するには、まず「if」を使います。
※「○時」にあたる部分を定数const)をhourとしています。

朝4時〜10時59分まで「おはようございます!」と表示するには

条件bとして「昼11時〜17時台(17:59)」ならば「こんにちは!」と表示するには、「if else」を使います。

昼11時〜17時59分まで「こんにちは!」と表示するには

条件aにも条件bにも当てはまらない場合、「こんばんは!」と表示するには、今まで挙げた条件以外を表す「else」を使うことができます。

夜18時から3時59分まで「こんばんは!」と表示させるには

getElementByIdで要素を取得しtext.Contentで書き換える

document.getElementById(’id名’)
→’id名’の要素を取得する

ここではid名greeting」の<span>タグ(ここにあいさつを表示します)を取得しています。この内容をtextContentで書き換えます。今回は文字列を代入するので、シングルクォート' 'かダブルクォート””で囲みます。

textContent
→HTMLを解釈せずに(※)そのまま文字として出力する

※例えばタグ入りで”<b>こんにちは</b>”と代入すると、<b>こんにちは</b>とタグまでそのまま表示されますtextContentの代わりにinnerHTMLを使った場合は、こんにちはと太字で表示されます

コンテンツを文字列で書き換える方法
document.getElementById(’id名’).textContent = '書き換えたい文字列';

おまけ(コンソールへの表示で確認する方法)

Chromeブラウザの場合、画面右上のメニューの[その他のツール]→[ディベロッパーツール]からコンソールを表示させて確認することができます。

コンソールに表示させたい時は、consolole.logの後にさらに(  )でdocument.getElementById(’id名’).textContentを囲みます。

例えば、console.log(document.getElementById('greeting'));とmain.jsに追記すると、取得した要素を確認できます。

コンソールに表示した場合(取得した要素を確認)

console.log(document.getElementById('greeting').textContent);にすると書き換えた文だけ表示されました。

コンソールに表示した場合(書き換えた文のみ確認)

document.writeではなくtextContentを使った理由

ブログやサイト編集で使うときに<ここにあいさつを表示します>という記述があると「ここに表示されるんだな」と書き換える場所がわかるので便利だったからです。

また、document.writeは2021年現在非推奨であるといくつかのサイトに書かれていました。document.writeの代わりにinnerHTMLinsertAdjacentHTML('挿入する場所',挿入する要素)も使えます。
【外部参考記事】TecAcademyの記事 https://techacademy.jp/magazine/26542

ワードプレス本文で実際に表示させる方法は別記事で紹介中

ブログに挨拶文を加えたいときは、こちらの記事が参考になれば幸いです。

ワードプレスブログでも使える!JavaScriptで時間ごとに異なるあいさつを表示する方法【初心者向け】

タイトルとURLをコピーしました