WEBVTT

1
00:00:00.000 --> 00:00:00.986
こんにちは。

2
00:00:00.986 --> 00:00:05.097
今回はジャバスクリプトのデート・ナウを紹介します。

3
00:00:05.097 --> 00:00:09.700
これは、今の時刻を数値で受け取るための静的メソッドです。

4
00:00:09.700 --> 00:00:16.112
戻り値は、千九百七十年一月一日、協定世界時の午前零時から数えた経過ミリ秒です。

5
00:00:16.112 --> 00:00:20.880
日時の見た目ではなく、ただの大きな数値が返る点が特徴です。

6
00:00:20.880 --> 00:00:27.621
そのため、更新時刻を記録したり、二つの時刻の差を計算したりする場面に向いています。

7
00:00:27.621 --> 00:00:32.800
この動画では、引数と戻り値、記事の基本例、エポックからの数え方、そして精密な測定に向かない理由まで、

8
00:00:32.800 --> 00:00:37.979
実行結果と一緒に学びます。

9
00:00:37.979 --> 00:00:45.049
時刻を数値として扱う考え方を最初に押さえておくと、後の例がすべて理解しやすくなります。

10
00:00:45.049 --> 00:00:46.661
まず動作環境を確認します。

11
00:00:46.661 --> 00:00:51.374
このメソッドはとても古くからある機能で、クロームではバージョン一以降、ファイアーフォックスでは一以降、

12
00:00:51.374 --> 00:00:56.087
サファリでは四以降、エッジでは十二以降で使えます。

13
00:00:56.087 --> 00:01:00.056
ノード・ジェイエスでも、ゼロ・一ゼロ・ゼロ以降で対応しています。

14
00:01:00.056 --> 00:01:06.877
記事の互換性情報は、エムディーエヌのデータに基づく目安で、すべての環境で実機検証したという意味ではありません。

15
00:01:06.877 --> 00:01:11.962
追加のパッケージやインポートは必要なく、デートという名前からそのまま呼び出せます。

16
00:01:11.962 --> 00:01:16.179
ブラウザーのコンソールでも、ノードでファイルを実行しても、同じコードで試せるので、

17
00:01:16.179 --> 00:01:20.396
学習環境を選ばない点も初心者にはありがたいところです。

18
00:01:20.396 --> 00:01:22.532
引数と戻り値を確認します。

19
00:01:22.532 --> 00:01:27.627
書き方は、デートのあとにドットを書き、ナウとカッコを続けます。

20
00:01:27.627 --> 00:01:33.872
これは静的メソッドなので、ニューでデートオブジェクトを作る必要はありません。

21
00:01:33.872 --> 00:01:35.351
引数はありません。

22
00:01:35.351 --> 00:01:40.774
カッコの中に何か渡すのではなく、呼んだ瞬間の時刻が自動で返ります。

23
00:01:40.774 --> 00:01:44.061
戻り値は数値型で、小数点のない整数です。

24
00:01:44.061 --> 00:01:50.306
呼ぶたびに値が増えていくため、二回続けて呼んでも通常は同じ値にはなりません。

25
00:01:50.306 --> 00:01:59.016
対象の作り方、引数がないこと、戻り値が整数の数値であること、この三点を押さえれば使い方はほぼ理解できます。

26
00:01:59.016 --> 00:02:01.469
戻り値の数え方を読み解きます。

27
00:02:01.469 --> 00:02:07.685
起点は千九百七十年一月一日、協定世界時の午前零時で、この瞬間をゼロとします。

28
00:02:07.685 --> 00:02:13.736
そこから千ミリ秒進むごとに値が千ずつ増え、一秒で千、二秒で二千となります。

29
00:02:13.736 --> 00:02:23.223
実際に、ゼロをデートに変換すると起点そのものの日時になり、千を変換すると一秒後の日時になることを実機で確認済みです。

30
00:02:23.223 --> 00:02:25.513
単位は秒ではなくミリ秒です。

31
00:02:25.513 --> 00:02:29.765
ここを取り違えると、計算結果が千倍ずれてしまいます。

