WEBVTT

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

2
00:00:01.050 --> 00:00:08.050
今回はジャバスクリプト詳解ガイドを、初心者の方にも分かるように全体を案内します。

3
00:00:08.050 --> 00:00:15.049
このガイドは全十四章の長編で、型、関数、クラス、非同期処理までを実例で学びます。

4
00:00:15.049 --> 00:00:18.199
全部を一度に覚える必要はありません。

5
00:00:18.199 --> 00:00:22.399
大きく五つの領域に分けると見通しが良くなります。

6
00:00:22.399 --> 00:00:30.099
値と型、関数とスコープ、オブジェクトとクラス、モジュールと非同期、そして画面と実践です。

7
00:00:30.099 --> 00:00:35.348
この動画では、各領域の要点と、学ぶ順番の地図をお渡しします。

8
00:00:35.348 --> 00:00:40.948
なぜその結果になるのかを説明できるようになることが、ゴールです。

9
00:00:40.948 --> 00:00:42.911
最初の領域は、値と型です。

10
00:00:42.911 --> 00:00:47.744
ジャバスクリプトには、数値、文字列、真偽値、ヌル、アンディファインドなどの基本的な値と、

11
00:00:47.744 --> 00:00:52.576
配列や関数を含むオブジェクトがあります。

12
00:00:52.576 --> 00:00:58.315
注意したいのは、画面のフォームから届く値は、たいてい文字列だということです。

13
00:00:58.315 --> 00:01:05.413
空文字を数値に変換するとゼロになってしまうため、数字に見えてもそのまま計算に使うのは危険です。

14
00:01:05.413 --> 00:01:12.058
数量なら、変換前に数字だけかどうかを調べ、変換後に安全な整数で範囲内かどうかも調べます。

15
00:01:12.058 --> 00:01:14.927
この二重の確認が、入力検証の基本です。

16
00:01:14.927 --> 00:01:19.760
タイプオブでヌルを判定できない点も、合わせて覚えておきましょう。

17
00:01:19.760 --> 00:01:21.349
次は比較と既定値です。

18
00:01:21.349 --> 00:01:26.406
通常の比較では、暗黙の型変換をしない三本線の等号、厳密等価を使います。

19
00:01:26.406 --> 00:01:31.318
ただし、計算できないことを示すナンは、それ自身とも等しくなりません。

20
00:01:31.318 --> 00:01:35.796
ナン同士を等しいと見たい場面では、オブジェクトイズを使います。

21
00:01:35.796 --> 00:01:38.252
既定値の書き方にも違いがあります。

22
00:01:38.252 --> 00:01:43.164
縦線二つの演算子は、ゼロや空文字も未設定として置き換えてしまいます。

23
00:01:43.164 --> 00:01:48.654
一方、疑問符二つの演算子が置き換えるのは、ヌルとアンディファインドだけです。

24
00:01:48.654 --> 00:01:52.410
設定値のゼロを大切にしたいなら、後者が適しています。

25
00:01:52.410 --> 00:01:57.900
省略記法のオプショナルチェーンは、途中で値がなければそこで止まる仕組みです。

26
00:01:57.900 --> 00:02:00.156
関数とスコープの領域です。

27
00:02:00.156 --> 00:02:05.883
レットとコンストで宣言した変数は、ブロックの中だけが有効範囲です。

28
00:02:05.883 --> 00:02:14.040
コンストは再代入を禁じますが、参照先の配列やオブジェクトの中身まで凍らせるわけではありません。

29
00:02:14.040 --> 00:02:16.817
そして大切なのがクロージャです。

30
00:02:16.817 --> 00:02:22.544
内側の関数は、作られたときに外側にあった変数を参照し続けられます。

31
00:02:22.544 --> 00:02:26.882
外側の関数の実行が終わっても、その変数は残ります。

32
00:02:26.882 --> 00:02:34.692
連番を作る例では、呼び出すたびにカウンターが一つずつ進み、別の連番とは独立して保たれます。

