【JavaScript/jQuery】日付に関する処理まとめ – 2024年最新

「現在の日付をJavaScriptで取得したい」
「任意の日付を取得してjQueryでHTML表示したい」
という場合はどのようなコードを書いたらよいか、正しい方法をご紹介します。

現在の日付をJavaScriptで取得したい

let date = new Date();

// 年
let year = date.getFullYear();

// 月
// 1月を基準に、0始まりの数値(0〜11)が返ってきますので1を足しています
let month = date.getMonth() + 1;

// 日
let day = date.getDate();

// 曜日
// 日曜を基準に、0始まりの数値(0〜6)が返ってきますので配列で変換しています
let week_japanese = ["日", "月", "火", "水", "木", "金", "土"];
let week = week_japanese[date.getDay()];

// 時
let hour = date.getHours();

// 分
let minute = date.getMinutes();

// 秒
let second = date.getSeconds();

// 文字列結合して表示(テンプレートリテラル)
console.log(`${year}年${month}月${day}日(${week}) ${hour}時${minute}分${second}秒`);
// 表示：2019年3月15日(金) 13時56分21秒

 

任意の日付を取得してjQueryでHTML表示したい(※コメントは省略)

HTML

<p id="demo"></p>

jQuery

$(function(){
    let date = new Date('2020-01-01 12:00:00'); // 任意の日付を入力
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();
    let week_japanese = ["日", "月", "火", "水", "木", "金", "土"];
    let week = week_japanese[date.getDay()];
    let hour = date.getHours();
    let minute = date.getMinutes();
    let second = date.getSeconds();

    $("#demo").text(`${year}年${month}月${day}日(${week}) ${hour}時${minute}分${second}秒`);
    // 表示：2020年1月1日(水) 12時0分0秒
});

（実際に使用する際は、読み込んでいる.jsファイルもしくは<script>タグの中に記述する必要があります）

基本的には上記のコードをそのままコピペしてもらえればいいんですが、
「仕組みをしっかり理解したい」「任意の日付を表示するにはどうしたらいい？」「日付の比較や、日付を進めたり戻したりもしたい」という方はぜひこのまま続きをお読みください〜

日付を取得・表示する仕組みについて

日付を取得

JavaScriptのDateクラスを利用しています。

new Date(); // 現在の日付

new Date('March 15, 2019 13:30:50');
new Date('2019-03-15T13:30:50');
new Date(2019, 2, 15, 13, 30, 50); // monthは-1した数を指定する

引数に何も入れなかった場合は現在の日付Dateインスタンスが返り、引数指定（何種類か指定方法がある）した場合は任意の日付Dateインスタンスが返ります。

ただし、いずれの方法でも、返ってくるのはDateインスタンスとなる点に注意です。

戻り値をそのまま表示すると、
Fri Mar 15 2019 14:39:44 GMT+0900 (日本標準時)

こんな感じ。

日付がわからなくはないですが、このままの形で使うことはまずありませんので、整形をしていきます。

※ちなみにnewしない場合はDateインスタンスではなく、現在日付が文字列で返ります
Fri Mar 15 2019 14:39:44 GMT+0900 (日本標準時)

日付を整形

Dateインスタンス内には、年や月などの値を取得できるメソッドがそれぞれ用意されていますので、それを利用して1つずつ呼び出していきます。

ここはサンプルコードの通りですね。難しいことはやっていません。

ただし注意点がいくつかあります。

注意点①

年を取得するメソッドとしてgetYear()とgetFullYear()の2種類があるのですが、
getYear()は「1900年を基準に何年進んでいるか」の数値が返ってきますので気をつけましょう。

getYear(); // 119 (2019 - 1900)

注意点②

月は0から始まります。1月は0、12月は11になります。
new Date()の第2引数でも、Date.getMonth()でも、月は0-11で表します。
※ 曜日も0から始まります

注意点③

日にちはgetDate()、曜日がgetDay()です。
日にちを取得しようとしてgetDay()を使わないよう気をつけましょう。

もっと短く書けないか？

冒頭のサンプルコードを見ていただけていればわかるとおり、日付を表示するだけなのに何行もコードが必要になってしまっているんですよね。
他のプログラミング言語を経験されている方からすると「めんどくさ！」となるみたいです。

例えばPHPの場合、曜日を日本語表記している部分を除けば

echo date('Y年m月d日 H:i:s');

この1行で日付表示ができてしまいます。

JavaScript, jQueryにはこういった、日付を任意の形式に整形する機能が用意されていませんので、前述したように、自前で整形していく必要があります。

「Moment.js」プラグインを使うと色々楽になる

なるべく楽したい人向けに、とても便利なプラグイン「Moment.js」があります。

日付整形であれば、

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
<script>
    moment().format("YYYY年MM月DD日"); // 2019年03月15日
</script>

このように1行でOK。

後述する日付比較や、日付の加算減算なども容易になりますので、
プラグインの使用がOKな環境であれば積極的に使っていきたいですね。

かなり有名で人気もあるプラグインですので、信頼性は担保されていると思います。

日付を比較する

たまにありますね。任意の日付が、現在日付と比べて昔か未来か、という判定を行いたいケース。
ネットには色々なやり方が記載されていましたが、下記のようにgetTime()メソッドを使用するのが無難です。

このメソッドにより、
「1970年1月1日 00:00:00 UTCから指定した日時までの経過時間をミリ秒で表した数値」
が得られますので、ざっくり言えばすべての日付をミリ秒単位に揃えることができるようになります。

let date = new Date(2020, 2, 15);
let date2 = new Date(2020, 3, 15);
if (date.getTime() < date2.getTime()) {
	console.log('date2の方が未来');
}

ミリ秒同士で比較して、数値が大きい方が未来の日付、となるわけです。
（数値が小さい方が過去の日付）

日付の加算減算について

たまにあります…かね？今日からみて3ヶ月前の日付を表示したいケース。

これ、何も考えずにやっちゃうと引っかかるんですが、
月から3引いたらええやん！って言って、じゃあ1月はどうすんのっていう。

switch文とか使いつつガンバれないこともないですが、
Dateインスタンスに用意されているset〇〇()メソッドを使うのが手っ取り早いですし確実です。

let date = new Date();

// 3ヶ月前
date.setMonth(date.getMonth() - 3);

set〇〇()メソッドは、規定範囲を超えた分は繰り越して処理してくれますので、
setMonth()に-3が入った場合は、1月から-3なので9すなわち、ちゃんと10月が返ってきます。

また、この仕様のおかげで、月によって日数が違ったりするケースなども考慮しなくていいので楽ちんです。

 

 

以上です。