JavaScriptで日付や曜日を取得する方法をまとめてみた

「JavaScriptで日付や時間を取得したいけどやり方が分からないなあ。簡単に取得できるやり方をサクッと知りたいな」

記事の信頼性

現在現役のフロントエンドエンジニアとして勤務しております。

今回の記事では以下の4つの方法について、実際のコードと解説を交えてご紹介したいと思います。

この記事でわかること

それでは早速行ってみましょう。

西暦を取得する場合

西暦を取得する場合は、「getFullYear()」というメソッドを使用します。

実際に書いてみましょう。

See the Pen by shino (@rytym0720) on CodePen.

解説

①
const date =new Date();
②
const year= date.getFullYear();
③
document.getElementById('day').innerHTML=`今日は西暦${year}年です`;

ポイント①

まず、new Date()で今の日付を取得します。new Date()では以下のように今の日付や時間などを一括して取得することができます。

See the Pen by shino (@rytym0720) on CodePen.

ただ、このままではテキストなどで使用することが難しいため、他のメソッドなども使用して西暦を導きだします。

ポイント②

const year= date.getFullYear();で「今年の西暦を取得して、yearという変数に代入する」という意味になります。

getFullyear();は指定された日にちの年を取得することができます。ここで言う「指定された日にち」というのはdateという変数なので、①で取得した今日の日付ということになりますね。

ポイント③

HTMLにはdivタグで"day"というidを振り、そこにinnerHTMLで「今日は西暦${year}年です」という形で今年の年をHTMLに表示しているという形です。

日付を取得する場合

See the Pen by shino (@rytym0720) on CodePen.

解説

const date = new Date();
①
const month= date.getMonth()+1;
②
const day = date.getDate();
③
const today =`今日は${month}月${day}日です`;

document.getElementById('day').innerHTML=`${today}`;

ポイント①

月を取得するためにはgetMonth()メソッドを使う必要がありますが、注意点があります。getMonthメソッドは0から始まるため、1つずつ数値がずれるのです。

const month= date.getMonth()+1;

上記のように+1しているのはそのためです。

それぞれ以下の表にように1つずつズレて取得する形となるため、正確な月を取得する場合は＋1を忘れないように注意しましょう。

ポイント②

ポイント②ではgetDate()メソッドを使用して今日の日付を取得しています。

時刻を取得する場合

次に時刻を取得する方法を見てみましょう。

See the Pen by shino (@rytym0720) on CodePen.

解説

const date = new Date();
①
const hour= date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();

const now =`今は${hour}時${minutes}分${seconds}秒です`;

document.getElementById('day').innerHTML=`${now}`;

ポイント①

hour、minutes、secondsという変数に対してgetHours()、getMinutes()、getSeconds()というメソッドを使用して今の時間、分、秒を取得しています。

曜日を取得する場合

See the Pen by shino (@rytym0720) on CodePen.

解説

const date = new Date();
const day= date.getDay();
①
const dayList = ['日','月','火','水','木','金','土'];
const today = dayList[day];

document.getElementById('day').innerHTML=`今日は${today}曜日です`;

ポイント①

曜日を取得する場合は上記のように配列を作り、その中に各曜日を入れると良いですね。

そして

配列名[day]

とする事で、今日の曜日を取得する事ができます。

ここでのdayという変数は

const day= date.getDay();

曜日を使う事もWEB制作時には多々ある事ですので、使い方を覚えておくとスムーズに制作する事が出来ます。

どういう場面で使う？

ここまで日付や時間の扱い方を見てきましたが、ここまで読まれた方は

と思われるかもしれません。

実際にこういった処理をどういった場面で使うかですが、WEBサイトでは時間や日付でコントロール出来る部分が多々あります。

上記のように企業のサイトなどでは時間で区切って表示を変える事が多々あります。

その度に人力で更新するのは大半ですし、ちょっと現実離れしてますよね。朝早くや夜中などの更新などもあり得ます。

if分などを使って「この時間まではAという仕様にするらこの時間からはBという仕様にする」というように仕様を分ける事も多々あります。

そういった場合に日付や時間を取得して扱えるようにしておくと大変便利です。

まとめ

というわけで今回はJavaScriptで日付や西暦、時間や曜日を取得する方法を見てきました。

実際の業務でも時間や日付を取り扱う事は多いため覚えておいて損は無いと思いますのでぜひ押さえておきましょう。

というわけで本日の記事は以上です( ͡° ͜ʖ ͡°)

また次の記事でお会いしましょう。おしまい♪