33
00:02:34.692 --> 00:02:42.328
状態を関数の中に閉じ込める、この考え方は、後のクラスやモジュールにもつながっていきます。

34
00:02:42.328 --> 00:02:46.459
データ加工では、配列の三つの道具を使い分けます。

35
00:02:46.459 --> 00:02:54.034
マップは各要素の変換、フィルターは条件に合う要素の抽出、リデュースは合計などの集計です。

36
00:02:54.034 --> 00:02:57.821
もう一つ重要なのが、参照とコピーの違いです。

37
00:02:57.821 --> 00:03:02.813
スプレッド構文でオブジェクトを広げても、コピーされるのは一番外側だけで、

38
00:03:02.813 --> 00:03:07.805
内側のオブジェクトは元のものと共有されます。

39
00:03:07.805 --> 00:03:13.141
知らずに内側を書き換えると、元のデータまで変わってしまいます。

40
00:03:13.141 --> 00:03:18.133
元を保ちたいときは、変更する階層ごとに作り直してください。

41
00:03:18.133 --> 00:03:26.396
また、ソートは元の配列自体を並べ替えるため、順序を残したい場合は先にコピーを作ることが大切です。

42
00:03:26.396 --> 00:03:28.429
クラスとプロトタイプです。

43
00:03:28.429 --> 00:03:37.186
クラスのメソッドは、インスタンスごとに複製されるのではなく、プロトタイプという共通の場所に置かれて共有されます。

44
00:03:37.186 --> 00:03:41.095
各インスタンスが持つのは、それぞれの状態だけです。

45
00:03:41.095 --> 00:03:50.008
在庫クラスの例では、数量をシャープ付きのプライベートフィールドに隠し、更新は検証付きのメソッドだけに任せています。

46
00:03:50.008 --> 00:03:53.449
こうすると、不正な状態を作りにくくなります。

47
00:03:53.449 --> 00:03:55.169
落とし穴はディスです。

48
00:03:55.169 --> 00:04:02.987
メソッドを変数へ取り出して単独で呼ぶと、どのオブジェクトのメソッドなのかという結びつきが失われます。

49
00:04:02.987 --> 00:04:08.304
バインドで結び直すか、アロー関数の性質を理解して使う必要があります。

50
00:04:08.304 --> 00:04:12.585
プログラムが大きくなったら、モジュールでファイルを分けます。

51
00:04:12.585 --> 00:04:16.723
計算と検証を担当するファイルが関数をエクスポートし、使う側がインポートして読み込む、

52
00:04:16.723 --> 00:04:20.861
という最小構成から始められます。

53
00:04:20.861 --> 00:04:28.424
ブラウザーでは相対パスに拡張子まで書くこと、モジュールは自動で厳格なモードになることも覚えておきましょう。

54
00:04:28.424 --> 00:04:30.422
分割で怖いのは循環参照です。

55
00:04:30.422 --> 00:04:35.845
ファイル同士が互いを読み合うと、初期化前に値を使って失敗することがあります。

56
00:04:35.845 --> 00:04:39.983
共通の計算は下の方のモジュールへ寄せ、画面表示や通信から独立させると、依存関係が整理でき、

57
00:04:39.983 --> 00:04:44.121
テストもしやすくなります。

58
00:04:44.121 --> 00:04:47.086
非同期処理は、このガイドの山場です。

59
00:04:47.086 --> 00:04:49.063
実行順序の例で考えます。

60
00:04:49.063 --> 00:04:52.687
最初と最後のログは同期処理なので先に出ます。

61
00:04:52.687 --> 00:04:57.135
次に動くのは、プロミスの反応であるマイクロタスクです。

62
00:04:57.135 --> 00:05:02.077
タイマーのコールバックは、その後のタスクとして実行されます。

63
00:05:02.077 --> 00:05:06.195
つまりゼロミリ秒を指定しても、即座には動きません。

64
00:05:06.195 --> 00:05:08.172
処理の選び方も大切です。

65
00:05:08.172 --> 00:05:12.867
前の結果が次に必要な場合は順番にアウェイトし、独立した処理は先に全部始めてから、

