カテゴリ: JavaScript 更新日: 2025/12/20

JavaScriptのDateオブジェクトから年・月・日を取得する方法を完全ガイド!初心者でもわかる基礎解説

JavaScriptのDateオブジェクトから年・月・日を取得する方法
JavaScriptのDateオブジェクトから年・月・日を取得する方法

先生と生徒の会話形式で理解しよう

生徒

「JavaScriptで今日の年とか月とか日だけを取り出す方法ってありますか?今の日時を表示する画面を作りたいんです。」

先生

「できるよ。JavaScriptには日付と時間を扱うためのDateオブジェクトが用意されていて、そこから簡単に年や月や日を取り出せるんだ。」

生徒

「日付を扱うって難しそうに聞こえますけど、初心者でも理解できますか?」

先生

「全然心配いらないよ。普段使っているカレンダーを思い出しながら進めていけば、とても理解しやすい仕組みなんだ。では順番に見ていこう。」

1. Dateオブジェクトとは?

1. Dateオブジェクトとは?
1. Dateオブジェクトとは?

JavaScriptで日付や時間を扱うときに必要なのがDateオブジェクトです。 パソコンやスマートフォンに内蔵されている時計の時刻を取得して、それをプログラムの中で使える形にしてくれるものです。 日付を計算するときや、画面に今日の日付を表示したいときに欠かせない存在で、多くのプログラムで活用されています。 初心者にとって大切なのは、Dateオブジェクトを使えば特別な設定をしなくても「現在の日時」をそのまま取り出せるということです。 難しい計算を自分でする必要はなく、用意された機能を呼び出すだけで、年・月・日などを簡単に取得できるので安心です。

2. 現在日時を取得する基本:new Date()

2. 現在日時を取得する基本:new Date()
2. 現在日時を取得する基本:new Date()

現在の日付を扱うために最初に覚えるべきなのが new Date() です。 このコードを実行すると、「今この瞬間の日時」が入った特別な箱のようなものが作られます。 この箱から年だけ取り出したり、月だけ取り出したり、いろいろな情報を取り出せるようになります。 まずは実際にDateオブジェクトを作る基本の書き方を見てみましょう。


const now = new Date();
console.log(now);

このコードを実行すると、現在日時がオブジェクトとして出力されます。 表示される形式は環境によって少し違いますが、年・月・日・時・分・秒まで含まれています。

3. 年を取得する方法:getFullYear()

3. 年を取得する方法:getFullYear()
3. 年を取得する方法:getFullYear()

年だけを取り出したいときには getFullYear() を使います。 これはDateオブジェクトの中から「西暦の年」をそのまま取り出すためのメソッドで、 例えば二〇二五年であれば二〇二五という数値が返ってきます。


const now = new Date();
console.log(now.getFullYear());

2025

このように非常にシンプルで、初心者でも覚えやすい構造になっています。 年を使って画面の見た目を変更したり、記録の分類に使ったりするときに便利です。

4. 月を取得する方法:getMonth()

4. 月を取得する方法:getMonth()
4. 月を取得する方法:getMonth()

月を取り出すときは getMonth() を使いますが、ひとつだけ注意点があります。 JavaScriptでは「一月が〇、二月が一」というように、月がゼロから始まる仕組みになっています。 これはコンピューター内部で扱う都合によるもので、初心者が最初に混乱しやすい部分です。 もし表示用に人間が理解しやすい形にしたい場合は、一を加える必要があります。


const now = new Date();
console.log(now.getMonth());
console.log(now.getMonth() + 1);

一を加えることで一般的なカレンダーの表記と同じ月を得ることができます。 この処理は非常によく使われるので、月を扱うときには常に意識しておきましょう。

5. 日を取得する方法:getDate()

5. 日を取得する方法:getDate()
5. 日を取得する方法:getDate()

日を取得する方法は非常に直感的で、getDate() を呼び出すだけです。 例えば一八日であれば一八という数値が返ってきます。 この値は人間のカレンダーと同じ形式で返されるので、月のように補正をする必要はありません。


const now = new Date();
console.log(now.getDate());

この機能を使えば「今日の日付を表示する」処理がとても簡単に実現できます。 画面上の日付表示だけでなく、登録日や更新日を保存するときにも活用できます。

6. 年・月・日を組み合わせた整形表示の例

6. 年・月・日を組み合わせた整形表示の例
6. 年・月・日を組み合わせた整形表示の例

年・月・日の三つを組み合わせれば、自分の好きな形式の表示を簡単に作ることができます。 よく使われるのは「YYYY/MM/DD」や「YYYY年MM月DD日」という形式で、Webサイトで広く利用されています。


const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1;
const day = now.getDate();

console.log(`${year}年${month}月${day}日`);

このように記述することで、人間が読みやすい形に整えることができます。 画面に今日の日付を表示する機能を作るときには欠かせない処理です。

カテゴリの一覧へ
新着記事
New1
TypeScript
TypeScriptでパスエイリアスを設定する方法!baseUrlとpathsでコードをスッキリ整理
New2
JavaScript
JavaScriptのfor文の書き方を初心者向けにやさしく解説
New3
JavaScript
JavaScriptの関数でよくあるエラーとその解決法まとめ
New4
JavaScript
JavaScriptのイベント処理でよくあるエラーとその対処法
人気記事
No.1
Java&Spring記事人気No1
JavaScript
JavaScriptのインストール方法まとめ!Windows・Mac・Linux別にステップ解説
No.2
Java&Spring記事人気No2
JavaScript
JavaScriptのマウスイベントの使い方(click, mouseoverなど)
No.3
Java&Spring記事人気No3
JavaScript
JavaScriptのtoStringとString関数の違いを初心者向けに解説
No.4
Java&Spring記事人気No4
JavaScript
JavaScriptの純粋関数(pure function)と副作用の違いを理解しよう
No.5
Java&Spring記事人気No5
JavaScript
JavaScriptプログラムの実行方法まとめ!ブラウザ・Node.js・コンソールの使い方
No.6
Java&Spring記事人気No6
JavaScript
JavaScriptで文字列をforループで1文字ずつ処理する方法!初心者向け解説
No.7
Java&Spring記事人気No7
TypeScript
TypeScript学習におすすめの無料教材・リファレンスサイト【初心者向け】
No.8
Java&Spring記事人気No8
JavaScript
JavaScriptのDOMContentLoadedとloadイベントの違いを理解しよう