JavaScriptで今日の日付と現在時刻、曜日を取得する方法【現役エンジニアが解説】

本記事を書いている僕は、エンジニア歴10年以上の現役エンジニアです。

現在はフリーランスエンジニアとしてシステム開発をしています。

僭越ながら先輩エンジニアとして、『JavaScriptで今日の日付と現在時刻、曜日を取得する方法』を紹介していきますのでよかったら最後までご覧ください。

JavaScriptで今日の日付と現在時刻、曜日を取得する方法

JavaScriptで今日の日付、現在時刻、および曜日を取得するには、Dateオブジェクトを使用します。

Dateオブジェクトを使用して今日の日付、現在時刻、曜日を取得する具体的なソースコードは以下の通り。

// 現在の日時を取得
var today = new Date();

// 今日の日付を取得 (日)
var dd = today.getDate();

// 今日の月を取得 (月)
var mm = today.getMonth() + 1; // 0月から11月までの数値が返るため、1を加算

// 今日の年を取得 (年)
var yyyy = today.getFullYear();

// 今日の曜日を取得 (曜日)
var dayOfWeek = today.getDay(); // 曜日は0日曜日から6土曜日までの数値が返る

// 現在時刻を取得 (時)
var hh = today.getHours();

// 現在時刻を取得 (分)
var mm = today.getMinutes();

// 現在時刻を取得 (秒)
var ss = today.getSeconds();

上記のコードでは、Dateオブジェクトを使用して、今日の日付、現在時刻、および曜日を取得しています。

取得する値によって以下のように呼び出すメソッドを使い分けます。

• getDate()メソッドで日付を取得
• getMonth()メソッドで月を取得
• getFullYear()メソッドで年を取得
• getDay()メソッドで曜日を取得
• getHours()メソッドで時間を取得
• getMinutes()メソッドで分を取得
• getSeconds()メソッドで秒を取得

取得した日付や時刻を使用するには、取得した値を変数に代入して使用するか、直接使用することができます。

例えば、今日の日付をyyyy/mm/dd形式で表示するには、以下のようにします。

console.log(yyyy + '/' + mm + '/' + dd); // 2022/12/17

また、現在時刻を表示するには、以下のようにします。

console.log(hh + ':' + mm + ':' + ss); // 17:27:56

曜日を表示する場合は、曜日を表す数値を文字列に変換してから表示する必要があります。

以下は、曜日を表示する例です。

var weekdays = ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'];
console.log(weekdays[dayOfWeek]); // 木曜日

曜日は0～6までの数値が返ってくるのが注意点です。

直感的には1～7が返ってくると思う人が多いでしょうから、間違えないようにしましょう。

サカイ

JavaScriptで今日の日付を操作する方法とポイント

JavaScriptで今日の日付を操作する方法とポイントをまとめてみました。

具体的には以下6つの方法で操作できます。

1．Dateオブジェクトを使用する

Dateオブジェクトを使用すると、現在の日時を取得できます。

また、日時をフォーマットしたり、日時を操作することができます。

2．getDate()メソッドを使用する

getDate()メソッドを使用すると、日付を取得できます。日付は1日から31日までの数値が返ります。

3．getMonth()メソッドを使用する

getMonth()メソッドを使用すると、月を取得できます。

月は0月から11月までの数値が返ります。

1月は0、2月は1、3月は2となるので、1を加算して表示することをお忘れなく。

サカイ

4．getFullYear()メソッドを使用する

getFullYear()メソッドを使用すると、年を取得できます。

年は4桁の数値が返ります。

5．日付をフォーマットする

日付をyyyy/mm/dd形式や、mm/dd/yyyy形式などにフォーマットすることができます。

文字列操作や、Date.prototype.toLocaleDateString()メソッドを使用することで実現可能です。

6．日付を操作する

日付を加算や減算することができます。

Date.prototype.setDate()メソッド、Date.prototype.setMonth()メソッドなどを使用することで操作可能です。

【実践編】JavaScriptで今日の日付を使ったカレンダーを作成する方法

ここまではJavaScriptで単純に日付を取得する方法をお伝えしてきましたので、実践的な内容に入ってみましょう。

サカイ

テーマは『JavaScriptで今日の日付を使ったカレンダーを作成する』！！

日付操作を応用して、カレンダーを表示するためには以下のようなコードで実現できます。

<!-- HTMLのマークアップ -->
<table>
  <thead>
    <tr>
      <th>日</th>
      <th>月</th>
      <th>火</th>
      <th>水</th>
      <th>木</th>
      <th>金</th>
      <th>土</th>
    </tr>
  </thead>
  <tbody id="calendar-body">
    <!-- カレンダーの日付を表示するためのセルがここに配置される -->
  </tbody>
</table>

// JavaScript

// 現在の日時を取得
var today = new Date();

// 今日の日付を取得
var dd = today.getDate();

// 今日の月を取得
var mm = today.getMonth() + 1; // 0月から11月までの数値が返るため、1を加算

// 今日の年を取得
var yyyy = today.getFullYear();

// 今月の月末を取得
var lastDay = new Date(yyyy, mm, 0).getDate();

// カレンダーの日付を設定するための変数
var calendarHtml = '';

// 初週フラグ（初週のみ開始位置を設定するため）
var firstWeekFlg = true;

