「JavaScript dateはどのように使うの？」
「JavaScript dateのメソッドは何があるの？」
「JavaScript dateを使っても時間がうまく表示されない…」
この記事に訪れたあなたはこのような悩みを持っていませんか？
JavaScriptを勉強していると現在時刻を表示したいと思うときがあるでしょう。しかし現在時刻を表示させる方法がわからなくて困ってしまいますよね。
また時間を表示させたのに、全く違う結果が得られてしまって躓いている人もいるでしょう。
この記事では上記の悩みを持つ人に向けて、JavaScript dateの使い方や使用例、注意点などをすべて紹介していきます。
サンプルコードを載せているので、この記事を読めば初心者でもdateの使い方がわかるようになりますよ。
目次
JavaScript dateとは？
dateは現在の時間を取得するなどの時間処理をしてくれる便利な関数です。
あなたがJavaScriptを勉強していて、「現在時刻を表示してみたいな」と思ったことはありませんか？
時間を表示するだけなら何とかなりそうですが、現在時刻を表示したいとなるとどうすればいいのかわからなくなりますよね。
こういったときにdateは非常に重要な役割を果たしてくれますよ。
次にdateをどう使うのか見ていきましょう。
var date = new Date();
console.log(date);// 実行結果
2021-08-13T10:14:59.510Z変数dateを作り新しくDate()をしていますね。これはDateオブジェクトというもので、日付や時間を処理するために使います。新しく作成する際にはnewを忘れないように付けましょう。
実行結果を見ると、「2021-08-13T10:14:59.510Z」と表示されていますね。もう少しわかりやすく書くと「2021年08月13日10時14分59秒510ミリ秒」になります。
dateは年代からミリ秒まで細かく取得できるのがわかりましたね。ですが「そんなに細かく表示されなくても…」と思いませんか？
実際は〇月〇日だけ使うことが多く、年からミリ秒まですべて使うことは多くありません。
そこで専用のメソッドを使って一部の時間だけを取得します。
date.getFullYear() // 年を取得
date.getMonth() // 月を取得
date.getDate() // 日を取得
date.getHours() // 時を取得
date.getMinutes() // 分を取得
date.getSeconds() // 秒を取得
date.getMilliseconds() // ミリ秒を取得上記のメソッドでそれぞれの時間帯を取得できました。つまりdate.getFullYera()で「2021」だけを取り出せるわけなんですね。
JavaScript dateの特徴
dateは日付や日時を表示できるだけではありません。
あなたがdateを使っているとき、ほとんどが日付や日時を表示させるだけの目的で利用していませんか？
実はdateには日付や日時を表示させる以外にもさまざまな便利な機能を使うことができるんですよ。dateが持つ特徴は以下のとおりです。
- 世界標準の時間を表示できる
- 日時を指定して時間を表示できる
- 各国の標準時間を表示できる
- 文字列に変換して取得できる
- 経過ミリ秒で取得できる
それぞれの項目についてサンプルコードを載せながら解説していきますね。
世界標準の時間を表示できる
まずは世界標準の時間で表示できるのがdateの特徴です。
var date = new Date();
var time = date.getUTCDate();
console.log(time);// 実行結果
14上記のコードを見ると2行目に「date.getUTCDate()」という少し変わったメソッドがありますね。
このようにdateの使い方で説明した、特定の時間帯を取得するgetメソッドにUTCを付けると、世界標準の時間を取得してくれます。
しかしあまり使わないので「こういうメソッドもあるんだ…」という感覚で頭に入れておいて問題ないでしょう。
日時を指定して時間を表示できる
これまでは現在時刻を表示していましたが、日時を指定して表示することもできるんですね。
時間処理をするときに「指定した時間を使った処理をしたい！」と考えたときは以下のようなメソッドを使います。
var date1 = new Date(2019, 0, 1, 11, 30, 25, 125);
var date2 = new Date(2020, 0, 30, 15, 30);
console.log(date1);
console.log(date2);// 実行結果
2019-01-01T11:30:25.125Z
2020-01-30T15:30:00.000ZDateオブジェクトを新しく作成するときに、第一引数から第七引数までに数字を設定することで実行結果のように指定した時間を入れられるんですね。
またdate2のように省略した形で書くと、指定した時間帯は任意の数字に、それ以外は0で出力されますよ。
第一引数から第七引数には以下の内容が入ります。
- 第一引数：西暦が入る。
- 第二引数：月が入る。0~11の間で指定する。
- 第三引数：日が入る。1~31の間で指定する。
- 第四引数：時が入る。0~23の間で指定する。
- 第五引数：分が入る。0~59の間で指定する。
- 第六引数：秒が入る。0~59の間で指定する。
- 第七引数：ミリ秒が入る。0~999の間で指定する。
しかし上記の記述では「西暦は指定したくないけど、月日は指定したい」と考えた場合には使えません。そこで個別に設定できるメソッドを使います。
date.setFullYear(2015) // 2015年を設定
date.setMonth(0) // 1月を設定
date.setDate(1) // 1日を設定
date.setHours(1) // 1時を設定
date.setMinutes(1) // 1分を設定
date.setSeconds(1) // 1秒を設定
date.setUTCMilliseconds(1) // 1ミリ秒を標準時間で設定getFullYear()やgetUTCMonth()のように、指定する時間を設定するメソッドにも西暦からミリ秒まで、世界標準へでも細かく指定できるんですね。
各国の標準時間を表示できる
時間処理を扱っていると、「違うフォーマットで時間を表示させたいな」と悩むことはありませんか？
そんな時にはtoLocaleString()がおすすめですよ。
var date = new Date();
var time = date.toLocaleString("ja");
console.log(date);
console.log(time);// 実行結果
2021-08-13T12:16:23.264Z
2021/8/13 12:16:23上記のコードでは日本に応じたフォーマットで時間を表示しています。確かに実行結果では下の時間表示の方がよく見る形になっているのがわかりますね。
2行目のコードに注目してください。
var time = date.toLocaleString("ja");2行目が日本時間の形で表示している部分ですね。括弧の中の”ja”は日本であることを示しており、他の国で表示できます。
var time = date.toLocaleString("zh-ch"); //中国「2021/8/14 下午12:33:31」
var time = date.toLocaleString("en"); //アメリカ「8/14/2021, 12:37:20 PM」
var time = date.toLocaleString("fr"); // フランス「14/08/2021 à 12:38:29」
var time = date.toLocaleString("br"); // ブラジル「14/08/2021, 12:39:44」どれも少しずつ形が違っているので、「こんな使い方もできるんだ…」程度に考えて自分がいいなと思ったものを使えばいいでしょう。
文字列に変換して取得できる
現在時刻を出力したいなど、時間を表す文字列を使いたい場面は多くありますよね。dateには文字列に変換して時間を表示できるメソッドがあるんです。
これまでの時間表示と違い文字列になるので、文字列を使った操作ができるようになるわけですね。
var date = new Date();
console.log(date.toString());// 実行結果
Sat Aug 14 2021 13:24:56 GMT+0000 (Coordinated Universal Time)また西暦月日など表示する時間帯を絞って出力することもできますよ。「特にこだわりがないから、とりあえず月日だけを取得したい！」という人には便利な機能ですね。
var date = new Date();
console.log(date.toDateString()); // Sat Aug 14 2021
console.log(date.toTimeString()); // 12:53:18 GMT+0000 (Coordinated Universal Time)
console.log(date.toLocaleDateString()); // 8/14/2021
console.log(date.toLocaleTimeString()); // 12:53:18 PM2行目のtoDateString()は「曜日、月、日にち、年」、3行目のtoTimeString()は「時、分、秒」、4行目のtoLocaleDateString()は「月、日にち、年」、5行目のtoLocaleTimeStirng()は「時、分、秒、午前午後」を表しています。
文字列取得にも様々な種類があるので、自分が良いなと思ったメソッドを使うのが良いですね。
経過ミリ秒で取得できる
dateには経過ミリ秒という数字の羅列を取得できます。経過ミリ秒とは1970年の始まりから経過した時間をミリ秒単位で表したものです。
例えばdate.getTime()で現在の日時を経過ミリ秒で取得してくれます。
var date = new Date();
console.log(date.getTime());// 実行結果
1628988213288実行するとなんだかよくわからない数列が出てきましたね。ではこの数列を年に直してみましょう。
var date = new Date();
console.log(date.getTime()/(1000360024*365));// 実行結果
51.65489512151192上記のコードでやっていることは、「1秒（1000）÷1時間（3600）÷1日（24）÷1年（365）」をして数列を年単位にしています。
実行結果は約51年ということになり、1970年の始まりから51年がたっていることがわかりましたね。
このように経過ミリ秒は年などの単位に置き換えられます。しかし「そもそも経過ミリ秒はどこで使うの？」と疑問に思う人もいるでしょう。
一見、使いづらいイメージがありますが、実はかなり使う頻度の多いメソッドなんですよね。どのように使うのかは後述する「JavaScript dateの使い方」で解説していきます。
JavaScript dateの使い方
これでdateを使って時間を取得したり設定したりする操作はできるようになりました。
ですが「時間を使った処理ってどんなときに使うの？」と思っていませんか？ここでは、dateを使った例をいくつか挙げていきます。
サンプルコードも載せますので、どんな処理がされているか見ていってください。
使用例1 時間帯によって返ってくるメッセージを変える
時間を使った処理といえばホームページなどにアクセスしたときに時間が表示させるのがすぐに思いつくでしょう。
また時間によって表示される文が変わっているサイトを見たことってありませんか？
ここでは現在の時刻を出力し、朝なら「おはよう」、昼なら「こんにちは」というように、時間によって出力される文も変えていきます。
考え方としては、時間を取り出して朝なのか、昼なのかを判断するだけです。その考えをもとに作成したコードは以下の通りです。
var date = new Date();
console.log(("0"+date.getHours()).slice(-2) + ":" + ("0"+date.getMinutes()).slice(-2));
if(6 <= date.getHours() && date.getHours() < 11){ console.log("おはよう"); }
else if(11 <= date.getHours() && date.getHours() < 18){ console.log("こんにちは"); }
else{ console.log("こんばんは"); }// 実行結果
07:06
おはよう実行すると、現在時刻とそれに合った文が出力されました。どのような処理がされているのか細かく見ていきましょう。
console.log(("0"+date.getHours()).slice(-2) + ":" + ("0"+date.getMinutes()).slice(-2));2行目の部分でgetHours()やgetMinutesを使って、現在時刻を表示しています。
このままだと7:6のように表示される数字が1ケタの場合に見栄えが悪くなってしまうので、0をつけ足しているわけなんですね。
最後にslice(-2)で後ろ2ケタだけを切り取っているので、どのような値をとってもきれいな形で表示ができました。
また表示される文については、
if(6 <= date.getHours() && date.getHours() < 11){ console.log("おはよう"); }
else if(11 <= date.getHours() && date.getHours() < 18){ console.log("こんにちは"); }
else{ console.log("こんばんは"); }3~5行目の部分で決めています。
例えば現在時刻が6時から10時までだったら「おはよう」が、11時から17時までだったら「こんにちは」が出力されるわけなんですね。
使用例2 指定したフォーマットで時間を出力する
「JavaScript dateの特徴」で時間表示は様々なフォーマットで表せることを解説しました。では用意されていないフォーマットで表示したい場合はどうすればいいのでしょう？
例えば以下の形で表示したいとします。
「2021-8-15 16時13分43秒」
このような形で表せるメソッドが無いので、困ってしまいますよね。実は、解決方法は簡単で似ている形の時間表示をアレンジすればできることが多いですよ。
サンプルコードを見てみましょう。
var date = new Date();
console.log( date.toLocaleString("ja").replace(/[/]/g,'-').replace(':','時').replace(':','分')+'秒' );// 実行結果
2021-8-15 16時13分43秒実行結果ではしっかりと表示させたい形になっていますね。このような形を作っている部分を見ていきましょう。
console.log( date.toLocaleString("ja").replace(/[/]/g,'-').replace(':','時').replace(':','分')+'秒' );まずはtoLocaleString(“ja”)で似たような形にします。
2021/8/15 16:13:43
次にreplaceで任意の文字に置き換えていますね。replace(/[/]/,’-‘)だと最初の/しか変わらないのでgを付けてすべての/を置き換えています。
後ろの:はそれぞれ違う文字に置き換えるだけなのでgは付けずに、時、分と置き換えているわけなんですね。
最後に秒を足して表示させれば完成です。
使用例3 20分ごとに表示が切り替わるようにする
「一定時間ごとに表示する文字を切り替えたい！」と思うことはありませんか？使用例3では20分おきに表示する文字を変えてみましょう。
使用例1では時間帯によって出力文字を変えていましたので、同様にして20分おきに表示する文字を変えれそうですね。
表示する文字は5種類にして、ローテーションする形で表示します。条件分岐を5つ用意するのも大変なので配列を使って表示させましょう。
作成したサンプルコードがこちらです。
var date = new Date();
var fruit = ['apple','banana','orange','melon','grape'];
time = Math.floor((date.getTime()+936001000)/(60*1000));
var flag = Math.floor(time/20) % 5;
console.log(fruit[flag]);// 実行結果
Orange実行すると20分おきにapple、banana、orange…と表示されます。少し複雑なので細かく説明しますね。
まず1行目でDateオブジェクト、2行目で表示する文字をまとめた配列を作っています。3行目では何が行われているのでしょうか？
time = Math.floor((date.getTime()+936001000)/(60*1000));「数字だらけでよくわからない…」と思ってしまいますが、仕組みはとても簡単です。
まずはgetTime()で経過ミリ秒を取得していますね。取得した経過ミリ秒に936001000)/(60*1000))を足しているのがわかるでしょう。
そして936001000は9時間、60*1000は1分を表しています。
つまり3行目のコードを要約すると、取得した経過ミリ秒に9時間を足して1分単位に直しているわけなんですね。
またこのままだと小数点になってしまうので、Math.floor()を使って整数に直しました。次に4行目のコードを見ていきましょう。
var flag = Math.floor(time/20) % 5;上記の部分では分単位に直した数値を20分で割って20分が来た回数を表しています。
この回数を5で割った余りを求めることで、0~4の値が取れるんです。つまり20分が経つたびにflagが0、1、2…と取得する値が変わるんですね。
console.log(fruit[flag]);最後にflagと同じ場所にあるflag配列の値を出力して完成です。
JavaScript dateを使うときの3つの注意点
dateを使っていると、「あれ、思い通りの時間が出てこないぞ…」と困ってしまうことが多くありませんか？
実はdateには時間を表示する際、気を付けなければならない注意点が3つあります。
- 指定する月の範囲は0~11
- 指定した年が2ケタなら1900~1999年になる
- 日本時間は標準時間から+9時間違う
それぞれどのように気を付けるか解説していきますね。
注意点1 指定する月の範囲は0~11
次のコードでは、実行結果はどうなるんでしょうか？
var date = new Date(2019, 10, 31, 1, 10, 3, 333);
console.log(date);答えは「2019-12-01T01:10:03.333Z」になります。
「え？2019-10-31T01:10:03.333Zじゃないの？」と思ったあなた。実は月だと1からではなく、0から始まるんですね。
つまり第二引数の10は10月ではなく、11月になります。また11月は30日までしかないので、第三引数の31日は11月31日ではなく12月1日になりますよ。
ここまでの話を聞いて、「あれ？11月31日になってしまうからエラーにならないの？」と疑問に思った人もいるでしょう。
実はどんな値を入れてもちゃんと時間は表示してくれるんですね。
var date = new Date(2019, 10, 310, 1, 10, 3, 333);
console.log(date);// 実行結果
2020-09-05T01:10:03.333Z上記のコードでは11月310日というあり得ない時間を指定していますが、実行するとしっかりと通っています。
11月310日のように本来の領域よりも数値が大きいと、12月280日のように一個上が繰り上がるんですね。
月の指定は0から始まるのと、どんな値を設定しても繰り上がりでちゃんと実行できることは、頭に入れておくと混乱を防げるでしょう。
注意点2 指定した年が2ケタなら1900~1999年になる
あまり使うことはないと思いますが、2ケタの西暦を表示させたいと思ったことはありませんか？
var date = new Date(15, 0, 1, 1, 10, 3, 333);
console.log(date);// 実行結果
1915-01-01T01:10:03.333Z上記のコードを実行すると全く違った表示になってしまいました。
よく見ると、指定した2ケタの数字の前に「19」がつけ足されていますね。
実は時間を指定するとき、第一引数を2ケタの数字にすると1900~1999の間で指定されるようになっているんです。
1900年代の西暦を表示させたいときにはとても便利ですが、2ケタの西暦を表示させたいときは困ってしまいます。
2ケタの西暦を表示させたい場合にはsetFullYear()を使ってください。
var date = new Date(15, 0, 1, 1, 10, 3, 333);
date.setFullYear(15);
console.log(date);// 実行結果
0015-01-01T01:10:03.333Z今度はしっかりと表示できましたね。
もし2ケタの西暦を表示させたいと考えた時は、setFullYear()を使うことを覚えておきましょう。
注意点3 日本時間は標準時間から+9時間違う
これまでのサンプルコードを実行してきたあなたなら「あれ？」と気づいたかもしれませんが、今の時刻と出力された時間が違っていませんか？
var date = new Date();
console.log(date);// 実行結果
2021-08-15T13:38:18.659Z
（実際は2021-08-15T22:38:18.659Zである…）これは世界標準の時間で出力されているために今の時刻とずれるわけなんですね。
ちなみに基準となっている場所はイギリスにあり、日本とは経度が135度離れています。
時差は15度で1時間ずれるので、結果として9時間早めれば日本時間になりますよ。
var date = new Date();
date.setHours(date.getHours()+9);
console.log(date);
var time = date.getTime() + 9 * 3600 * 1000;
console.log(time);// 実行結果
2021-08-15T22:50:57.622Z
16291002576222行目setHours()で9時間早めて設定していますね。また4行目は経過ミリ秒に9時間（9 * 3600 * 1000）を足しています。
使用例3でも936001000が使われていましたね。この936001000は日本時間に直している操作ですので、覚えておくといいでしょう。
JavaScript dateを学習する方法
ここまでJavaScript dateの使い方や使用例を見てきましたが、「覚える量が多くて無理！」と感じる人もいたのではないでしょうか？
この記事を読んだだけだとすべてのメソッドを定着させるのは難しいので繰り返し学習するのがおすすめです。
またほとんど使わないメソッドもあります。良く使うものだけ覚えておいて、忘れてしまったらその都度調べれば問題ありません。
参考書を購入して学習する方法も有効です。参考書ならばdateの使い方がもっと詳しく書かれてあり、同時に他の構文なども覚えられるんですね。
JavaScriptを学習したい人にはうってつけの方法ですよ。
まとめ
今回はJavaScript dateについて解説しました。
使い方がとても多く、さらに時間設定にもたくさんの注意点がありましたね。今回の記事で説明した内容をすべて覚えるのは非常に大変でしょう。
実はこの記事で紹介したもの以外にも様々なメソッドがあります。ですが紹介しきれなかったメソッドまではすべて覚えなくても大丈夫です。
ほとんどの時間操作が時間の出力と設定、経過ミリ秒だけなのでそんなに多くのメソッドを使うことはないんですよね。
もし他の違った形で出力できるメソッドを知りたいなら、スクリプトリファレンスなどを調べてどんなメソッドがあるのか探してみるといいでしょう。
また使用例や注意点がやや複雑でわかりづらかったかもしれませんが、ひたすらdateを使っていけば自然と覚えられるようになりますよ。
どんどんdateを使って、時間処理をマスターしていきましょう。
こちらの記事もおすすめ
JavaScript for文とは？特徴や使い方、注意点を実例付きで紹介
JavaScript foreachとは？特徴や使い方、注意点を事例付きで紹介
JavaScript mapとは？特徴や使い方、注意点を実践形式で解説
