DanLevy.net

クイズ: JavaScript Date の14問

パーティでJSトリビアを披露しよう！ ✨

Hero image for クイズ: JavaScript Date の14問

Date クラスについてどれだけ知っていますか？

アウトライン

JavaScript の Date クラスは、非常に扱いにくい API で知られています。Java から継承され、さらに古代の新石器時代の時間管理手法に影響されたとしか考えられません。

Date の扱いに苦労すると、多くの開発者は疑問を抱かずにサードパーティ製ライブラリへ手を伸ばします。安全で信頼できる選択肢であることが多いですが、日付のフォーマットやローカライズだけならほとんどの場合、ネイティブの Date で十分です。

このクイズは、ネイティブ Date API に関する知識をテストし（さらに深める）するために作られました。緑のボタンでヒントや解説を確認してください！チャレンジの最後までに、Date の扱いに自信が持てるようになるはずです。

NOTE: すべての例は GMT‑7 のローカルタイムゾーンを前提としています。

👇 以下 14 問 👇

1. 

日付の取り扱い

出力には何が含まれますか？

const d1 = new Date(2020, 1, 1)
console.log(d1)

Month 引数はゼロベースです。範囲は 0‑11（西暦カレンダー使用）。

「February」はインデックス値が 1 です。（配列の参照のように考えてください。）

2. 

日付の扱い

出力には何が含まれますか？

const d2 = new Date(2020, 0, 1)
console.log(d2)

Month 引数はゼロベースです。範囲は 0〜11（西暦カレンダーの場合）。

‘January’ はインデックスが 0 です。（配列の参照のように考えてください。）

3. 

日付の取り扱い

出力には何が含まれますか？

const d3 = Date('Thu, 01 Jan 1970 00:00:00 GMT')
console.log(d3)

new キーワードを忘れずに！ Date はクラスで、new で呼び出す必要があります。

Date('...') を new なしで使うと、渡した引数は無視されます。常に new Date()（引数なし）と同じく現在の日付と時刻を生成するように見えます。

これは よくある落とし穴 で、コードレビューでも 見落としやすい です。

4. 

日付の取り扱い

出力には何が含まれますか？

const date = new Date(2020)
console.log(date.getFullYear())

単一の整数引数で作成された Date インスタンスは Unix Epoch 値として解釈されます。Epoch は 1970年1月1日からのミリ秒数です。

2020 の値（ミリ秒）は 1970年1月1日から 2 秒後に相当します。

さらにローカルのタイムゾーンが -7 時間の負のオフセットであるため、結果は Wed Dec 31 1969 17:00:02 GMT-0700 (Mountain Standard Time) となります。

ローカルタイムゾーンのオフセットを回避したい場合は、.getUTCFullYear() を使用できます。

5. 

日付の取り扱い

コンソールに出力される値は何ですか？

const d1 = new Date('2020-01-01')
const d2 = new Date('2020-01-01T00:00')
console.log(d1.getFullYear(), d2.getFullYear())

T が付いていない文字列は Jan 1st, 2020 のように見えるかもしれませんが、日付だけの文字列は UTC として解釈され、ローカルタイムゾーン (GMT-7) に変換するとまだ 2019 年です。

明示的なタイムゾーンがない日時文字列はローカル時間として解釈されます。

T00:00 形式は2番目の値をローカルの真夜中として解釈させます。

最初の日付は Tue Dec 31 2019 17:00:00 GMT-0700 (Mountain Standard Time) と解釈されます。 2番目の日付は Wed Jan 01 2020 00:00:00 GMT-0700 (Mountain Standard Time) と解釈されます。

6. 

日付の取り扱い

誤ったフォーマット方法を選択してください:

toLocaleFormat() メソッドは標準ではありません！古いサードパーティライブラリ由来なので見覚えがあるかもしれません。

toLocaleDateString のドキュメント を確認してください。この挙動は Intl.DateTimeFormat に記載されています。

7. 

日付の取り扱い

出力には何が含まれますか？

var date = Date.UTC('2020-01-02T00:00')
console.log(date.toUTCString())

TypeError: date.toUTCString is not a function が発生します。Date.UTC() はミリ秒単位の整数を返し、Date インスタンスではありません。

8. 

日付の取り扱い

出力には何が含まれますか？

const d = Date.UTC(2020, 0, 1)
console.log(d)

ヘルパーメソッド Date.UTC は Date インスタンスを返しません。ミリ秒単位の整数を返します。

9. 

日付の取り扱い

出力には何が含まれますか？

// Assume local TZ is -07:00
const d = new Date(Date.UTC(2020, 0, 1))
console.log(d.getTimezoneOffset())

Date は暗黙的にローカル時間で表示され、（実質的に）変わらない .getTimezoneOffset() が使用されます。

Date インスタンスはタイムゾーン情報を保持しません。Unix エポック（Jan 1, 1970）からのミリ秒数を保持しています。タイムゾーンは Date 文字列の解析や表示時に考慮されます。デフォルトの表示動作はシステムまたはブラウザのロケール設定に基づいて自動的に決定されます。

10. 

日付の取り扱い

出力には何が含まれますか？

const d = new Date(2020, 0, 1)
d.setDate(1)
console.log(d)

The .setDate() メソッドは、対象インスタンスの現在の月を基準に月の日付を設定します。

利用可能な日数を超える値が与えられた場合、月が自動的に調整されます（例: 1月で setDate(32) を呼ぶと 2月1日になります）。

11. 

日付の取り扱い

出力には何が含まれますか？

const d = new Date(2020, 0, 1)
d.setMonth(1)
console.log(d)

The .setMonth() メソッドは、指定された日付インスタンスの月を設定します。

月の引数は0から始まり、範囲は0-11です（西暦カレンダーを使用）。

12. 

日付の扱い

出力には何が含まれますか？

const d = new Date(2020, 0, 1)
d.setMonth(12)
console.log(d)

.setMonth()[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setMonth] メソッドは、指定された Date インスタンスの月を設定します。

month 引数は 0 から始まり、0‑11 の 12 種類があります（西暦カレンダーを使用）。

ここでは setMonth(12) が 11（12月）より 1 多いため、年が 2021 に調整されます。

13. 

日付の扱い

出力には何が含まれますか？

const d = new Date(2020, 0, 1)
d.setMonth(13)
console.log(d)

The .setMonth() メソッドは、指定した Date インスタンスの月を設定します。

The month argument is zero-based, with a range of 0-11 (using western calendars.)

Here we see the month and year is adjusted to February 2021, because setMonth(13) is 2 more than 11 (December).

14. 

日付の取り扱い

出力には何が含まれますか？

const d = new Date(2020, 0, 1)
d.setMonth(-1)
console.log(d)

.setMonth() メソッドは、指定された Date インスタンスの月を設定します。

month 引数は0から始まり、範囲は0-11（西暦カレンダー使用）です。

ここでは month と year が 2019年12月に戻ります。setMonth(-1) は 0 未満（January）なのでです。

Loading comments...