// カレンダーの日付を設定
for (var i = 1; i <= lastDay; i++) {
  // 曜日を取得
  var dayOfWeek = new Date(yyyy, mm - 1, i).getDay(); // 曜日は0日曜日から6土曜日までの数値が返る
  // 日曜日から土曜日までを表示するために、日曜日を0、土曜日を6とする
  if (dayOfWeek === 0) {
    dayOfWeek = 6;
  } else {
    dayOfWeek--;
  }

  // 初週のみ開始位置を設定する
  if (firstWeekFlg === true){
    for (var j = 1; j <= dayOfWeek; j++) {
      calendarHtml += '<td></td>';
    }
    firstWeekFlg = false;
  }

  // カレンダーに日付を追加
  calendarHtml += '<td>' + i + '</td>';

  // 土曜日の場合は、改行する
  if (dayOfWeek === 6) {
    calendarHtml += '</tr><tr>';
  }
}

// カレンダーを表示する
document.getElementById('calendar-body').innerHTML = '<tr>' + calendarHtml + '</tr>';

上記のコードでは、HTMLのマークアップで用意した’calendar-body’というIDを持つ要素に、設定したカレンダーの日付を表すHTMLを埋め込んでいます。

ソースコードだけでは分かりにくいと思いますので、手順をかんたんに解説していきます。

1．HTMLのマークアップを準備する

HTMLファイルの任意の位置に、HTMLのマークアップとしてカレンダーを表示するためのテーブルや、日付を表示するためのセルを用意します。

2．JavaScriptで日付を取得する

JavaScriptで今日の日付を取得するには、Dateオブジェクトを使用します。

Dateオブジェクトを使用すると、現在の日時を取得できます。

3．カレンダーの日付を設定する

取得した日付をもとに、カレンダーの日付を設定します。

このとき、カレンダーの日付は、1日から月末までの日付を表示する必要があります。

4．カレンダーを表示する

HTMLのマークアップと、カレンダーの日付を設定したデータを組み合わせて、カレンダーを表示します。

HTMLファイル（拡張子.html）内にHTMLのマークアップを挿入して、そのHTMLファイルからJavaScriptファイル（拡張子.js）を呼び出すようにしましょう。

5．動作確認する

作ったHTMLファイルを任意のブラウザで表示してみましょう。

今回はGoogle Cromeを使って表示してみました。

実際に動かしてみた画面がこちら。

スタイルシート（CSS）は設定してないので白黒のシンプルな表示ですが、うまくカレンダー表示ができました。

サカイ

JavaScriptで今日の日付を扱うトラブルシューティング

JavaScriptで今日の日付を扱う際に、よく発生するトラブルとその対処法を以下に示します。

日付を扱う際にトラブルが発生した場合は、下記の対処法を参考にして、問題を解決してみましょう。

1．日付が間違っている

Dateオブジェクトを使用して日付を取得している場合、カレンダーを表示する際に日付が間違っていることがあります。

このような場合は、Dateオブジェクトを使用するコードを確認して、問題があるかどうかを確認します。

また、PCやサーバーの日時設定が正しくない場合にも、日付が間違っていることがありますので、日時設定も確認してみましょう。

2．曜日が間違っている

カレンダーを表示する際に、曜日が間違っていることがあります。

このような場合は、曜日を取得するコードを確認して、問題があるかどうかを確認します。

日曜日から土曜日までを表示する場合は、日曜日を0、土曜日を6とするように注意します。

3．フォーマットが間違っている

日付をフォーマットする際に、フォーマットが間違っていることがあります。

このような場合は、日付をフォーマットするコードを確認して、問題があるかどうかを確認します。

また、日付をフォーマットする際には、地域や言語によって異なるフォーマットがあることに注意しましょう。

4．日付を操作すると不正な値になる

日付を操作する際に、不正な値になることがあります。

このような場合は、日付を操作するコードを確認して、問題があるかどうかを確認します。

また、日付を操作する際には、月末や年末を超える値になることもあるため、その点も注意しましょう。

5．表示される日付が期待と異なる

カレンダーを表示する際に、表示される日付が期待と異なることがあります。

このような場合は、カレンダーを表示するコードを確認して、問題があるかどうかを確認します。

また、日付を取得する際に、月や年を正しく取得できているかを確認しましょう。

JavaScriptで今日の日付を使った条件分岐の例

JavaScriptで今日の日付を使った条件分岐の例を以下に示します。

// 現在の日時を取得
var today = new Date();

// 今日の日付を取得
var dd = today.getDate();

// 今日の月を取得
var mm = today.getMonth() + 1; // 0月から11月までの数値が返るため、1を加算

// 今日の年を取得
var yyyy = today.getFullYear();

// 今日が12月かどうかを判定
if (mm === 12) {
  // 12月の場合
  console.log('今日は12月です');
} else {
  // 12月以外の場合
  console.log('今日は12月ではありません');
}

// 今日が平日かどうかを判定
if (today.getDay() >= 1 && today.getDay() <= 5) {
  // 平日の場合
  console.log('今日は平日です');
} else {
  // 土日祝日の場合
  console.log('今日は土日祝日です');
}

上記のコードでは、今日の月を取得し、12月であるかどうかを判定しています。

また、今日の曜日を取得し、平日であるかどうかを判定しています。

他にも、今日の日付を使った条件分岐はさまざまな方法で実現ができます。

取得した日付を使用して、必要に応じて条件分岐を記述してみましょう。

まとめ【JavaScriptの日付操作をマスターしよう】

今回は、『JavaScriptで今日の日付と現在時刻、曜日を取得する方法【現役エンジニアが解説】』というテーマでお話してきました。

プログラミング学習をイチからやると習得するまではとても長く感じますし、はじめは特に難しくて挫折しそうにもなるでしょう。

しかし、毎日一歩ずつ学習を積み重ねれば確実にスキルアップしていきます。

本記事で紹介したことが、JavaScriptを勉強している方に参考となっていたらうれしい限りです。

以上となります。