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>
ちゃんと現在の日時が取得出来ていますね！
そうそう。デフォルトでは現在の日付・日時を取得できるんだよ。
カレンダーみたいなものも作れるんですか？
タイムスタンプや他のメソッドを使うと作れるよ。カレンダーとかの考え方っていうのは、他のプログラミング言語でも共通しているので覚えておきたいね！
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
その他の使い方
ここまで、現在の年月日曜日を取得してきました。
この他に、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講座）を開催しています。プログラミングの初心者でも受講可能です。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