32
00:02:29.765 --> 00:02:36.635
今の時刻の値は、十桁をはるかに超える大きな整数になりますが、怖がる必要はありません。

33
00:02:36.635 --> 00:02:42.196
起点からの経過時間だと理解すれば、差を取る計算にもそのまま使えます。

34
00:02:42.196 --> 00:02:43.857
記事の基本例を見ます。

35
00:02:43.857 --> 00:02:49.294
まず、デート・ナウを呼んで、結果をタイムスタンプという変数に保存します。

36
00:02:49.294 --> 00:02:53.825
次に、その値が有限の数かどうかと、整数かどうかを確認します。

37
00:02:53.825 --> 00:02:59.865
実行結果はどちらもトゥルーで、記事の期待出力とノードの実機結果が一致しています。

38
00:02:59.865 --> 00:03:07.567
実行のたびに値そのものは変わるので、記事では具体的な数値ではなく、値の性質を確認する形になっています。

39
00:03:07.567 --> 00:03:13.910
ファイルに保存してノードで実行しても、ブラウザーのコンソールに貼っても同じ結果です。

40
00:03:13.910 --> 00:03:20.404
再宣言エラーが出たら、ページを再読み込みするか、コード全体をブロックで囲んでください。

41
00:03:20.404 --> 00:03:26.596
まず性質を確かめる、という進め方は、値が毎回変わるメソッドを学ぶときのよい型です。

42
00:03:26.596 --> 00:03:30.812
記事の境界条件の例で、単位をもう一度確かめます。

43
00:03:30.812 --> 00:03:36.083
千という数値をデートに変換して、アイエスオー文字列で表示すると、結果は千九百七十年一月一日、

44
00:03:36.083 --> 00:03:41.353
午前零時零分一秒になります。

45
00:03:41.353 --> 00:03:46.097
千ミリ秒イコール一秒、という関係が目で見て分かります。

46
00:03:46.097 --> 00:03:48.732
この出力も実機で確認済みです。

47
00:03:48.732 --> 00:03:55.056
もし単位を秒と勘違いして千秒として扱えば、十六分四十秒ずれてしまいます。

48
00:03:55.056 --> 00:04:01.205
タイマーや有効期限の計算では、この千倍のずれがそのままバグになります。

49
00:04:01.205 --> 00:04:08.759
数値を見たら、まず単位はミリ秒だと声に出して確認するくらいで、ちょうどよい慎重さです。

50
00:04:08.759 --> 00:04:12.800
小さな確認例ほど、実務の事故を防いでくれます。

51
00:04:12.800 --> 00:04:16.181
実用例として、処理にかかった時間を測ります。

52
00:04:16.181 --> 00:04:25.247
やり方はシンプルで、処理の直前にデート・ナウを呼んで開始時刻を記録し、処理の直後にもう一度呼んで終了時刻を記録します。

53
00:04:25.247 --> 00:04:29.089
終了から開始を引けば、経過したミリ秒が得られます。

54
00:04:29.089 --> 00:04:36.619
スライドの例では、百万回の足し算にかかった時間を測っており、実機では二十四ミリ秒という結果でした。

55
00:04:36.619 --> 00:04:43.381
ただし、この数値はパソコンの性能や負荷で毎回変わるため、答え合わせの対象ではありません。

56
00:04:43.381 --> 00:04:46.300
大切なのは、差を取るという考え方です。

57
00:04:46.300 --> 00:04:52.140
重い処理の前後に挟むだけで、どこが遅いかの当たりを付けられるようになります。

58
00:04:52.140 --> 00:04:56.063
もう一つの実用例として、更新時刻の記録を見ます。

59
00:04:56.063 --> 00:05:03.908
メモなどのデータを保存するとき、その瞬間のデート・ナウの結果を、更新時刻として一緒に持たせます。

60
00:05:03.908 --> 00:05:08.157
数値で持つ利点は、並べ替えと比較がしやすいことです。

61
00:05:08.157 --> 00:05:11.917
新しい順に並べるなら数値の大きい順、一定時間過ぎたかを調べるなら差の計算、

