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 ="おはようございます！";
//昼１１時〜1６時59分まで
}else if(hour >=11 && hour <17){
document.getElementById('greeting').textContent ="こんにちは！";
//夜18時〜3時59分まで
}else{
document.getElementById('greeting').textContent ="こんばんは！";
}
「時間ごとに異なる表示をするソースコード」のやさしい解説
現在の時間（○時）を取得する new Date().getHours();
最初の一文で現在の時間を取得しています。「○時」にあたる部分を定数（const）hourにして、現在の時間を取得するDateオブジェクトを代入します。
今回は「何時」を取得するので、その後ろに「.（ドット）」で繋いでgetHours()というメソッドを追加しています。最後はセミコロンを忘れずに。
const hour = new Date().getHours();
Dateオブジェクト.メソッド名()
メソッド名には他にも年を取得するgetFullYear()、何月かを０〜11の値で取得するgetMonth()など、いろいろなメソッドがあります。
＝（イコール）は、JavaScriptでは代入を意味する
「＝」は右側のデータを左側の「変数」「定数」「プロパティ」などに代入する役割をする代入演算子です。ここでは定数hourに代入しています。
表示する挨拶文の時間の範囲（条件）を決める
例えば「この時間帯ならば、このあいさつを表示する」と決めます。
朝4時〜10時台(10:59)ならば「おはようございます！」
昼11時〜17時台（17:59）ならば「こんにちは！」
夜18時〜３時台（3：59）ならば「こんばんは！」
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としています。
条件bとして「昼11時〜17時台(17:59)」ならば「こんにちは！」と表示するには、「if else」を使います。
条件aにも条件bにも当てはまらない場合、「こんばんは！」と表示するには、今まで挙げた条件以外を表す「else」を使うことができます。
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の代わりにinnerHTMLやinsertAdjacentHTML（'挿入する場所',挿入する要素）も使えます。
【外部参考記事】TecAcademyの記事 https://techacademy.jp/magazine/26542
WordPress本文で実際に表示させる方法は別記事で紹介中
ブログに挨拶文を加えたいときは、こちらの記事が参考になれば幸いです。
