JavaScriptで日付を扱う際、表示形式を自由にカスタマイズできると便利です。
この記事では、年月日、曜日、時刻など、様々な要素を組み合わせて、思い通りの日付形式を作成する方法を解説しています。
デフォルトの結果（細かすぎる。そのまま使えない）
Date型（日付）のデータを出力すると、年月日だけでなく時間などの細かいデータも出力されます。
let date = new Date(2025, 3, 1, 2, 2, 2);
console.log(date);
//出力結果
//2025-04-01T02:02:02.000Z※JavaScriptでは月が0から始まるため、出力時は１ずれます。（例: 3を入力すると、4月になる）
また、スプレッドシートで取得した日付データなどの場合、以下のように出力されることもあります。
Sun Oct 06 2024 00:00:00 GMT+0900 (Japan Standard Time)ただ、このデータをそのまま外に出すことはほとんどなく、出力したい場合はフォーマットを整える必要があります。
古いやり方
昔はgetFullYearやgetMonthなどのメソッドを使って、一つ一つのデータを取得し、欲しい形でつなげ合わせるという面倒な方法を使っていました。
| メソッド | 取得内容 |
|---|---|
| getFullYear() | 年 |
| getMonth() | 月（0 起点） |
| getDate() | 日 |
| getHours() | 時 |
| getMinutes() | 分 |
| getSeconds() | 秒 |
| getMilliseconds() | ミリ秒 |
| getDay() | 曜日を0〜6の値で取得（日曜日が起点） |
しかも、取得したデータを2桁表示にするにはpadStartで空いている桁を0で埋めるといったことまでしなければいけませんでした。
const date = new Date(2025, 9 - 1, 3, 8, 24, 9, 66);
const year = date.getFullYear().toString().padStart(4, '0');
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0');
const dateOutput = year + '年' + month + '月' + day + '日';
console.log(dateOutput); //2025年09月03日
今ではこんな面倒なことをする必要はありません。
toLocaleDateStringという便利なメソッドを使えば、欲しいフォーマットを簡単に作成することができます。
toLocaleDateString(‘sv-SE’)｜yyyy-mm-dd
単純に「年月日さえわかればいい」という用途であれば次のメソッドが一番早いです。
toLocaleDateString('sv-SE')「sv-SE」はスウェーデンのロケールを指定します。これにより、日付の表示形式がスウェーデン語の形式になります。
これが便利なことに「yyyy-mm-dd」と、日本と同じ形になっています。
実例
let date = new Date(2025, 3, 1, 2, 2, 2);
console.log(date.toLocaleDateString('sv-SE'));
//出力
//2025-04-01toLocaleDateString(‘ja-JP’)｜yyyy/m/d
2桁表示ではなく「1桁表示の年月日が手軽に欲しい」という場合は、「ja-JP」を使います。
toLocaleDateString('ja-JP')
これを使うと「yyyy/m/d」の日付を返してくれます。
実例
let date = new Date(2025, 3, 1, 2, 2, 2);
console.log(date.toLocaleDateString('ja-JP'));
//出力
//2025/4/1スプレッドシートの場合
年月日 時分秒｜toLocaleString(‘ja-JP’) yyyy/m/d h:mm:ss
new Dateで日付を生成した場合は上記の方法で年月日を取得することができます。
ですが、スプレッドシートの日付が入ったセルを取得した場合は、toLocaleString('ja-JP')を使うと、時分秒も出力されます。
let date = sheet.getRange('AT18').getValue();
console.log(date);
//Sun Oct 06 2024 00:00:00 GMT+0900 (Japan Standard Time)
console.log(date.toLocaleString('ja-JP'));
//2024/10/6 0:00:00年月日のみ取得する｜オプションを使う
年月日のみ取得したい場合は、toLocaleStringの第2引数のオプションの部分で、年月日のみを指定します。
.toLocaleString('ja-JP', { year: 'numeric', month: 'numeric', day: 'numeric' }
こうすることで「yyyy/m/d」が返ります。
実例
let date = sheet.getRange('AT18').getValue();
console.log(date.toLocaleString('ja-JP', { year: 'numeric', month: 'numeric', day: 'numeric' }));
//出力
//2024/10/6スプレッドシートで日付データのフォーマットを調整する場合はoptionで指定する。（optionは普通のJavaScriptの new Dateでも同じように使えます。）
年月日（漢字）が欲しい場合｜yyyy年m月d日
各単位を「年月日」という感じで表示したい場合は、monthの値で「short」または「long」を指定します。
.toLocaleString('ja-JP', { year: 'numeric', month: 'long', day: 'numeric'})実例
let date = new Date(2025, 3, 1, 2, 2, 2);
console.log(date.toLocaleString('ja-JP', { year: 'numeric', month: 'long', day: 'numeric'}));
//2025年4月1日
console.log(date.toLocaleString('ja-JP', { year: 'numeric', month: 'short', day: 'numeric'}));
//2025年4月1日monthの値を「short」にしても「long」にしても結果は同じです。
年月日を2桁表示にする｜ yyyy/mm/dd（2-digit）
月日を２桁表示にしたい場合はオプションの値で「2-digit」を指定します。
.toLocaleString('ja-JP', { year: 'numeric', month: '2-digit', day: '2-digit'})※年も2桁表示「yy」にしたい場合はyear: '2-digit'とします。
実例
let date = new Date(2025, 3, 1, 2, 2, 2);
console.log(date.toLocaleString('ja-JP', { year: 'numeric', month: '2-digit', day: '2-digit'}));
//2025/04/01
console.log(date.toLocaleString('ja-JP', { year: '2-digit', month: '2-digit', day: '2-digit'}));
//25/04/01曜日も欲しい場合｜weekday
曜日も取得したい場合はオプションでweekdayを使います。値は「short」と「long」が使えます。それぞれで出力結果が異なります。
| オプション | 出力 |
|---|---|
| weekday: ‘short’ | (火) |
| weekday: ‘long’ | 火曜日 |
実例
let date = new Date(2025, 3, 1, 2, 2, 2);
console.log(date.toLocaleString('ja-JP', { year: 'numeric', month: '2-digit', day: '2-digit', weekday: 'short'}));
//2025/04/01(火)
console.log(date.toLocaleString('ja-JP', { year: 'numeric', month: 'short', day: 'numeric', weekday: 'long'}));
//2025年4月1日火曜日時分秒が欲しい場合｜hour, minute, second
時分秒あるいはそれぞれのいずれかが欲しい場合は「hour」「minute」「second」を使います。
値は「numeric」または「2-digit」が指定できます。
.toLocaleString('ja-JP', { hour: 'numeric', minute: 'numeric', second: 'numeric' })
.toLocaleString('ja-JP', { hour: '2-digit', minute: '2-digit', second: '2-digit' })実例
let date = new Date(2025, 3, 1, 2, 2, 2);
console.log(date.toLocaleString('ja-JP', { hour: 'numeric', minute: 'numeric', second: 'numeric' }));
//2:02:02
console.log(date.toLocaleString('ja-JP', { hour: '2-digit', minute: '2-digit', second: '2-digit' }));
//02:02:02どれか1つのみ欲しい場合
年月日のうち「年」だけ欲しい、時分秒のうち「分」だけ欲しいといった場合は、オプションで欲しいものだけを指定します。
例えば、年（yyyy年）を取得したい場合は以下のようになります。
.toLocaleString('ja-JP', { year: 'numeric'})実例
let date = new Date(2025, 3, 1, 2, 2, 2);
console.log(date.toLocaleString('ja-JP', { year: 'numeric'}));
//2025年オプションの一覧（Date型で使用可能）
Date型で使用可能なオプションと値の一覧は下記のようになっています。欲しいものを組み合わせることで望んだデータを簡単に取得することができます。
year: 年の表示形式
- ‘numeric’: 西暦4桁 (例: 2023)
- ‘2-digit’: 西暦2桁 (例: 23)
month: 月の表示形式
- ‘numeric’: 数字 (1-12)
- ‘2-digit’: 2桁の数字 (01-12)
- ‘long’: 月の名前 (例: 1月)
- ‘short’: 月の略称 (例: 1月)
day: 日の表示形式
- ‘numeric’: 数字 (1-31)
- ‘2-digit’: 2桁の数字 (01-31)
weekday: 曜日の表示形式
- ‘long’: 曜日の名前 (例: 月曜日)
- ‘short’: 曜日の略称 (例: 月)
hour: 時の表示形式
- ‘numeric’: 数字 (0-23)
- ‘2-digit’: 2桁の数字 (00-23)
minute: 分の表示形式
- ‘numeric’: 数字 (0-59)
- ‘2-digit’: 2桁の数字 (00-59)
second: 秒の表示形式
- ‘numeric’: 数字 (0-59)
- 2-digit: 2桁の数字 (00-59)
timeZoneName: タイムゾーン名の表示形式
- ‘short’: 短縮名 (例: JST)
- ‘long’: 長い名前 (例: 日本標準時)
const date = new Date();
// 年月日を日本語で表示
console.log(date.toLocaleString('ja-JP', { year: 'numeric', month: 'long', day: 'numeric' }));
// 例: 2023年11月21日
// 時分秒を24時間形式で表示
console.log(date.toLocaleString('ja-JP', { hour: '2-digit', minute: '2-digit', second: '2-digit' }));
// 例: 15:30:25
// 曜日とタイムゾーンを表示
console.log(date.toLocaleString('ja-JP', { weekday: 'long', timeZoneName: 'short' }));
// 例: 月曜日 JST
