今日の日付をウェブサイトに表示したいけれど、どうやって表示すればいいのだろうと考えたこと、ありませんか?

今回は、JavaScript で今日の日付と曜日を表示する方法を紹介します。

まずは、現在の日付を取得してみましょう。

日付を取得するには、Date オブジェクトを使用します。

現在の日付は、new Date()で取得できます。

const date = new Date()

console.log(date);で確認してみると、

image2

現在の日付を取得することができました。

次に西暦を取得します。

西暦は、getFullYear()を使用します。

コードは、以下の通りです。

const date = new Date()
const year = date.getFullYear()

console.log(year);で確認すると、

image3

今年は 2021 年なので、『2021』を取得することができました。

では、2021 年をブラウザで表示してみます。

index.html 内に日付を表示するフィールドを作成しておきましょう。

<p id="today"></p>

innerHTMLを使って、p タグ内に 2021 年を表示させます。

const date = new Date()
const year = date.getFullYear()

document.getElementById("today").innerHTML = `${year}年`

文字列と変数を混在させるには、バックスラッシュの中で変数を${}で囲みます。

ブラウザで確認すると、

image4

『2021 年』と表示されました。

西暦と同様に、月も表示させます。

月は、getMonth()で取得できます。

const month = date.getMonth()

console.log(month);で確認すると、

image5

今月は 5 月なのに『4』が取得されました。

getMonth()は、0 のときが 1 月、1 のときが 2 月、2 のときが 3 月といったように、0 を起点にしております。

monthの変数に 1 を足してあげましょう。

const month = date.getMonth() + 1

console.log(month);で確認すると、

image6

『5』が取得できました。

西暦と同様にコードを書いてみましょう。

const date = new Date()
const year = date.getFullYear()
const month = date.getMonth() + 1

document.getElementById("today").innerHTML = `${year}年${month}月`

ブラウザで確認すると、

image7

『2021 年 5 月』が表示できました。

日付は、getDate()で取得できます。

const day = date.getDate()

console.log(month);で確認すると、

image8

『23』が表示されました。

ブラウザに表示するようコードを書きます。

const date = new Date()
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()

document.getElementById("today").innerHTML = `${year}年${month}月${day}日`

ブラウザで確認すると、

image9

『2021 年 5 月 23 日』が表示できました。

最後に、曜日を取得します。

曜日は、getDay()で取得できます。

const week = date.getDay()

getDate()getDay()は間違えやすいので気をつけてください。

console.log(week);で確認すると、

image10

『0』が取得されました。

0 のときは日曜日、1 のときは月曜日、となります。

取得した値曜日
0日曜日
1月曜日
2火曜日
3水曜日
4木曜日
5金曜日
6土曜日

これらの値を曜日として表示するためにはまず、曜日の配列を作成します。

const weekItems = ["日", "月", "火", "水", "木", "金", "土"]

作成した配列の中から取得したい値を選択します。

何番目の値を取得するかは、先ほど作成したweek変数を使用します。

const week = date.getDay()
const weekItems = ["日", "月", "火", "水", "木", "金", "土"]
const dayOfWeek = weekItems[week]

console.log(dayOfWeek);で確認すると、

image11

『日』が取得できました。

では、コードを書いていきましょう。

const date = new Date()
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()

const week = date.getDay()
const weekItems = ["日", "月", "火", "水", "木", "金", "土"]
const dayOfWeek = weekItems[week]

document.getElementById(
  "today"
).innerHTML = `${year}年${month}月${day}日(${dayOfWeek})`

ブラウザで確認すると、

image12

今日の日付である、『2021 年 5 月 23 日(日)』が表示できました。

日付を表示したい場合は、ぜひ活用してみてください。

ブログ一覧