JavaScriptで時間の比較を行う方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptで時間の比較を行う方法について現役エンジニアが解説しています。JavaScriptで時間の比較を行うにはDateオブジェクトを使います。日付や時間の比較の他、プログラムの処理時間なども計測することが出来ます。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptで時間の比較を行う方法について解説します。
実際のコードをもとに解説していきますので、理解を深めていきましょう。
また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。
今回は、JavaScriptに関する内容だね！
どういう内容でしょうか？
JavaScriptで時間の比較を行う方法について詳しく説明していくね！
お願いします！
JavaScriptで日時・経過時間などの比較を行う方法
日付計算を行うにはDateオブジェクトを利用します。Dateオブジェクトは”1970/01/01/00:00:00″から始まるミリ秒を基準としています。
最初に「new Date()」でインスタンス化して、作成したインスタンスを使って計算を行っていきます。作成時は、new Date(2019,10,1,20,00,00)などの指定を行いますが、引数を指定しない場合は、現在時刻で作成されます。
Dateオブジェクトを利用して○○後、○○前の日付などを求めるには、DateオブジェクトのsetXXX,getXXXメソッドを利用して算出します。
まずは、下記の表を確認してください。
| 種類 | 取得メソッド | 設定メソッド | 注意点 |
|---|---|---|---|
| 年 | getFullYear | setFullYear | |
| 月 | getMonth | setMonth | 0～11の値 |
| 日 | getDate | setDate | setDayは週 |
| 時 | getHours | setHours | |
| 分 | getMinutes | setMinutes | |
| 秒 | getSeconds | setSeconds |
例として、日付を計算する場合の書き方を説明いたします。まずは、インスタンスを作成
var newDate = new Date();
続いて、作成したインスタンスから日付部分を取得します。
newDate.getDate();
取得した日付に減加算したい日数を加算し、元のインスタンに設定します。あわせて書くと下記の様になります。
newDate.setFullYear(newDate.getFullYear() + 10));
※10日後を計算
JavaScriptで処理時間の比較を行う方法
開始時間と終了時間を計算するには、開始前の時間と開始後の時間をインスタンス化し、getTimeを使ってミリ秒を取り出し差を算出します。
var startTime = new Date(); /*色々な処理*/ var endTime = new Date(); var elapsedTime = endTime.getTime() - startTime.getTime() /*最後にミリ秒を分や秒に変換します。*/ var mins = elapsedTime / ( 1000 * 60 ); // 分の計算 elapsedTime = elapsedTime % ( 1000 * 60 ); // 算出した分を取り除く var secs = elapsedTime / 1000; // 秒の計算 Math.floor(mins) + "分" //分を切り捨てで表現 Math.floor(secs) + "秒" //秒を切り捨てで表現
実際に書いてみよう
<html>
<head>
<meta charset="UTF-8">
<title>JavaScriptで時間の比較を行う方法</title>
<style type="text/css">
html {
font-size: 62.5%;
text-align: center;
}
h1 {
font-size: 4rem;
}
#input {
overflow: hidden;
}
#output {
overflow: hidden;
}
</style>
</head>
<body>
<h1>JavaScriptで時間の比較を行う方法</h1>
<h1 id="starttime"></h1>
<p>
<input id="in_year" type="number" name="in_year" value="">
<input id="year" type="button" value="年計算" onclick="cal_time(this)">
→
<label id="out_year">_____</label>
</p>
<p>
<input id="in_mon" type="number" name="in_mon" value="">
<input id="mon" type="button" value="月計算" onclick="cal_time(this)">
→
<label id="out_mon">_____</label>
</p>
<p>
<input id="in_day" type="number" name="in_day" value="">
<input id="day" type="button" value="日計算" onclick="cal_time(this)">
→
<label id="out_day">_____</label>
</p>
<p>
<input id="in_hour" type="number" name="in_hour" value="">
<input id="hour" type="button" value="時計算" onclick="cal_time(this)">
→
<label id="out_hour">_____</label>
</p>
<p>
<input id="in_min" type="number" name="in_min" value="">
<input id="min" type="button" value="分計算" onclick="cal_time(this)">
→
<label id="out_min">_____</label>
</p>
<p>
<input id="in_sec" type="number" name="in_sec" value="">
<input id="sec" type="button" value="秒計算" onclick="cal_time(this)">
→
<label id="out_sec">_____</label>
</p>
<p>
<input id="endtime" type="button" value="経過時間" onclick="cal_time(this)">
→
<label id="out_endtime">_____</label>
</p>
<p>
<h1>2020 Tokyo Olympic 2020年07月24日 20:00:00</h1>
<input id="olympic" type="button" value="確認" onclick="cal_time(this)"><br>
<h1 id="olympictime">_____</h1>
</p>
<script type="text/javascript">
var now = new Date();
//表示時間
function view_time(time) {
var year = time.getFullYear();
var mon = time.getMonth()+1;
var day = time.getDate();
var hour = time.getHours();
var min = time.getMinutes();
var sec = time.getSeconds();
//成型して表示
var s = year + "年" + mon + "月" + day + "日" + hour + "時" + min + "分" + sec + "秒";
return s;
}
//起動時に時間を表示
document.getElementById("starttime").innerHTML = set_start_time();
function set_start_time() {
var starttime = new Date(now.getTime());
return view_time(now);
}
//時間経過
function cal_time(element) {
var id = element.id;
coltime = new Date(now.getTime());
switch (id) {
case "year":
coltime.setFullYear(coltime.getFullYear() + Number(document.getElementById("in_year").value));
document.getElementById("out_year").innerHTML = view_time(coltime);
break;
case "mon":
coltime.setMonth(coltime.getMonth() + Number(document.getElementById("in_mon").value));
document.getElementById("out_mon").innerHTML = view_time(coltime);
break;
case "day":
coltime.setDate(coltime.getDate() + Number(document.getElementById("in_day").value));
document.getElementById("out_day").innerHTML = view_time(coltime);
break;
case "hour":
coltime.setHours(coltime.getHours() + Number(document.getElementById("in_hour").value));
document.getElementById("out_hour").innerHTML = view_time(coltime);
break;
case "min":
coltime.setMinutes(coltime.getMinutes() + Number(document.getElementById("in_min").value));
document.getElementById("out_min").innerHTML = view_time(coltime);
break;
case "sec":
coltime.setSeconds(coltime.getSeconds() + Number(document.getElementById("in_sec").value));
document.getElementById("out_sec").innerHTML = view_time(coltime);
break;
case "endtime":
var EndTime = new Date();
// 経過時間をミリ秒で取得
var ms = EndTime.getTime() - coltime.getTime();
// ミリ秒を分に変換(端数切捨て)
var secs = Math.floor(ms / (1000*60));
document.getElementById("out_endtime").innerHTML = secs + "分";
break;
case "olympic":
var OlympicTime = new Date(2020,07,24,20,00,00);
var msg1 = "後";
var msg2 = "です。";
// 経過時間をミリ秒で取得
var ms = OlympicTime.getTime() - coltime.getTime();
if (ms < 0){
ms = -1 * ms;
msg1 = "既に"
msg2 = "過ぎました。";
}
var days = ms / ( 1000 * 60 * 60 * 24 ); // 日数
ms = ms % ( 1000 * 60 * 60 * 24 );
var hours = ms / ( 1000 * 60 * 60 ); // 時間
ms = ms % ( 1000 * 60 * 60 );
var mins = ms / ( 1000 * 60 ); // 分
ms = ms % ( 1000 * 60 );
var secs = ms / 1000; // 秒
var msg = msg1
+ Math.floor(days) + "日"
+ Math.floor(hours) + "時"
+ Math.floor(mins) + "分"
+ Math.floor(secs) + "秒"
+ msg2;
document.getElementById("olympictime").innerHTML = msg;
break;
}
}
</script>
</body>
</html>
色々な計算のサンプルを作成してみましたので、参考になればと思います。
筆者プロフィール
| 小宮山晃史（こみやまこうじ)
現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。 iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。
挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