66
00:05:12.867 --> 00:05:17.562
プロミスオールでまとめて待ちます。

67
00:05:17.562 --> 00:05:21.927
どれか一つでも失敗したら全体が失敗になる点と、他の処理は自動では止まらない点も、

68
00:05:21.927 --> 00:05:26.293
合わせて押さえてください。

69
00:05:26.293 --> 00:05:28.807
通信では、エラーを境界で扱います。

70
00:05:28.807 --> 00:05:32.651
フェッチは、ページが見つからない四百四や、サーバーの五百番台のエラーでも、

71
00:05:32.651 --> 00:05:36.495
自動では失敗扱いになりません。

72
00:05:36.495 --> 00:05:43.889
そのため、レスポンスのオーケーを自分で確認してから、ジェイソンを読み、必要な項目の型まで検証します。

73
00:05:43.889 --> 00:05:49.212
通信を途中でやめたいときは、アボートコントローラーのシグナルを渡します。

74
00:05:49.212 --> 00:05:54.683
読み込み中表示の後始末は、成功でも失敗でも必ず通るファイナリーで行います。

75
00:05:54.683 --> 00:06:00.301
キャッチで例外を黙って消してしまうと、呼び出し元が成功と誤解してしまいます。

76
00:06:00.301 --> 00:06:05.033
扱える場所で表示や再試行を行うか、上位へきちんと伝えてください。

77
00:06:05.033 --> 00:06:07.787
応用的な三つの道具を紹介します。

78
00:06:07.787 --> 00:06:09.853
まずジェネレーターです。

79
00:06:09.853 --> 00:06:15.705
アスタリスク付きの関数が、イールドで値を一つ渡しては一時停止します。

80
00:06:15.705 --> 00:06:21.041
配列を先に全部作らず、必要な分だけ順に生成できるのが利点です。

81
00:06:21.041 --> 00:06:28.959
ただし、使い終わったイテレーターは途中から再開するため、最初から読みたいときは作り直します。

82
00:06:28.959 --> 00:06:30.508
次に正規表現です。

83
00:06:30.508 --> 00:06:37.909
入力全体の形式を調べたいときは、先頭と末尾を示す記号を付け、不要なフラグは付けません。

84
00:06:37.909 --> 00:06:39.286
最後に日時です。

85
00:06:39.286 --> 00:06:45.311
ある瞬間を保存するときと、地域に合わせて表示するときは役割が違います。

86
00:06:45.311 --> 00:06:50.130
保存はアイエスオー形式で明確にし、表示はインターナショナルの日時フォーマットで、

87
00:06:50.130 --> 00:06:54.950
タイムゾーンを指定してください。

88
00:06:54.950 --> 00:06:57.362
最後は画面と、学びの締め方です。

89
00:06:57.362 --> 00:07:08.368
ドムでは、利用者の入力を文字として見せるならテキストコンテンツを使い、未検証の文字列をインナーエイチティーエムエルへ渡さないことが安全の基本です。

90
00:07:08.368 --> 00:07:12.589
イベントは、アボートコントローラーでまとめて解除できるようにしておくと、

91
00:07:12.589 --> 00:07:16.811
画面を閉じるときの後始末が楽になります。

92
00:07:16.811 --> 00:07:20.278
理解の確認には、ガイドの練習問題が役立ちます。

93
00:07:20.278 --> 00:07:27.214
空文字、ゼロ、最大値を超える値、通信の失敗、中止した後の状態など、境界条件で試してください。

94
00:07:27.214 --> 00:07:32.415
学ぶ順序は、入門で基本構文、次にこのガイドで仕組み、実践記事で手を動かし、

95
00:07:32.415 --> 00:07:37.616
最後にクラスと非同期を組み合わせる課題へ進む流れがおすすめです。

96
00:07:37.616 --> 00:07:42.893
エムディーエヌで仕様を確認しながら、小さく実行する習慣を続けましょう。

97
00:07:42.893 --> 00:07:44.250
お疲れさまでした。