日付をフォーマットする
toLocaleDateString のオプションを使って日付を表示します。
「日付をフォーマットする」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
日付を整形する
JavaScript には、ロケールに対応した出力から標準化された ISO 文字列まで、日付を読みやすいテキストに変換する組み込みメソッドが複数あります。
const d = new Date(Date.UTC(2024, 0, 15))
console.log(d.toISOString())toISOString
toISOString は UTC の標準化された文字列を返します。曖昧さがないため、保存やデータ交換に最適です。
const d = new Date(Date.UTC(2024, 0, 15, 10, 30, 0))
console.log(d.toISOString())ISO文字列を切り出す
ISO 文字列では日付が先頭に置かれるため、最初の10文字を切り出すとカレンダー上の日付だけを取得できます。
const d = new Date(Date.UTC(2024, 0, 15))
console.log(d.toISOString().slice(0, 10))toLocaleDateString
toLocaleDateString はロケールを使って日付部分を整形し、地域に適した出力を生成します。
const d = new Date(Date.UTC(2024, 0, 15))
const text = d.toLocaleDateString("en-US", { timeZone: "UTC" })
console.log(typeof text)ロケール引数
最初の引数は en-US や de-DE のようなロケールタグです。これにより、整形された日付の順序や区切り文字が変わります。
const d = new Date(Date.UTC(2024, 0, 15))
const us = d.toLocaleDateString("en-US", { timeZone: "UTC" })
const iso = d.toISOString().slice(0, 10)
console.log(typeof us, iso)整形オプション
オプションオブジェクトを使うと、長い月名や数値の年など、それぞれの部分の表示方法を選べます。
const d = new Date(Date.UTC(2024, 0, 15))
const text = d.toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric", timeZone: "UTC" })
console.log(typeof text)toLocaleTimeString
toLocaleTimeString は時刻部分だけを整形します。ここでもロケールと指定したオプションが反映されます。
const d = new Date(Date.UTC(2024, 0, 15, 14, 5, 0))
const text = d.toLocaleTimeString("en-US", { timeZone: "UTC" })
console.log(typeof text)toLocaleString
toLocaleString は日付と時刻の両方を1つのローカライズされた文字列にまとめます。
const d = new Date(Date.UTC(2024, 0, 15, 9, 0, 0))
const text = d.toLocaleString("en-US", { timeZone: "UTC" })
console.log(typeof text)toDateString
toDateString はロケールオプションに対応せず、固定形式の人間が読みやすい英語の日付を返します。簡単なログ出力に便利です。
const d = new Date(Date.UTC(2024, 0, 15))
console.log(typeof d.toDateString())Intl.DateTimeFormat
繰り返し整形する場合は、Intl.DateTimeFormat で再利用可能なフォーマッターオブジェクトを作成できます。ロケール対応メソッドを何度も呼び出すより効率的です。
const fmt = new Intl.DateTimeFormat("en-US", { timeZone: "UTC", dateStyle: "medium" })
const d = new Date(Date.UTC(2024, 0, 15))
console.log(typeof fmt.format(d))形式を選ぶ
保存や API には ISO 文字列を使い、地域のユーザーへの表示にはロケール対応メソッドを使います。これらの用途は分けて考えてください。
const d = new Date(Date.UTC(2024, 0, 15))
console.log(d.toISOString().slice(0, 10))クイックチェック
日付の整形に関する知識を確認しましょう。
まとめ
まとめ: 目的に合った整形メソッドを選びましょう。
- 保存や API には toISOString を使います
- ユーザーへの表示には toLocaleDateString などを使います
- オプションで月名や数値の形式を制御できます
- 繰り返し整形する場合は Intl.DateTimeFormat が効率的です
const d = new Date(Date.UTC(2024, 0, 15))
console.log(d.toISOString().slice(0, 10))よくある質問
「日付をフォーマットする」レッスンは無料ですか？
はい。「日付をフォーマットする」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「日付をフォーマットする」で何を学びますか？
toLocaleDateString のオプションを使って日付を表示します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「日付をフォーマットする」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Date の作成と読み取り
- タイムスタンプと Date の計算
- 日付をフォーマットする
- タイムゾーンと UTC