JavaScriptで日付と時刻をフォーマットしてみよう!

    • このページをはてなブックマークに追加

    本コラムでは、日付(Date)オブジェクトから取得した日付と時刻、曜日をフォーマット(format)する方法について解説します。日付(Date)オブジェクトの基本については、「JavaScriptで日付や時刻を表示する方法」で説明していますのでご参考下さい。

    最終更新日:2018年1月9日

    関連記事:JavaScriptで日付を計算する方法

    目次

    1. 日付(Date)オブジェクトで年月日を表示する方法

    1.1. 年月日(Year, Month, Date)を「YYYY/MM/DD」でフォーマットする

    JavaScriptの日付(Date)オブジェクトを使って、現在の日付を西暦4桁の「YYYY」、月「MM」、日「DD」の「YYYY/MM/DD」形式でフォーマットしてブラウザーに表示する方法をみてみましょう。

    年月日」のフォーマット(format)に使う日付(Date)オブジェクトのメソッドは以下の通りです。

    ●年(Year)を取得するgetFullYear()メソッド

    getFullYear()メソッドの詳細は以下ページをご確認下さい。
    日付(Date)オブジェクトから「年」を取得する

    ●月(Month)を取得するgetMonth()メソッド

    getMonth()メソッドの詳細は以下ページをご確認下さい。
    日付(Date)オブジェクトから「月」を取得する

    ●日(Date)を取得するgetDate()メソッド

    getDate()メソッドの詳細は以下ページをご確認下さい。
    日付(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">ここに現在の「年月日」が表示されます。</p>
    <script>
    function dateFunction011() {
    //日付オブジェクトを作成する
    var dd = new Date();
    //「年」を取得する
    var YYYY = dd.getFullYear();
    //「月」を取得する
    var MM = dd.getMonth()+1;
    //「日」を取得する
    var DD = dd.getDate();
    //段落タグ("date011")の中身を置き換える
    var pelem011 = document.getElementById("date011");
    pelem011.innerHTML = YYYY + "/" + MM + "/" + DD;
    }
    </script>
    </body>
    </html>

    オブジェクト変数、「dd」に「new Date()」を代入し、Dateオブジェクトを作成します。
    」を「getFullYear()メソッド」、「」を「getMonth()メソッド」、「」を「getDate()メソッド」で取得し、各々の数値を変数の「YYYY」、「MM」、「DD」に代入しています。
    document.getElementById("date011")」でHTMLのid属性が「date011」である段落(p)タグを取得し、「pelem011.innerHTML」で現在の日付を「スラッシュ(/)」を追加したフォーマットで置き換えて表示しています。

    以下に「date011.html」のコードをそのまま埋め込んでいますので、ボタンをクリックして現在の「年月日」が表示されるか確認してみて下さい。

    ボタンをクリックすると日付を表示します。

    ここに現在の「年月日」が表示されます。

    ボタンを押した日付が「2017年8月8日」の場合、「2017/8/8」と表示されます。

    ▲ページトップへ戻る

    1.2. N年後の日付を表示する方法 - setYear() + getFullYear()メソッド

    JavaScript日付(Date)オブジェクトで、日付を加算する方法を確認してみましょう。 「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">ここに今から5年後の西暦が表示されます。</p>
    <script>
    function dateFunction012() {
    //日付オブジェクトを作成する
    var dd = new Date();
    //取得した年に5を足して日付オブジェクトにセットする
    dd.setYear(dd.getFullYear() + 5);
    //5年後の日付データーから「年」を取得する
    var year = dd.getFullYear();
    //段落タグの中身を置き換える
    var pelem012 = document.getElementById("date012");
    pelem012.innerHTML = "5年後は[" + year + "]年です。";
    }
    </script>
    </body>
    </html>

    現時点から5年後の日付を表示するコードを書いてみましょう。のボタンタブにonclickイベントを指定していますので、ボタンをクリックすると「dateFunction012」が実行されます。

    new Date()」で、Dateオブジェクトを生成し、現在の日付データーをオブジェクト変数である「dd」に代入しています。

    setYear()メソッドで現在の日付に5を加算します。5を加算するのは「」になりますので、引数の計算式には「年」を取得する「getFullYear()メソッド」に「5」を足しています。オブジェクト変数の「dd」には、ボタンをクリックした時点から5年後の日付データーがセットされています。例えば現在の「年」が「2017年」の場合は「Mon Aug 22 2022 16:52:37 GMT+0900 (東京 (標準時))」といったフォーマットで。

    5年後の日付データーから「年」データーを取得するgetFullYear()メソッドを「year」に代入し25、26行目でブラウザーに表示します。

    以下に「date012.html」のコードをそのまま埋め込みましたので、ボタンをクリックして現在の日付から「5年後の年」が表示されるか確認してみて下さい。

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

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

    ボタンを押した日付が「2017年」の場合、「5年後は[2022]年です。」と表示されます。

    ▲ページトップへ戻る

    2. 日付(Date)オブジェクトで時刻を表示する方法

    2.1. 時分秒(hours, minutes, seconds)を「hh:mm:ss」でフォーマット(format)する

    時刻も日付と同じようにフォーマットしてみましょう。JavaScriptで現在の時刻を時「hh」、分「MM」、秒「ss」の「hh:mm:ss」形式でブラウザーに表示する方法を確認してみましょう。
    「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">ここに現在の「時刻」が表示されます。</p>
    <script>
    function dateFunction021() {
    //日付オブジェクトを作成する
    var dd = new Date();
    //「時」を取得する
    var hh = dd.getHours();
    //「分」を取得する
    var mm = dd.getMinutes();
    //「秒」を取得する
    var ss = dd.getSeconds();
    //段落タグ("date021")の中身を置き換える
    var pelem021 = document.getElementById("date021");
    pelem021.innerHTML = hh + ":" + mm + ":" + ss;
    }
    </script>
    </body>
    </html>

    19行目でオブジェクト変数、「dd」に「new Date()」を代入してDateオブジェクトを作成したら「年月日」と同様に、時刻を取得するメソッドを使います。
    」を「getHours()メソッド」、「」を「getMinutes()メソッド」、「」を「getSeconds()メソッド」で取得します。それぞれの値を変数の「hh」、「mm」、「ss」に代入し、27、28行目のJavaScriptで現在の時刻を「コロン(:)」で区切ったフォーマットで置き換えてブラウザーに表示しています。

    ボタンをクリックすると時刻を表示します。

    ここに現在の「時刻」が表示されます。

    ボタンを押した日付が「13時4分56秒」の場合、「13:4:56」と表示されます。

    ▲ページトップへ戻る

    2.2. 「時分秒(hh:mm:ss)」に0をつけて桁合わせする方法

    getHours()」、「getMinutes()」、「getSeconds()」メソッドで取得した値の桁を合わせて表示する場合は、文字列のフォーマート(format)をしてブラウザーに表示します。時刻表示の桁数を2桁に揃えて表示するコードを記述してみましょう。
    「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">ここに指定の「時刻」が表示されます。</p>
    <script>
    function dateFunction022() {
    //日付オブジェクトを作成する
    var dd = new Date(2017, 8, 8, 6, 7, 8);
    //「時」を取得する
    var hh = dd.getHours();
    //「分」を取得する
    var mm = dd.getMinutes();
    //「秒」を取得する
    var ss = dd.getSeconds();
    //「時」が10未満の場合時間に"0"を追加する
    if (hh < 10) {
    hh = "0" + hh;
    }
    //段落タグ("date022")の中身を置き換える
    var pelem022 = document.getElementById("date022");
    pelem022.innerHTML = hh + ":" + mm + ":" + ss;
    }
    </script>
    </body>
    </html>

    日付(Date)オブジェクトの作成で、「2017年8月8日、6時7分8秒」の日付・時刻を指定しました。まずは「時」のみを2桁で表示するコードを追加してみます。
    ifから始まる条件文で時間データーの入っている「hh」が10未満の場合に時刻の前に文字列の"0"をつけています。以下「date022.html」と同じコードを記述していますので、ボタンをクリックして動作を確認して下さい。

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

    ここに指定の「時刻」が表示されます。

    条件文をつけない場合は「6:7:8」と表示されますが、桁合わせのコードを追加していますので、「06:7:8」と表示されます。

    ▲ページトップへ戻る

    2.3. 時刻の桁合わせを関数で処理する方法

    2.2の時刻に0を付けるJavaScriptのコードでは「時」の処理のみ条件文を使って2桁にしていました。その他の「分」や「秒」も0をつけて2桁に合わせてみましょう。コードの書き方は、以下のコードのように条件文を増やすなど幾つかの方法がありますが、本節では、同じような処理をまとめて処理できる「関数」を使って処理する方法を学習します。

    <script>
    function dateFunction022() {
    //日付オブジェクトを作成する
    var dd = new Date(2017, 8, 8, 6, 7, 8);
    ・・・省略・・・
    //「時」が10未満の場合時間に"0"を追加する
    if (hh < 10) {
    hh = "0" + hh;
    }
    //「分」が10未満の場合時間に"0"を追加する
    if (mm < 10) {
    mm = "0" + mm;
    }
    ・・・省略・・・
    }
    </script>

    二つのif文を見比べてみると、変数の「hh」と「mm」が異なるだけで、それ以外の処理は同じ計算をしています。
    このような場合は処理をまとめて「関数」を作成するとソースコードがスッキリします。

    「date023.html」をPC上の任意の場所に保存して下さい。

    ●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">ここに指定の「時刻」が表示されます。</p>
    <script>
    //1桁の数字の前に0を付けて2桁にする
    function toDoubleDigits(i) {
    if (i < 10) {
    i = "0" + i;
    }
    return i;
    }
    function dateFunction023() {
    //日付オブジェクトを作成する
    var dd = new Date(2017, 5, 6, 7, 8);
    //「時」を取得する
    var hh = toDoubleDigits(dd.getHours());
    //「分」を取得する
    var mm = toDoubleDigits(dd.getMinutes());
    //「秒」を取得する
    var ss = toDoubleDigits(dd.getSeconds());
    //段落タグ("date023")の中身を置き換える
    var pelem023 = document.getElementById("date023");
    pelem023.innerHTML = hh + ":" + mm + ":" + ss;
    }
    </script>
    </body>
    </html>

    functionから始まるJavaScriptが「数字を2桁に揃える」処理を記述した「toDoubleDigits関数です。取得した時間の内、「時」が入っている変数の「hh」や「分」データーが入っている「mm」を関数の引数「i」として受け取って、処理後の値(i)を返します。

    toDoubleDigits」関数を呼び出して、「getHours()メソッド」や「getMinutes()メソッド」で取得した値を渡します。 プログラムを記述する時は、なるべく同じような処理はまとめ、コードも短くできるのであればなるべく短く書くように心がけるとよいでしょう。

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

    ここに指定の「時刻」が表示されます。

    ボタンをクリックすると「時」、「分」、「秒」の前に0がついて2桁になり「07:08:00」と表示されます。

    ▲ページトップへ戻る

    3. 日付(Date)オブジェクトで曜日を表示する

    3.1. 日付(Date)オブジェクトから「曜日」データーを取得する - getDay()メソッド

    Dateオブジェクトから「曜日」データーを取得するにはgetDay()メソッドを使います。

    ●date031.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="dateFunction031()">曜日を表示</button>
    <p id="date031">ここに、本日の曜日データーが表示されます。</p>
    <script>
    function dateFunction031() {
    //日付オブジェクトを作成する
    var date031 = new Date();
    //日付オブジェクトから「曜日」を取得する
    var day = date031.getDay();
    //段落タグの中身を置き換える
    var pelem031 = document.getElementById("date031");
    pelem031.innerHTML = "曜日データー:" + day;
    }
    </script>
    </body>
    </html>

    getDay() で取得できる「曜日」データーは「0~6」になります。「日曜日」が「0」、「月曜日」が「1」、、、「土曜日」が「6」を表しています。

    サンプルコードでは、ボタンをクリックすると現在の「曜日」データーがブラウザーに表示されます。サンプルボタンをクリックして、今日の「曜日」データーが表示されるか確認してみて下さい。

    ボタンをクリックして「曜日」データーを取得します。

    ここに、本日の曜日データーが表示されます。

    ボタンを押した曜日が「月曜日」の場合は、ブラウザーに「曜日データー:1」、「火曜日」の場合は「曜日データー:2」、土曜日の場合は「曜日データー:6」と表示されます。

    ▲ページトップへ戻る

    3.2. getDay()で取得した曜日を日本語でフォーマット(format)する

    次に、getDay()メソッドで取得した「曜日」データーを元に、日本語の曜日にフォーマットするJavaScriptを記述してみましょう。
    「date032.html」をPC上の任意の場所に保存して下さい。ファイルの保存形式は「utf-8」にします。

    ●date032.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="dateFunction032()">曜日を表示</button>
    <p id="date032">ここに今日の「曜日」が表示されます。</p>
    <script>
    function dateFunction032() {
    //日本語の曜日データを入れる配列を作成する
    var w_day = new Array(7);
    w_day[0] = "日";
    w_day[1] = "月";
    w_day[2] = "火";
    w_day[3] = "水";
    w_day[4] = "木";
    w_day[5] = "金";
    w_day[6] = "土";
    //日付オブジェクトを作成する
    var dd = new Date();
    //Dateオブジェクトの曜日データを代入する
    var day = w_day[dd.getDay()];
    //段落タグの中身を置き換える
    var pelem032 = document.getElementById("date032");
    pelem032.innerHTML = "今日は" + day + "曜日です。";
    }
    </script>
    </body>
    </html>

    まず、日本語の曜日を入れる配列の「w_day」を作成します。
    配列変数の角括弧の中の数字を添え字と呼びます。「添え字」は、0から始まりますので、getDay()メソッドで取得する曜日の数字と照らし合わせると分かり安いと思います。

    日付(Date)オブジェクトgetDay()メソッドで取得した曜日データーを配列の「添え字」として指定します。getDay()メソッドの値が「3」だった場合は、「 w_day[3] 」となりますので、変数「day」には、「"水"」が入ります。

    id属性」が「"date032"」の段落に、作成した文字列を置き換えて表示します。

    ボタンをクリックすると曜日を表示します。

    ここに今日の「曜日」が表示されます。

    ボタンを押した日付が「月曜日」の場合、ブラウザーには、「今日は月曜日です。」と表示されます。

    ▲ページトップへ戻る

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

    【企業名】株式会社 ブレイン・ラボ

    年収400〜700万円
    勤務地東京都港区

    【企業名】株式会社エートゥジェイ

    年収400〜650万円
    勤務地東京都港区

    【企業名】株式会社アクアビットスパイラルズ

    年収400〜700万円
    勤務地東京都品川区

    株式会社 エイトレッド

    年収400〜600万円
    勤務地東京都渋谷区
    • このページをはてなブックマークに追加

    おすすめ記事

  • OCTPASS

    ピックアップ

    正社員

    【PHP】サーバーサイドエンジニア|アドテクマーケティング★自社ツールの開発

    年収 :600万円〜

    ◆サーバーサイドエンジニアとして自社ツールの開発を担当 ◆最先端のマーケティングスキルも身につける...

    株式会社 ピアラ

    正社員

    【Java/PHP】システム開発エンジニア|企業グループIT部門◎100%自社内開発★未経験

    年収 :250万円〜350万円

    ◆700名規模グループ内のITシステムの開発や保守業務 ◆自社内開発100%!じっくりと業務に取り組める ◆...

    株式会社イノベーションネクスト

    正社員

    【LAMP】システムエンジニア|100%自社内開発★服装自由・フレックス◎独学可

    年収 :300万円〜350万円

    ◆自社サービスの企画~開発までをお任せします。 ◆シェアNo.1クラウドソリューションを提供するベンチ...

    ブライシス株式会社

    正社員

    【PHP/Java】システムエンジニア|100%自社内開発★在宅導入/時短OK◎働くママさん歓迎

    年収 :350万円〜600万円

    ◆自社サービスの企画~開発までをお任せします。 ◆シェアNo.1クラウドソリューションを提供するベンチ...

    ブライシス株式会社

    正社員

    【PHP/Python】開発エンジニア|自社ECサイト★マンガ×IT少数精鋭のベンチャー◎独学可

    ◆月間10億PVのマンガサービスを支えるPythonエンジニア ◆マンガに興味ある方!はじめはPython勉強意欲...

    株式会社TORICO