• JavaScriptで日付を計算する方法

    公開日:2017年08月31日 最終更新日:2021年12月24日

    JavaScriptDateオブジェクトを使って、日付や時刻を計算する方法について解説します。「getYear()メソッド」、「getMonth()メソッド」、「getDate()メソッド」を使って「年」、「月」、「日」の計算をし、「getHours()メソッド」、「getMinutes()メソッド」、「getSeconds()メソッド」を使って「時」、「分」、「秒」の計算をします。
    日付(Date)オブジェクトの基本については、「JavaScriptで日付や時刻を表示する方法」で説明していますのでご参考下さい。

    関連記事:JavaScriptで日付や時刻を表示する方法
    関連記事:JavaScriptで日付と時刻をフォーマットしてみよう!

    目次

    1. Dateオブジェクトを使って日付を加算する方法

    1.1. DateオブジェクトのgetYear()メソッドを使って加算した「年」を表示する

    JavaScript日付(Date)オブジェクトで、日付を加算する方法はシンプルです。まずは、「date011.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。

    ●date011.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>Introduction to JavaScript</title>
    </head>
    <body>
    <h1>JavaScript 入門</h1>
    <p>ボタンをクリックして下さい。</p>
    <button onclick="dateFunction011()">年を表示</button>
    <p id="date011">ここに2017年から5年後の「西暦」が表示されます。</p>
    <script>
    function dateFunction011() {
    //日付オブジェクトを作成する
    var dd = new Date(2017, 8);
    //日付オブジェクトの「年」を[year]に代入する
    var year = dd.getFullYear();
    //取得した「年」に5を足して日付オブジェクトにセットする
    dd.setYear(dd.getFullYear() + 5);
    //5年後の日付データーから「年」を取得する
    var year5 = dd.getFullYear();
    //段落タグの中身を置き換える
    var pelem011 = document.getElementById("date011");
    pelem011.innerHTML = "[" + year + "年]の5年後は【" + year5 + "年】です。";
    }
    </script>
    </body>
    </html>

    JavaScriptは、[button]タグのonclickイベントで実行されますので、ボタンをクリックすると、JavaScriptのdateFunction011()が処理されます。

    new Date()」で、「2017年8月」のDateオブジェクトを作成します。

    ブラウザーに計算前の「年」を表示する為に、日付(Date)オブジェクトの「年」の部分、つまり「2017」を変数のyearに代入しています。

    その後のgetFullYear()メソッドで取得した「」に「」を加算し、setYear()メソッドで日付オブジェクトの値を設定します。
    getFullYear()メソッドで、加算後の「」を変数の「year5」に代入したら、後はブラウザーに表示するコードを記述します。

    「date011.html」のコードを書きましたので、ボタンをクリックしてみて下さい。2017年から5年後の「2022」が表示されます。

    ボタンをクリックして下さい。

    ここに2017年から5年後の「西暦」が表示されます。

    ボタンを押すと「[2017年]の5年後は【2022年】です。」と表示されます。

    ▲ページトップへ戻る

    1.2. DateオブジェクトのgetMonth()メソッドを使って加算した「月」を表示する

    次に、setMonth()メソッドを使って「月」を加算してみよう!
    「date012.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。

    ●date012.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>Introduction to JavaScript</title>
    </head>
    <body>
    <h1>JavaScript 入門</h1>
    <p>ボタンをクリックして下さい。</p>
    <button onclick="dateFunction012()">月を表示</button>
    <p id="date012">ここに2月から3ヵ月後の「月」が表示されます。</p>
    <script>
    function dateFunction012() {
    //日付オブジェクトを作成する
    var dd = new Date(2017, 1);
    //日付オブジェクトの「月」を[month]に代入する
    var month = dd.getMonth()+1;
    //取得した月に3を足して日付オブジェクトに設定する
    dd.setMonth(dd.getMonth() + 3);
    //3ヵ月後の日付データーから「月」を取得する
    var month3 = dd.getMonth()+1;
    //段落タグの中身を置き換える
    var pelem012 = document.getElementById("date012");
    pelem012.innerHTML = "[" + month + "月]の3ヵ月後は【" + month3 + "月】です。";
    }
    </script>
    </body>
    </html>

    」の加算も「」とほぼ同じように計算できますが、月を計算する時は少し注意が必要です。「getMonth()メソッド」で取得する「月」は「1月」を表す「0」から始まり、「12月」を表す「11」で終わります。その為、取得した月の値をブラウザーに表示する場合は「+1」加算してあげるか、もしくは意図した加算の数から「1」マイナスするなどの処置をする必要があります。JavaScriptのコードが分かりにくくなりますが、自分でルールを決めておくとよいでしょう。

    ボタンをクリックして下さい。

    ここに2月から3ヵ月後の「月」が表示されます。

    ボタンを押すと「[2月]の3ヵ月後は【5月】です。」と表示されます。

    ▲ページトップへ戻る

    1.3. DateオブジェクトのgetDate()メソッドを使って加算した「日」を表示する

    「日」の計算にを行うJavaScriptを記述してみましょう。
    「date013.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。

    ●date013.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>Introduction to JavaScript</title>
    </head>
    <body>
    <h1>JavaScript 入門</h1>
    <p>ボタンをクリックして下さい。</p>
    <button onclick="dateFunction013()">日を表示</button>
    <p id="date013">ここに8日から10日後の「日」が表示されます。</p>
    <script>
    function dateFunction013() {
    //日付オブジェクトを作成する
    var dd = new Date(2017, 2, 8);
    //日付オブジェクトの「日」を[date]に代入する
    var date = dd.getDate();
    //取得した日に10を足して日付オブジェクトにセットする
    dd.setDate(dd.getDate() + 10);
    //10日後の日付データーから「日」を取得する
    var date10 = dd.getDate();
    //段落タグの中身を置き換える
    var pelem013 = document.getElementById("date013");
    pelem013.innerHTML = "[" + date + "日]の10日後は【" + date10 + "日】です。";
    }
    </script>
    </body>
    </html>

    「2017年2月8日」の日付(Date)オブジェクトを生成して、getDate()メソッドで「10」を加算し、日付オブジェクトには、setDate()メソッドで設定しています。 計算前の日付の値を変数「date」に代入し、加算後の値を変数「date10」に代入しています。

    ボタンをクリックして下さい。

    ここに8日から10日後の「日」が表示されます。

    ボタンを押すと「[8日]の10日後は【18日】です。」と表示されます。

    ▲ページトップへ戻る

    2. Dateオブジェクトを使って時刻を加算する方法

    2.1. DateオブジェクトのgetHours()メソッドを使って加算した「時」を表示する

    JavaScriptには、日付の加算ど同様に、時刻を加算するメソッドも用意されています。 「date021.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。

    ●date021.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>Introduction to JavaScript</title>
    </head>
    <body>
    <h1>JavaScript 入門</h1>
    <p>ボタンをクリックして下さい。</p>
    <button onclick="dateFunction021()">時間を表示</button>
    <p id="date021">ここに12時から5時間後の「時」が表示されます。</p>
    <script>
    function dateFunction021() {
    //日付オブジェクトを作成する
    var dd = new Date(2017, 2, 8, 12);
    //日付オブジェクトの「時」を[date]に代入する
    var hours = dd.getHours();
    //取得した「時間」に5を足して日付オブジェクトにセットする
    dd.setHours(dd.getHours() + 5);
    //5時間後の時刻データーから「時」を取得する
    var hours5 = dd.getHours();
    //段落タグの中身を置き換える
    var pelem021 = document.getElementById("date021");
    pelem021.innerHTML = "[" + hours + "時]の5時間後は【" + hours5 + "時】です。";
    }
    </script>
    </body>
    </html>

    「2017年2月8日、12時」の日付オブジェクトを生成しました。getHours()メソッドで取得した値に「5」を加算し、その値をsetHours()メソッドで日付(Date)オブジェクトに設定しています。最初に設定した時刻の12時は、変数「hours」に、5を加算後の時刻は変数の「hours5」に代入されています。

    ボタンをクリックして下さい。

    ここに12時から5時間後の「時」が表示されます。

    ボタンを押すと「[12時]の5時間後は【17時】です。」と表示されます。

    ▲ページトップへ戻る

    2.2. DateオブジェクトのgetMinutes()メソッドを使って加算した「分」を表示する

    JavaScriptgetMinutes()メソッドで、日付オブジェクトの「分」の加算を行います。「date022.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。

    ●date022.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>Introduction to JavaScript</title>
    </head>
    <body>
    <h1>JavaScript 入門</h1>
    <p>ボタンをクリックして下さい。</p>
    <button onclick="dateFunction022()">時間を表示</button>
    <p id="date022">ここに12時20分から10分後の「分」が表示されます。</p>
    <script>
    function dateFunction022() {
    //日付オブジェクトを作成する
    var dd = new Date(2017, 2, 8, 12, 20);
    //日付オブジェクトの「分」を[minutes]に代入する
    var minutes = dd.getMinutes();
    //取得した「分」に10を足して日付オブジェクトにセットする
    dd.setMinutes(dd.getMinutes() + 10);
    //10分後の日付データーから「分」を取得する
    var minutes10= dd.getMinutes();
    //段落タグの中身を置き換える
    var pelem022 = document.getElementById("date022");
    pelem022.innerHTML = "[" + minutes + "分]の10分後は【" + minutes10+ "分】です。";
    }
    </script>
    </body>
    </html>

    サンプルコードでは、「2017年2月8日、12時20分」で「 Dateオブジェクト 」を作成しています。「20分」に加算するコードは「dd.getMinutes() + 10」です。setMinutes()メソッドで「12時20分」から10分後の時間を日付(Date)オブジェクトに設定しています。「document.getElementById()」でid属性が「"date022"」の要素を取得し、「pelem022.innerHTML」で要素の中身を入れ替えます。以下、サンプルコードを埋め込みましたので、ボタンをクリックして動作を確認して下さい。

    ボタンをクリックして下さい。

    ここに12時20分から10分後の「分」が表示されます。

    ボタンを押すと「[20分]の10分後は【30分】です。」と表示されます。

    ▲ページトップへ戻る

    2.3. DateオブジェクトのgetSeconds()メソッドを使って加算した「時」を表示する

    JavaScriptgetSeconds()メソッドで、日付オブジェクトの「秒」の加算を行います。「date023.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。

    ●date023.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>Introduction to JavaScript</title>
    </head>
    <body>
    <h1>JavaScript 入門</h1>
    <p>ボタンをクリックして下さい。</p>
    <button onclick="dateFunction023()">時間を表示</button>
    <p id="date023">ここに12時20分5秒から30秒後の「秒」が表示されます。</p>
    <script>
    function dateFunction023() {
    //日付オブジェクトを作成する
    var dd = new Date(2017, 2, 8, 12, 20, 5);
    //日付オブジェクトの「時」を[seconds]に代入する
    var seconds = dd.getSeconds();
    //取得した「秒」に30を足して日付オブジェクトにセットする
    dd.setSeconds(dd.getSeconds() + 30);
    //30秒後の日付データーから「秒」を取得する
    var seconds30 = dd.getSeconds();
    //段落タグの中身を置き換える
    var pelem023 = document.getElementById("date023");
    pelem023.innerHTML = "[" + seconds + "秒]の30秒後は【" + seconds30 + "秒】です。";
    }
    </script>
    </body>
    </html>

    Dateオブジェクトには、「12時20分5秒」が設定されています。30秒後の時刻を「dd.getSeconds() + 30」で計算しています。秒数の計算をする前の日付(Date)オブジェクトの値(dd.getSeconds())を、変数「seconds」に代入し、加算後の秒数を変数「seconds30」に代入しています。ボタンをクリックすると、id属性"date023"のタグ、段落(p)タグに加算前の「秒数」と加算後の「秒数」が表示されます。

    ボタンをクリックして下さい。

    ここに12時20分5秒から30秒後の「秒」が表示されます。

    ボタンを押すと「[5秒]の30秒後は【35秒】です。」と表示されます。

    ▲ページトップへ戻る

    JavaScriptのスキルが活かせる最新求人情報をチェック!

    月額単価50万円〜60万円
    勤務地 東京都 千代田区
    月額単価70万円〜
    勤務地 東京都 渋谷区
    月額単価50万円〜60万円
    勤務地 東京都 千代田区
    月額単価70万円〜
    勤務地 東京都 港区
    勤務地 フルリモート

    フリーランスの方でこのようなお悩みありませんか?

    • 定期的に案件を紹介してほしい
    • 完全フルリモートワークや、週1出勤など、働き方を選びたい
    • 単価交渉など営業周りが苦手なので、誰かに任せたい

    プロエンジニアにお任せください!

    プロエンジニアはほとんどEND直案件!高額単価案件ならお任せください。
    完全フルリモートや、週1出勤など、希望に合わせた働き方ができる案件を多数ご用意しています。
    単価や契約交渉などは弊社キャリアコンサルタントに全てお任せください。

    無料登録して、あなたの希望に合った案件をチェック!

    簡単60秒!無料登録はこちらから

    おすすめ記事

  • ピックアップ

    フリーランス

    NEW 【PHP/Laravel】サーバーサイドエンジニア★高度診断・健康管理システム 管理画面のリプレイス

    主に大手企業のシステムを受託開発している企業の案件です。 今回はLaravel、Nuxt を用いた高度診断・...

    月額単価:50万円〜60万円

    フリーランス

    【Ruby/React/Node.js】フルスタックエンジニア★動画配信プラットフォームの開発

    動画配信プラットフォームを提供する企業にて、Ruby / React、Node.js のフルスタックエンジニアとして...

    月額単価:70万円〜

    フリーランス

    【Laravel/Nuxt.js】フルスタックエンジニア★業務システム開発

    主に大手企業のシステムの受託開発や親会社(リユースショップ/リサイクルショップ)のシステムを開発...

    月額単価:50万円〜60万円

    フリーランス

    【PHP】フルスタックエンジニア★保育・教育施設向け業務支援サービスの開発

    保育・教育施設向けICTシステムやSaaSを展開している企業にて、当システムの開発支援業務をご担当いただ...

    月額単価:70万円〜

SCROLL TOP