サイト上に今日の日付や、現在時刻を表示したいという場面がありますよね。
今回の記事では、JavaScriptのDateオブジェクトを使って、今日の日付と時間を取得する方法を紹介します。
今回の知識を応用することで簡単な時計やカレンダーを実装できるので、ぜひ覚えていってください。
今日の日付と時間を取得する実装コード
まずは全体のコードを一気に紹介したあと、ひとつひとつの詳しい情報を解説していきます。
以下のコードでは、
- 今日の日付と時間を取得する
- 取得した日付と時間を
pタグにアウトプットする
という処理を行っています。
// 今日の日付データをcurrentDateに格納
const currentDate = new Date();
// 年・月・日・曜日を取得
const year = currentDate.getFullYear();
const month = currentDate.getMonth() + 1;
const date = currentDate.getDate();
const day = currentDate.getDay();
const weekday = ["日","月","火","水","木","金","土"];
// 時間を取得
const hour = formatTime(currentDate.getHours());
const minute = formatTime(currentDate.getMinutes());
const second = formatTime(currentDate.getSeconds());
// 0~9の数値に0を足して2桁にする関数(例: 0:0:0 -> 00:00:00)
function formatTime(val) {
return ("0" + val).slice(-2);
}
// 取得した日付・時間をアウトプット
const outputDateTimeEl = document.querySelector('.output-date-time');
outputDateTimeEl.innerText = `${year}年${month}月${date}日${weekday[day]}曜日 ${hour}:${minute}:${second}`;<!-- 取得した日付をアウトプットするためのpタグを用意 -->
<p class="output-date-time"></p>これらのコードの実行結果は、以下のようになります。
リロードするたびに現在の日付と時刻が更新されます。
現在の日付と時刻が表示されたかと思います。
それでは、以下でそれぞれ個別に解説していきます。
JavaScriptで今日の日付を取得する方法
まずは、今日の日付を取得する方法を見ていきましょう。
getFullYear()で年を取得getMonth()で月を取得getDate()で日付を取得getDay()で曜日を取得
これらを取得するには、今日の日付・時刻のデータが格納されたDateオブジェクトを使用します。
const currentDate = new Date();
console.log(currentDate); // Tue Dec 29 2020 16:26:44 GMT+0900 (日本標準時)このように、Dateオブジェクトには日付・時刻のデータが入っており、またgetFullYearやgetMonthなどの便利なメソッドが定義されています。
getFullYearメソッドで年を取得
// 今日の日付・時刻のオブジェクトを作成
const currentDate = new Date();
// 年を取得
const year = currentDate.getFullYear();getFullYearメソッドは、4桁の西暦年を返します。
getMonthメソッドで月を取得
// 今日の日付・時刻のオブジェクトを作成
const currentDate = new Date();
// 月を取得
const month = currentDate.getMonth() + 1;getMonthメソッドは、0~11の間の数値を返します。
1ではなく0から始まることに注意してください。
1月なら0、12月なら11という数値が返ってきます。
そのため、月を数字で表す場合は1を足してあげる必要がありますね。
getDateメソッドで日を取得
// 今日の日付・時刻のオブジェクトを作成
const currentDate = new Date();
// 日を取得
const date = currentDate.getDate();getDateメソッドは、1~31の日付の数値を返します。
今回は1から始まるので、1を足す必要はありませんね。
getDayメソッドで曜日を取得
// 今日の日付・時刻のオブジェクトを作成
const currentDate = new Date();
// 曜日を取得
const dayNum = currentDate.getDay();
const weekday = ["日","月","火","水","木","金","土"];
const day = weekday[dayNum];getDayメソッドは、0~6の数値を返します。それぞれの数値は、以下の曜日を表します。
| 数値 | 曜日 |
|---|---|
| 0 | 日曜 |
| 1 | 月曜 |
| 2 | 火曜 |
| 3 | 水曜 |
| 4 | 木曜 |
| 5 | 金曜 |
| 6 | 土曜 |
数値が返ってくるため、テキストで曜日を表すとなると、以下のような手順が必要になります。
getDayメソッドで曜日を表す数値を取得する- 曜日のテキストを格納した配列を作る
- ①で取得した数値をもとに、配列内から曜日のテキストを取得
1. getDayメソッドで曜日を表す数値を取得
const dayNum = currentDate.getDay();まずはdayNumという変数に、曜日を表す数値(0~6)を格納します。
2. 曜日のテキストを格納した配列を作成
const weekday = ["日","月","火","水","木","金","土"];weekdayという配列を作成し、日曜から土曜までのテキストを格納していきます。
テキストを変更したい場合は自由に変えてください。ただし順番は「日」から始まり「土」で終わる必要があります。
3. 取得した数値をもとに配列から曜日のテキストを取得
const day = weekday[dayNum];weekdayという配列の中から、dayNum番目のテキストを取得しています。
ここでのポイントは、配列の1番目の要素は0、2番目の要素は1…というふうに0から数えるという点ですね。
getDayも0~6の数値を返すので、それぞれの番号に対応する曜日テキストが取得できるというわけです。
const dayNum = currentDate.getDay(); // 例として"0"が入っているとする
const weekday = ["日","月","火","水","木","金","土"];
const day = weekday[dayNum]; // weekdayの"0"番目は"日"
console.log(day); // 結果 -> 日dayNumに0が入っている場合を例にすると、weekday[0]となり、配列weekdayの0番目の値である"日"が取得できます。
【まとめ】今日の日付を取得して表示する
年、月、日、曜日を取得して、今日の日付を出力してみましょう。
<!-- 取得した日付をアウトプットするためのpタグを用意 -->
<p class="output-date"></p>const currentDate = new Date();
const year = currentDate.getFullYear();
const month = currentDate.getMonth() + 1;
const date = currentDate.getDate();
const dayNum = currentDate.getDay();
const weekday = ["日","月","火","水","木","金","土"];
const day = weekday[dayNum];
const outputDateEl = document.querySelector('.output-date');
outputDateEl.innerText = `${year}年${month}月${date}日${day}曜日`;【実行結果】
本日の日付を表示することができましたね。
続いて現在時刻を表示する方法を見ていきましょう。
JavaScriptで現在の時刻を取得する方法
現在時刻を取得するには、同じようにDateオブジェクトを使用します。
getHours()で時間を取得getMinutes()で分を取得getSeconds()で秒を取得
これら3つの使い方を説明していきます。
ミリ秒を取得するgetMillisecondsというメソッドもありますが、今回は省略します。
getHoursメソッドで時間を取得
const currentDate = new Date();
// 時間を取得
const hour = currentDate.getHours();getHoursメソッドは、0~23の数値を返します。
getMinutesメソッドで分を取得
const currentDate = new Date();
// 分を取得
const minute = currentDate.getMinutes();getMinutesメソッドは、0~59の数値を返します。
getSecondsメソッドで秒を取得
const currentDate = new Date();
// 秒を取得
const second = currentDate.getSeconds();getSecondsメソッドは、0~59の数値を返します。
時間の数値が1桁のときは0を足して2桁にする関数を定義する
時間を表示する際は、見た目を整えるために常に2桁にしたいですよね。
8:40:5 →1桁と2桁が混ざっている
08:40:05 →常に2桁
時・分・秒の数値が10未満の場合は、先頭に0を足す関数を定義していきましょう。
function formatTime(val) {
return ("0" + val).slice(-2);
}まず引数には数値を取り、その数値の先頭に"0"を足します。
そしてslice(-2)とすることで、最後から2つの要素を取り出すことができます。
例えば1という数値を引数に渡すと、01となりますね。slice(-2)で最後から2つを取り出すのですが、01はすでに2桁なので01という数値がそのまま返ってきます。
次に2桁の数値12を渡した場合を見てみましょう。
0を足すことで012となり、3桁になりましたね。ここから最後の2つの要素を取り出すので、結果として12という数値を取得できます。
これで1桁の数値には0を足して2桁に、2桁の数値はそのままの数値を返す関数を定義することができました。
【まとめ】現在時刻を表示する
<!-- 取得した現在時刻をアウトプットするためのpタグを用意 -->
<p class="output-time"></p>const currentDate = new Date();
// 時間・分・秒を取得
const hour = formatTime(currentDate.getHours());
const minute = formatTime(currentDate.getMinutes());
const second = formatTime(currentDate.getSeconds());
// 2桁にする関数
function formatTime(val) {
let str = val.toString();
if(str.length === 1) {
str = '0' + str;
}
return str;
}
const outputTimeEl = document.querySelector('.output-time');
outputTimeEl.innerText = `${hour}:${minute}:${second}`;【実行結果】
これでページがロードされた時点での時刻を表示することができました。
setTimeoutで毎秒更新するとデジタル時計を作ることもできますので、興味がある方は以下の記事を読んでみてください。
【まとめ】Dateオブジェクトを使って今日の日付と時間を取得する方法
Dateオブジェクトを使って、以下の情報を取得する方法を説明しました。
getFullYear()…年を取得getMonth()…月を取得getDate()…日付を取得getDay()…曜日を取得getHours()…時間を取得getMinutes()…分を取得getSeconds()…秒を取得
サイト上に日付や時間を表示したい場合は、ぜひ使ってみてください。
コメント