基本情報
料金
期間
転職サポート
講師
  料金 分割払い リンク
テックアカデミーロゴ 119,900円〜
※給付金制度あり
月々約4,996円〜 公式
評判
DMM WEBCAMPロゴ 169,800円~
※給付金制度あり
月々約7,075円〜 公式
評判
デイトラロゴ 99,800円 月々約4,159円〜 公式
評判
侍エンジニアロゴ 165,000円~
※侍テラコヤは月額2,980円~
月々約6,875円〜 公式
評判
テックキャンプロゴ 657,800円~
※給付金制度あり
月々約27,409円〜 公式
評判
ディープロロゴ 797,800円
※給付金制度あり
月々約33,242円〜 公式
評判
ポテパンキャンプロゴ 440,000円
※全額返金保証あり
月々約18,334円〜 公式
評判
  期間 リンク
テックアカデミーロゴ 4~16週間 公式
評判
DMM WEBCAMPロゴ 4~24週間 公式
評判
デイトラロゴ 90日間 公式
評判
侍エンジニアロゴ 4~48週間 公式
評判
テックキャンプロゴ 最短10週間 公式
評判
ディープロロゴ 4ヶ月 公式
評判
ポテパンキャンプロゴ 5ヶ月 公式
評判
  転職サポート リンク
テックアカデミーロゴ 公式
評判
DMM WEBCAMPロゴ 公式
評判
デイトラロゴ × 公式
評判
侍エンジニアロゴ 公式
評判
テックキャンプロゴ 公式
評判
ディープロロゴ 〇(10ヶ月間) 公式
評判
ポテパンキャンプロゴ 公式
評判
  講師 リンク
テックアカデミーロゴ 全員が実務経験3年以上の現役エンジニア 公式
評判
DMM WEBCAMPロゴ 実務経験豊富な現役エンジニア 公式
評判
デイトラロゴ 現役で活躍するプロ講師 公式
評判
侍エンジニアロゴ 一人の現役エンジニアが卒業までサポート 公式
評判
テックキャンプロゴ 未経験者にプログラミングを教えるプロ 公式
評判
ディープロロゴ 実務経験豊富なプロ講師 公式
評判
ポテパンキャンプロゴ 経験豊富な現役エンジニア 公式
評判

IT

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

 

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

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

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

 

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今日の日付を操作する方法とポイント

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

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

日付を操作する方法

  1. Dateオブジェクトを使用する
  2. getDate()メソッドを使用する
  3. getMonth()メソッドを使用する
  4. getFullYear()メソッドを使用する
  5. 日付をフォーマットする
  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で単純に日付を取得する方法をお伝えしてきましたので、実践的な内容に入ってみましょう。

サカイ

 

テーマは『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を使って表示してみました。

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

Javascriptで作ったカレンダー表示

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

サカイ

 

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

JavasScript日付に関するトラブルシューティング

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

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

 

1.日付が間違っている

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

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

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

 

2.曜日が間違っている

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

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

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

 

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

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

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

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

 

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

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

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

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

 

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

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

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

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

 

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

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を勉強している方に参考となっていたらうれしい限りです。

 

JavaScriptを使って副業をはじめたいならテックアカデミーがおすすめ!

フロントエンド副業セットを利用すればスキル習得~案件獲得までサポートしてくれますよ。

>>フロントエンド副業セットについて詳しく知りたい

以上となります。

スクール選びに迷ったらテックアカデミー!

テックアカデミーは、料金や講師の質、転職サポート、これまでの実績など総合的にもっともオススメできるプログラミングスクールです。

現役エンジニアとして10年以上プログラミングやシステム開発に携わった経験、メディア運営者としてプログラミングスクール30社以上比較・レビューしてきた経験から自信を持って推奨します。

強いてデメリットを挙げるとしたら『オンライン対応のみ』ってことくらい。

「オフラインで直接指導を受けたい」といった方以外はテックアカデミーを選んでおけば間違いありません!

受講前に無料相談を受けることもできるので、「初心者でも大丈夫か?」「副業で稼げるのか?」といった疑問にもしっかり答えてもらえますよ。

テックアカデミー公式サイトを見る

  • この記事を書いた人

サカイユウヤ

プログラミングスクール選びに迷ってる方に向けて、ベストな選択ができるようにサポートをしてます。 【経歴】1986年生まれ ▶ 茨城県出身▶ 大学で福島県へ▶ 就職で東京▶ 某SIer企業で丸7年正社員として勤務▶ 独立してフリーランスエンジニア ● 2020年7月ブログスタート ● エンジニア歴13年(内フリーランス歴6年) ●プログラミングスクール30社以上見てきた経験から、初心者におすすめできるスクールを掲載中

-IT

© 2020 初心者向けプログラミングスクールおすすめサイト|さかこじぶろぐ

プログラミングスクールの最新キャンペーン・割引情報をまとめました。損したくない人必見!
お得にプログラミングを学ぶ
お得なキャンペーン情報を見る