JavaScript【 Date 】2 ～ 色々な日付の計算

JavaScriptのDateオブジェクトを使うと、特定期間の日数計算など、日付や時刻に関する色々な処理を行うことができます。
今回は、Dateオブジェクトを使用して行う様々な日付計算について紹介します。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. 日時の加算と減算

　
日時を加算する場合は、Dateオブジェクトのメソッドを次のように使用します。

//現在日時（システム日時）
let dt = new Date();
 
//1年後
dt.setFullYear(dt.getFullYear() + 1);
 
//3か月後
dt.setMonth(dt.getMonth() + 3);
 
//10日後
dt.setDate(dt.getDate() + 10);
 
//6時間後
dt.setHours(dt.getHours() + 6);
 
//15分後
dt.setMinutes(dt.getMinutes() + 15);
 
//30秒後
dt.setSeconds(dt.getSeconds() + 30);

日時を減算する場合も同様です。

//現在日時（システム日時）
let dt = new Date();
 
//2年前
dt.setFullYear(dt.getFullYear() - 2);
 
//5か月前
dt.setMonth(dt.getMonth() - 5);
 
//3日前
dt.setDate(dt.getDate() - 3);
 
//8時間前
dt.setHours(dt.getHours() - 8);
 
//40分前
dt.setMinutes(dt.getMinutes() - 40);
 
//55秒前
dt.setSeconds(dt.getSeconds() - 55);

　
次のように、日にちを加算（減算）した結果、月や年が変わる場合でも、問題なく処理されます。

let dt = new Date(2017, 11, 27);

let str = dt.getFullYear() + "年"
    + (dt.getMonth() + 1) + "月"
    + dt.getDate() + "日の10日後は、";

dt.setDate(dt.getDate() + 10);

let str2 = dt.getFullYear() + "年"
    + (dt.getMonth() + 1) + "月"
    + dt.getDate() + "日です";

上記の変数 str と 変数 str2 を合わせて出力すると、次のように表示されます。

　
「dt.setDate(dt.getDate() + 10);」の記述の後は、変数 dt のデータ自体が10日後に変更されるので、上のサンプルのように 出力内容に変更前後双方のデータを使用する場合は、「dt.setDate(dt.getDate() + 10);」の位置に注意する必要があります。

後々まで元の日時データを使用する場合は、「let dt = new Date(2017, 11, 27);」と同じ定義の変数を複数用意した方が読みやすいソースコードとなります。

▲目次へ戻る

2. カウントダウン

　
Dateオブジェクトを使用して、年明けまでのカウントダウン日数を表示します。
表示ボタンをクリックしてみて下さい。

　
ソースコードは次の通りです。

<script type="text/javascript">
function dispAry() {
    let dt = new Date();
    let dt2= new Date((dt.getFullYear() + 1) + "/1/1");

    let day = Math.ceil((dt2-dt)/(60*60*24*1000));

    document.getElementById("dat").value = "来年まであと" + day + "日！";
}
</script>

<div style="background-color : #CCC; padding : 20px 20px 1px;">
    <form>
        <div style="display:inline-flex;">
          　<input type="text" id="dat">　
            <input type="button" value="表示" onClick="dispAry()">
        </div>
    </form>
</div>

「 dt = new Date(); 」として、現在日時（システム日時）のデータを変数 dt に代入して、
「 dt2= new Date((dt.getFullYear() + 1) + “/1/1”) 」として来年の1月1日の日時データを変数 dt2 に代入しています。

そして、「 Math.ceil((dt2-dt)/(60*60*24*1000)) 」として、変数 dt2 と変数 dt との差を、ミリ秒から日にちに換算しています。
Math.ceilメソッドは、引数に指定した値の切り上げ値を返す関数です。

▲目次へ戻る

3. 時差を計算

　
DateオブジェクトのgetTimezoneOffsetメソッドを使うと、グリニッジ標準時との時差を取得することができます。
（Dateオブジェクトのメソッドについては、Dateオブジェクトのメソッド一覧をご参照下さい。）

let jisa = (new Date()).getTimezoneOffset();

getTimezoneOffsetメソッドは、世界協定時間（グリニッジ標準時）との時差を返すメソッドで、「 分（ minute ）」の単位で値が返ります。
　
　
今度は、グリニッジ標準時との時差を予め用意して、海外の都市の時刻を計算します。
表示ボタンをクリックしてみて下さい。

　
ソースコードは次の通りです。

<script type="text/javascript">
function dispDate()
{
    //グリニッジ標準時
    let gt = (new Date()).getTime() + (new Date()).getTimezoneOffset()*60*1000;

    //時差を加減して、各日付データ取得
    let dt_j=new Date(gt+9*60*60*1000);  //日本
    let dt_p=new Date(gt+1*60*60*1000);  //パリ
    let dt_n=new Date(gt-4*60*60*1000);  //ニューヨーク
    let dt_h=new Date(gt-10*60*60*1000); //ハワイ

    //表示内容
    let str_j = dt_j.getFullYear() + "年"
                    + (dt_j.getMonth()+1) + "月"
                    + dt_j.getDate() + "日　"
                    + dt_j.getHours() + "時"
                    + dt_j.getMinutes() + "分";

    let str_p = dt_p.getFullYear() + "年"
                    + (dt_p.getMonth()+1) + "月"
                    + dt_p.getDate() + "日　"
                    + dt_p.getHours() + "時"
                    + dt_p.getMinutes() + "分";

    let str_n = dt_n.getFullYear() + "年"
                    + (dt_n.getMonth()+1) + "月"
                    + dt_n.getDate() + "日　"
                    + dt_n.getHours() + "時"
                    + dt_n.getMinutes() + "分";

    let str_h = dt_h.getFullYear() + "年"
                    + (dt_h.getMonth()+1) + "月"
                    + dt_h.getDate() + "日　"
                    + dt_h.getHours() + "時"
                    + dt_h.getMinutes() + "分";

    document.getElementById("dat_j").value += str_j;
    document.getElementById("dat_p").value += str_p;
    document.getElementById("dat_n").value += str_n;
    document.getElementById("dat_h").value += str_h;

}
</script>

<div style="background-color : #CCC; padding : 20px;">
    <form>
        <input type="button" value="表示" onClick="dispDate()">　
　
        <input type="text" id="dat_j" value="　　　　日本　：　">
        <input type="text" id="dat_p" value="　　　　パリ　：　">
        <input type="text" id="dat_n" value="ニューヨーク　：　">
        <input type="text" id="dat_h" value="　　　ハワイ　：　">
    </form>
</div>

▲目次へ戻る