JavaScriptでDateオブジェクトを使って日付を表示する方法【初心者向け】

プログラミング初心者向けに、JavaScriptの組み込み関数の1つ【Dateオブジェクト】を使って日付を表示する方法を初心者向けに解説した記事です。年・月・日・曜日など簡単に出力することができます。【サンプルコードあり】

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptをプログラミング初心者向けに紹介した記事です。

今回は、JavaScriptの組み込み関数の1つ、Dateオブジェクトを使って日付を表示する方法について解説します。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

目次

 

 

組み込み関数のDateオブジェクトとは

組み込み関数とは、JavaScrip側であらかじめ用意してくれているオブジェクトのことです。Dateオブジェクトは、組み込み関数の1つで、日付を扱う際に使います。

 

参考までに、組み込み関数の代表的なものには次のようなものがあります。

 

<組み込み関数(代表的なもの)>

  • String 文字列を扱う
  • Number 数値を扱う
  • Boolean 論理値を扱う
  • Array 配列を扱う
  • Date 日付を扱う
  • Math 数値計算で扱う

 

はじめから関数の内容が決まっているので、こちらで定義する手間もなく、実行するだけ。非常に便利なので重宝します。

組み込みオブジェクトを使う場合、newを使って次のようにオブジェクトを生成します。

var オブジェクト名= new object(); 

 

大石ゆかり

田島メンター!日付を扱うにはどうしたらいいでしょうか?

田島悠介

Dateオブジェクトっていう組み込みオブジェクトが用意されているので、それを使うといいね。

大石ゆかり

日付を処理する関数は最初から用意されてるんですね。

田島悠介

他のプログラミング言語でもそうなんだよ。さっそくDateオブジェクトについて見てみよう!

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

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()(現時点での年を取得する)

オブジェクトのプロパティを呼び出すやり方の確認です。

変数名に「.」で続けてプロパティ名を入れると、プロパティの値を呼び出すことができます。

 

現時点での年代の値を取得したいときは、getFullYear() を使ってこのように書きます。

<script>
  var today = new Date();
  console.log(today.getFullYear());
</script>

2015記事執筆日は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>

3

記事執筆日は2015年3月27日(金)なので、「3」が取得されました。

 

 

プロパティ3. getDate()(現時点での日を取得する)

getDate()で現時点での日付の値を取得します。getMonthでは1足す必要がありましたが、getDateでは1日なら1、31日なら31が取得されるので、そのままで大丈夫です。

<script>
  var today = new Date();
  console.log(today.getDate());
</script>

27

記事執筆日は2015年3月27日(金)なので、「27」が取得されました。

 

 

プロパティ4. getDay() (現時点での曜日を取得する)

最後は、現時点での曜日の値を取得します。日曜日からはじまり、日曜日が0、月曜日が1といった具合に、0〜6の数字が取得されます

<script>
  var today = new Date();
  console.log(today.getDay());
</script>

5

記事執筆日は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メソッドの使い方についても説明しているので、合わせてご覧ください。

 

[お知らせ]TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。プログラミングの初心者でも受講可能です。