DanLevy.net

クイズ：JavaScript Date 14問

JSトリビアでパーティーを盛り上げよう！✨

Hero image for クイズ：JavaScript Date 14問

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

概要

JavaScriptのDateクラスは、悪名高いほど扱いづらいAPIを持つ。これはJavaから継承されたもので、たぶん古代新石器時代の時間計測方法に触発されたとしか思えない。

Dateを扱う苦労から、多くの開発者は何の疑問も持たずにサードパーティライブラリを使うようになる。多くの場合それは安全で信頼できる選択だが、日付のフォーマットやローカライゼーションにこれらのライブラリが必要になることはほとんどない。

このクイズは、ネイティブのDate APIに関する知識を試し、深めるために作られている。ヒントや解説が必要なときは緑色のボタンを使おう！このチャレンジを終える頃には、JavaScriptのDateに対する理解が確かなものになっているはずだ。

注: すべての例はGMT-7のローカルタイムゾーンを想定しています。

👇 以下の14問 👇

1. 

日付の扱い

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

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

月の引数は0から始まります。西暦では0〜11の範囲です。

‘2月’ のインデックス値は1です（配列のルックアップと考えてください）。

2. 

日付の扱い

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

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

月の引数はゼロベースです。範囲は0〜11（西暦を使用）。

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

3. 

日付の操作

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

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

newキーワードを忘れないでください！Dateはクラスなので、newを付けて呼び出す必要があります。

newなしのDate('...')は引数を無視します。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 時刻値のない文字列は一見 2020年1月1日のように見えますが、日付のみの文字列はUTCとして解釈され、現地のタイムゾーン（GMT-7）に調整すると2019年のままであることがわかります。

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

T00:00 形式の場合、2番目の値は現地の真夜中として解釈されます。

1番目の日付は 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() はミリ秒単位の整数を返し、日付インスタンスではないからです。

8. 

日付の扱い

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

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

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

9. 

日付の扱い方

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

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

Dateの値は暗黙的にローカルタイムで表示され、（実質的に）変化しない.getTimezoneOffset()を持ちます。

Dateインスタンスはタイムゾーンデータを保存しません。Unixエポック（1970年1月1日）からのミリ秒数を保存します。タイムゾーンは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)

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

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

12. 

日付の取り扱い

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

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

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

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() method sets the month of the given date instance.

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() メソッドは、指定された日付インスタンスの月を設定します。

月の引数は0から始まり、0〜11の範囲です（西洋の暦を使用）。

ここでは、月と年が2019年12月に戻っています。これは、setMonth(-1) が0（1月）より小さいためです。

Loading comments...