[JavaScript] 本日、明日、昨日、月末、月初などを取得する

こんにちは、@yoheiMuneです。
JavaScriptで日付を扱う際に、数行コードを書けば、任意の日付を取得できます。今日はその実装方法をブログに書きたいと思います。

目次

解決したいこと

JavaScriptを用いて、今日、明日、昨日、月末、月初、などの任意日付を取得したいけど実装方法が分からない、という悩みを解決したいと思います。LP制作やアプリ制作で日付を扱いたいこともしばしば。そんな時に役立てたらと思います。

本日を取得する

JavaScriptで日付を扱う場合、Dateクラスを利用します。Dateクラスのインスタンスを作成すると、現在日時を取得できます。そこから、本日を取得します。

// Dateクラスのインスタンスを作成.
var now = new Date();

// 本日を取得する.
var todayString = now.getFullYear() + '年' + (now.getMonth() + 1) + '月' + now.getDate() + '日'
// 出力例：2019年7月1日

new Date()にて現在日時を取得し、その後にgetFullYear()、getMonth()、getDate()の関数を用いて、それぞれ年月日を取得しています。1点注意が必要なのは、getMonth()は、1月の場合0、2月の場合1と、普通の月と比べて1少ない数を返却します。そのため+1して月数を計算します。

(参考) DateのgetXXX()関数に慣れよう

Dateクラスには、年月日時分秒を取得する関数が用意されています。

var now = new Date();
console.log(now);  // Mon Jul 01 2019 14:35:44 GMT+0900 (日本標準時)

console.log("年=" + now.getFullYear());     // 年=2019
console.log("月=" + (now.getMonth() + 1));  // 月=7 ※1
console.log("日=" + now.getDate());         // 日=1
console.log("時=" + now.getHours());        // 時=14
console.log("分=" + now.getMinutes());      // 分=36
console.log("秒=" + now.getSeconds());      // 秒=50

※1 getMonth()は、1月の場合0、2月の場合1と、普通の月と比べて1少ない数を返却します。

上記の関数を組み合わせて使うことで、日付文字列を自由に作成できます。

明日を取得する

明日を取得する場合、作成した日付に1日加えることで、明日を取得できます。

// 本日を作成.
var date = new Date();
console.log(date);  // Mon Jul 01 2019 14:42:19 GMT+0900 (日本標準時)

// 1日加えて、明日にする.
date.setDate(date.getDate() + 1);

// 結果確認.
console.log(date);  // Tue Jul 02 2019 14:42:19 GMT+0900 (日本標準時)

なお、setDate()で1日加える場合に、その日が月末の場合、翌月の月初になります。

// 本日を作成.
var date = new Date();
console.log(date);  // Wed Jul 31 2019 14:42:19 GMT+0900 (日本標準時)

// 1日加えて、明日にする.
date.setDate(date.getDate() + 1);

// 結果確認.
console.log(date);  // Thu Aug 01 2019 14:42:19 GMT+0900 (日本標準時)

昨日を取得する

昨日を取得する場合、作成した日付に-1日します。

// 本日を作成.
var date = new Date();
console.log(date);  // Mon Jul 01 2019 14:42:19 GMT+0900 (日本標準時)

// 1日減らして、明日にする.
date.setDate(date.getDate() - 1);

// 結果確認.
console.log(date);  // Sun Jun 30 2019 14:42:19 GMT+0900 (日本標準時)

なお、上記のように基準日が月初の場合、-1日すると前月の月末を取得できます。

月末を取得する

当月の月末を取得する場合、1ヶ月加えて翌月にし、その後にdateに0を設定することで、当月末を取得できます。

// 本日を作成.
var date = new Date();
console.log(date);  // Tue Jul 02 2019 14:42:19 GMT+0900 (日本標準時)

// 1ヶ月加えて翌月にします.
date.setMonth(date.getMonth() + 1);
console.log(date);  // Thu Aug 02 2019 14:42:19 GMT+0900 (日本標準時)

// 日付に0を設定し、該当月のの0日（つまり、前月末）にします.
date.setDate(0);

// 結果確認.
console.log(date);  // Wed Jul 30 2019 14:42:19 GMT+0900 (日本標準時)

月初を取得する

当月の月初を取得するには、dateに1を設定します。

// 本日を作成.
var date = new Date();
console.log(date);  // Tue Jul 02 2019 14:42:19 GMT+0900 (日本標準時)

// 日付に1を設定します.
date.setDate(1);

// 結果確認.
console.log(date);  // Mon Jul 01 2019 14:42:19 GMT+0900 (日本標準時)

(応用) 任意の日付を取得する

今まで紹介した実装を組み合わせることで、任意の日付を取得することができます。

// 一昨日
var date = new Date();
date.setDate(date.getDate() - 2);  // 2日前に変更する.

// 明後日
var date = new Date();
date.setDate(date.getDate() + 2);  // 2日後に変更する.

// 1週間後
var date = new Date();
date.setDate(date.getDate() + 7);  // 7日後に変更する.

// 2月末日
var date = new Date();
date.setMonth(2);  // 3月の (※ Monthは0始まりのため、3月の場合は2)
date.setDate(0);   // 0日目（つまり、2月末）とする.

ぜひ色々と試して、任意の日付を取得してみてください。

(プラスワン) さらに日付を扱うためのライブラリ

今までの実装で任意の日付を取得できますが、もっとコードを短く日付の処理を書くには、moment.jsがオススメです。具体的な使い方は「[Javascript] Moment.jsを使って日付を扱おう」をご覧ください。例えば今回のコードを、moment.jsでは以下のように書けます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script>
    // 本日.
    var today = moment();

    // 明日.
    var tomorrow = moment().add(1, 'days')

    // 昨日.
    var yesterday = moment().add(-1, 'days')

    // 月初.
    var startOfMonth = moment().startOf('month');

    // 月末.
    var endOfMonth = moment().endOf('month');
</script>

かなりシンプルになって素敵ですね。僕は、LPやアプリで日付を扱うことがある場合によく利用しています。

合わせて読みたい

JavaScriptやフロントエンドのスキルアップを目指すなら、ご一読いただくと参考になると思います。もし良ければご覧ください。

[フロントエンド] multipart/form-dataを理解してみよう - YoheiM .NET

[フロントエンド] fetchを用いたAjax通信を行う - YoheiM .NET

[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう - YoheiM .NET

[Javascript] input要素(file)で、ディレクトリを丸ごと選択する - YoheiM .NET

最後に

LP制作で日付のプルダウンがあって日付を扱うことがあったり、カレンダーUIがあって日付を扱うことがあったり。日付の処理を書く機会は多いと思います。僕は最初苦手でしたが、上記の内容を一通り書いてみてからは、自信を持ってコードを書けるようになりました。読んでいただいた方が、日付の処理に悩まずに、最速でコードを書けることを祈ってます。

最後になりますが本ブログでは、Python、フロントエンド、インフラ、サーバー、PHP、Swift、Node.js、Java、Linux、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に！」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSやTwitterをフォローして貰えたら嬉しいです ^ ^

最後までご覧頂きましてありがとうございました！