時間に応じてメッセージを変えて表示！

下記を用意します。名前はなんでも良いです。

- index.html

- script.js

script.js内に下記JavaScriptを書いて、時間を取得します。

---

const today = new Date()

console.log(today)

---

▼index.htmlをGoogle Chromeなどで開いて、コンソール画面を確認します。

※Google Chromeだと右クリック→検証→Consoleをクリックします。

console.log(today)が出ています。

続いて下記を追記して、時間と分を取得します。

---

const hour = today.getHours()

const minutes = today.getMinutes()

console.log(hour)

console.log(minutes)

---

▼コンソール画面で確認します。

時間と分が出ました！

次は◯時◯分という形で出してみましょう！以下を追記します。

1行目はバッククォートで囲んでいます。

↓コレ

`

---

const time = `${hour}時${minutes}分`

console.log(time)

---

次に先ほどのhourを使って、

もしも18時以降なら（hourが17より大きかったら）…こんばんは

上記当てはまらなくて、

もしも12時以降なら（hourが11より大きかったら）…こんにちは

上記当てはまらなくて、

もしも5時以降なら（hourが4より大きかったら）…おはようございます

どれにも当てはまらなかったら、（hourが4以下）…無理しないでください

を表示してみます。

下記を追記してください。

---

function greeting() {

 if (hour > 17) {

  console.log(`こんばんは。現在時刻は${time}です。`)

 } else if (hour > 11) {

  console.log(`こんにちは。現在時刻は${time}です。`)

 } else if (hour > 4) {

  console.log(`おはようございます。現在時刻は${time}です。`)

 } else {

  console.log(`今${time}です。無理しないでくださいね。`)

 }

}

greeting()

---

最後の行のgreeting()というのは、function greetingを実行してね。という意味です。

▼コンソール画面を見てみましょう。

これをコンソール画面ではなくて、いよいよ実際ページに表示させたいと思います！

今度は、index.htmlに。下記を書きます。

---

<p id="message"></p>

---

そして、script.jsの中の、function greeting()〜　より上に、下記を書きます。

---

const message = document.getElementById('message')

---

↑これはindex.htmlに書いた、id="message"の部分を取得しています。

次に、この<p id="message">の中にテキストを入れてくださいと実行するために、script.js のif文の中に書いた、console.logの部分をmessage.innerTextに書き換えます。以下のようにします。

---

if (hour > 17) {

message.innerText = `こんばんは。現在時刻は${time}です。`

 } else if (hour > 11) {

message.innerText = `こんにちは。現在時刻は${time}です。`

 } else if (hour > 4) {

message.innerText = `おはようございます。現在時刻は${time}です。`

 } else {

message.innerText = `今${time}です。無理しないでくださいね。`

 }

---

そうすると。。。

↓

画面にも表示されました！

Consoleの隣の、Elementsというところで確認すると、pタグの中にメッセージが入っているのが確認できます。

ちなみに最終的にscript.jsの中は、以下のようになります。

最後は、console.log()のところは消しても大丈夫です。

今回は以上です。

本日もお疲れ様でした☆