62
00:05:11.917 --> 00:05:15.676
どちらも簡単です。

63
00:05:15.676 --> 00:05:21.396
画面に表示するときだけ、デートに変換して人間向けの形に直してください。

64
00:05:21.396 --> 00:05:25.646
保存は数値、表示は日時、と役割を分けるのがコツです。

65
00:05:25.646 --> 00:05:34.962
前の動画で学んだトゥーアイエスオーストリングと組み合わせると、記録から表示までの流れが一通り作れるようになります。

66
00:05:34.962 --> 00:05:37.372
最も間違えやすい注意点です。

67
00:05:37.372 --> 00:05:44.601
デート・ナウの単位はミリ秒ですが、世の中には秒単位で時刻を表す仕組みも多くあります。

68
00:05:44.601 --> 00:05:49.506
サーバーから秒単位の値を受け取って、そのままミリ秒としてデートに渡すと、

69
00:05:49.506 --> 00:05:54.412
千九百七十年付近の日時に戻ってしまいます。

70
00:05:54.412 --> 00:05:59.748
逆に、ミリ秒の値を秒として渡すと、はるか未来の日時になります。

71
00:05:59.748 --> 00:06:01.469
桁数も手がかりです。

72
00:06:01.469 --> 00:06:06.288
今のミリ秒の値は十三桁前後、秒の値は十桁前後になります。

73
00:06:06.288 --> 00:06:10.419
外部との受け渡しでは、変数名に単位を含める、受け取ったら桁数を確認する、

74
00:06:10.419 --> 00:06:14.550
といった工夫が有効です。

75
00:06:14.550 --> 00:06:20.230
単位の確認は、地味ですが時刻まわりのバグを防ぐ一番確実な方法です。

76
00:06:20.230 --> 00:06:22.042
もう二つ注意点があります。

77
00:06:22.042 --> 00:06:23.296
一つ目は精度です。

78
00:06:23.296 --> 00:06:29.428
デート・ナウが読むのは端末のシステム時刻で、時刻の自動補正などで前後することがあります。

79
00:06:29.428 --> 00:06:37.092
そのため、細かい経過時間を精密に測る用途には向かず、記事でもパフォーマンス・ナウなどの検討が案内されています。

80
00:06:37.092 --> 00:06:38.765
二つ目は呼び出し方です。

81
00:06:38.765 --> 00:06:45.175
ナウはデート自体から呼ぶ静的メソッドで、作ったデートオブジェクトから呼ぶものではありません。

82
00:06:45.175 --> 00:06:49.635
実機でも、オブジェクト側にはナウが存在しないことを確認済みです。

83
00:06:49.635 --> 00:06:53.606
壁時計としての今がほしいときはデート・ナウ、止まらない物差しで経過を測りたいときは別の方法、

84
00:06:53.606 --> 00:06:57.578
と使い分けてください。

85
00:06:57.578 --> 00:06:58.629
まとめです。

86
00:06:58.629 --> 00:07:08.092
デート・ナウは、今の時刻を、千九百七十年一月一日からの経過ミリ秒という数値で返すシンプルな静的メソッドです。

87
00:07:08.092 --> 00:07:10.195
導入時の判断は三つです。

88
00:07:10.195 --> 00:07:14.926
まず、引数はなく、戻り値は整数の数値だと押さえること。

89
00:07:14.926 --> 00:07:22.636
次に、更新時刻の記録や並べ替え、差の計算に向き、画面表示には変換が必要だと理解すること。

90
00:07:22.636 --> 00:07:31.223
そして、システム時刻の補正の影響を受けるため、精密な経過時間の測定では別の方法を検討することです。

91
00:07:31.223 --> 00:07:38.057
まずはコンソールで何度か呼び、値が増えていく様子と桁数を確かめてみてください。

92
00:07:38.057 --> 00:07:39.634
お疲れさまでした。

93
00:07:39.634 --> 00:07:46.468
慣れてきたら、自分の処理の前後に挟んで時間を測るところから始めてみてください。