JavaScriptでDateオブジェクトを使って日付を表示する方法【初心者向け】
プログラミング初心者向けに、JavaScriptの組み込み関数の1つ【Dateオブジェクト】を使って日付を表示する方法を初心者向けに解説した記事です。年・月・日・曜日など簡単に出力することができます。【サンプルコードあり】
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptをプログラミング初心者向けに紹介した記事です。
今回は、JavaScriptの組み込み関数の1つ、Dateオブジェクトを使って日付を表示する方法について解説します。
また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。
本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。
なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。
今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
目次
組み込み関数のDateオブジェクトとは
組み込み関数とは、JavaScrip側であらかじめ用意してくれているオブジェクトのことです。Dateオブジェクトは、組み込み関数の1つで、日付を扱う際に使います。
参考までに、組み込み関数の代表的なものには次のようなものがあります。
<組み込み関数（代表的なもの）>
はじめから関数の内容が決まっているので、こちらで定義する手間もなく、実行するだけ。非常に便利なので重宝します。
組み込みオブジェクトを使う場合、newを使って次のようにオブジェクトを生成します。
var オブジェクト名= new object();
田島メンター！日付を扱うにはどうしたらいいでしょうか？
Dateオブジェクトっていう組み込みオブジェクトが用意されているので、それを使うといいね。
日付を処理する関数は最初から用意されてるんですね。
他のプログラミング言語でもそうなんだよ。さっそくDateオブジェクトについて見てみよう！
Dateオブジェクトを実際に生成してみよう
適当なオブジェクト名（today）をつけ、Dateオブジェクトを生成してみましょう。日付に関する様々なプロオパティやメソッドを出力することができます。
var today = new Date();
<!DOCTYPE html>
<html lang = "ja">
<head>
<meta charset = "utf-8">
<title>JavaScriptの練習</title>
</head>
<body>
<script>
var today = new Date();
</script>
</body>
</html>
ここまでできたら、console.logを使って日付に関する様々なプロオパティやメソッドを呼び出してみます。
次の章から見ていきましょう。
Dateオブジェクトのプロパティを呼び出してみよう
Dateオブジェクトでの文字列の操作の仕方を、4つのプロパティを例に見ていきましょう。
- プロパティ1. getFullYear()（現時点での年を取得する）
- プロパティ2. getMonth()+1（現時点での月を取得する）
- プロパティ3. getDate()（現時点での日を取得する）
- プロパティ4. getDay() （現時点での曜日を取得する）
- 5. 最後に（現時点での年・月・日・曜日を一気に取得する）
プロパティ1. getFullYear()（現時点での年を取得する）
オブジェクトのプロパティを呼び出すやり方の確認です。
変数名に「.」で続けてプロパティ名を入れると、プロパティの値を呼び出すことができます。
現時点での年代の値を取得したいときは、getFullYear() を使ってこのように書きます。
<script>
var today = new Date();
console.log(today.getFullYear());
</script>
記事執筆日は2015年3月27日（金）なので、「2015」が取得されました。
プロパティ2. getMonth()+1（現時点での月を取得する）
年代に続けて、次は現時点での月の値を取得します。ここで気をつけてほしいのが、getMonthメソッドでは1月が0、2月が1といった具合に、1つ下にずれた数字が取得されます。
そのため、1を足してこのように記述する必要があります。
<script>
var today = new Date();
console.log(today.getMonth() + 1);
</script>
記事執筆日は2015年3月27日（金）なので、「3」が取得されました。
プロパティ3. getDate()（現時点での日を取得する）
getDate()で現時点での日付の値を取得します。getMonthでは1足す必要がありましたが、getDateでは1日なら1、31日なら31が取得されるので、そのままで大丈夫です。
<script>
var today = new Date();
console.log(today.getDate());
</script>
記事執筆日は2015年3月27日（金）なので、「27」が取得されました。
プロパティ4. getDay() （現時点での曜日を取得する）
最後は、現時点での曜日の値を取得します。日曜日からはじまり、日曜日が0、月曜日が1といった具合に、0〜6の数字が取得されます。
<script>
var today = new Date();
console.log(today.getDay());
</script>
記事執筆日は2015年3月27日（金）なので、「5」が取得されました。
5. 最後に（現時点での年・月・日・曜日を一気に取得する）
最後に、以上の4つのプロパティ合わせて呼び出してみましょう。
<script>
var today = new Date();
console.log(today.getFullYear() + "/" + today.getMonth() + 1 + "/"+ today.getDate() + "/" + today.getDay());
</script>
ちゃんと現在の日時が取得出来ていますね！
そうそう。デフォルトでは現在の日付・日時を取得できるんだよ。
カレンダーみたいなものも作れるんですか？
タイムスタンプや他のメソッドを使うと作れるよ。カレンダーとかの考え方っていうのは、他のプログラミング言語でも共通しているので覚えておきたいね！
その他の使い方
ここまで、現在の年月日曜日を取得してきました。
この他に、Dateオブジェクトを使用すると現在時刻を時分秒単位で取得することができます。
それでは実際のコードとともに表示していきましょう。
今回は、JavaScriptをデベロッパーツールを使用して実行してみます。
デベロッパーツールの使い方についてはこちらの記事を参考にしてみてください。
時の表示
Dateオブジェクトの時刻データの中から時間を取得します。
今回は現在時が10時だったので、結果は10と表示されます。
JavaScriptコード
var today = new Date(); today.getHours();
表示結果
分の表示
Dateオブジェクトの時刻データの中から分を取得します。
今回は現在分数が3分だったので、結果は3と表示されます。
JavaScriptコード
var today = new Date();
today.getMinutes();
表示結果
秒の表示
Dateオブジェクトの時刻データの中から秒を取得します。
今回は現在秒数が2秒だったので、結果は2と表示されます。
JavaScriptコード
var today = new Date();
today.getSeconds();
表示結果
ゼロパディング表示
ゼロパディングというのは、2018年1月1日というデータをDateオブジェクトで取得した場合に、2018年01月01日という様に表示するために、先頭に0を入れることです。
今回は現在時刻に対してゼロパディングを行ってみます。
まずは、ゼロパディングを行わないで実行してみます。
JavaScriptコード
var today = new Date(); today.getHours() + "時" + today.getMinutes() + "分" + today.getSeconds() + "秒";
表示結果
次にゼロパディング処理をした場合です。
秒数に対してゼロパディング処理をします。
実際の変更部分は
(‘0’ +today.getSeconds()).slice(-2)
の部分です。
先程は10時5分48秒でしたが、時間は刻一刻と進んでいるため、今回は10時13分8秒に対してゼロパディング処理を行った結果が、表示結果として表示されます。
JavaScriptコード
var today = new Date();
today.getHours() + "時" + today.getMinutes() + "分" + ('0' +today.getSeconds()).slice(-2) + "秒";
表示結果
JavaScriptの組み込み関数の1つ、Dateオブジェクトを使って日付を表示する方法については以上です。
JavaScriptのwindow.openメソッドの使い方についても説明しているので、合わせてご覧ください。
この記事を監修してくれた方
| 中本賢吾（なかもとけんご） アジマッチ有限会社 代表取締役社長 開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバーでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。 ボランティア活動：小学生がオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がSNS型PWAアプリリリースする市クラブ講座活動を行っている。 |
[お知らせ]TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）を開催しています。プログラミングの初心者でも受講可能です。
