VIDEO LESSON

JavaScript詳解ガイド｜型・関数・クラス・非同期処理を実例で理解するの解説動画

再生時間 7:44動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:01今回はジャバスクリプト詳解ガイドを、初心者の方にも分かるように全体を案内します。
0:08このガイドは全十四章の長編で、型、関数、クラス、非同期処理までを実例で学びます。
0:15全部を一度に覚える必要はありません。
0:18大きく五つの領域に分けると見通しが良くなります。
0:22値と型、関数とスコープ、オブジェクトとクラス、モジュールと非同期、そして画面と実践です。
0:30この動画では、各領域の要点と、学ぶ順番の地図をお渡しします。
0:35なぜその結果になるのかを説明できるようになることが、ゴールです。
0:40最初の領域は、値と型です。
0:42ジャバスクリプトには、数値、文字列、真偽値、ヌル、アンディファインドなどの基本的な値と、
0:47配列や関数を含むオブジェクトがあります。
0:52注意したいのは、画面のフォームから届く値は、たいてい文字列だということです。
0:58空文字を数値に変換するとゼロになってしまうため、数字に見えてもそのまま計算に使うのは危険です。
1:05数量なら、変換前に数字だけかどうかを調べ、変換後に安全な整数で範囲内かどうかも調べます。
1:12この二重の確認が、入力検証の基本です。
1:14タイプオブでヌルを判定できない点も、合わせて覚えておきましょう。
1:19次は比較と既定値です。
1:21通常の比較では、暗黙の型変換をしない三本線の等号、厳密等価を使います。
1:26ただし、計算できないことを示すナンは、それ自身とも等しくなりません。
1:31ナン同士を等しいと見たい場面では、オブジェクトイズを使います。
1:35既定値の書き方にも違いがあります。
1:38縦線二つの演算子は、ゼロや空文字も未設定として置き換えてしまいます。
1:43一方、疑問符二つの演算子が置き換えるのは、ヌルとアンディファインドだけです。
1:48設定値のゼロを大切にしたいなら、後者が適しています。
1:52省略記法のオプショナルチェーンは、途中で値がなければそこで止まる仕組みです。
1:57関数とスコープの領域です。
2:00レットとコンストで宣言した変数は、ブロックの中だけが有効範囲です。
2:05コンストは再代入を禁じますが、参照先の配列やオブジェクトの中身まで凍らせるわけではありません。
2:14そして大切なのがクロージャです。
2:16内側の関数は、作られたときに外側にあった変数を参照し続けられます。
2:22外側の関数の実行が終わっても、その変数は残ります。
2:26連番を作る例では、呼び出すたびにカウンターが一つずつ進み、別の連番とは独立して保たれます。
2:34状態を関数の中に閉じ込める、この考え方は、後のクラスやモジュールにもつながっていきます。
2:42データ加工では、配列の三つの道具を使い分けます。
2:46マップは各要素の変換、フィルターは条件に合う要素の抽出、リデュースは合計などの集計です。
2:54もう一つ重要なのが、参照とコピーの違いです。
2:57スプレッド構文でオブジェクトを広げても、コピーされるのは一番外側だけで、
3:02内側のオブジェクトは元のものと共有されます。
3:07知らずに内側を書き換えると、元のデータまで変わってしまいます。
3:13元を保ちたいときは、変更する階層ごとに作り直してください。
3:18また、ソートは元の配列自体を並べ替えるため、順序を残したい場合は先にコピーを作ることが大切です。
3:26クラスとプロトタイプです。
3:28クラスのメソッドは、インスタンスごとに複製されるのではなく、プロトタイプという共通の場所に置かれて共有されます。
3:37各インスタンスが持つのは、それぞれの状態だけです。
3:41在庫クラスの例では、数量をシャープ付きのプライベートフィールドに隠し、更新は検証付きのメソッドだけに任せています。
3:50こうすると、不正な状態を作りにくくなります。
3:53落とし穴はディスです。
3:55メソッドを変数へ取り出して単独で呼ぶと、どのオブジェクトのメソッドなのかという結びつきが失われます。
4:02バインドで結び直すか、アロー関数の性質を理解して使う必要があります。
4:08プログラムが大きくなったら、モジュールでファイルを分けます。
4:12計算と検証を担当するファイルが関数をエクスポートし、使う側がインポートして読み込む、
4:16という最小構成から始められます。
4:20ブラウザーでは相対パスに拡張子まで書くこと、モジュールは自動で厳格なモードになることも覚えておきましょう。
4:28分割で怖いのは循環参照です。
4:30ファイル同士が互いを読み合うと、初期化前に値を使って失敗することがあります。
4:35共通の計算は下の方のモジュールへ寄せ、画面表示や通信から独立させると、依存関係が整理でき、
4:39テストもしやすくなります。
4:44非同期処理は、このガイドの山場です。
4:47実行順序の例で考えます。
4:49最初と最後のログは同期処理なので先に出ます。
4:52次に動くのは、プロミスの反応であるマイクロタスクです。
4:57タイマーのコールバックは、その後のタスクとして実行されます。
5:02つまりゼロミリ秒を指定しても、即座には動きません。
5:06処理の選び方も大切です。
5:08前の結果が次に必要な場合は順番にアウェイトし、独立した処理は先に全部始めてから、
5:12プロミスオールでまとめて待ちます。
5:17どれか一つでも失敗したら全体が失敗になる点と、他の処理は自動では止まらない点も、
5:21合わせて押さえてください。
5:26通信では、エラーを境界で扱います。
5:28フェッチは、ページが見つからない四百四や、サーバーの五百番台のエラーでも、
5:32自動では失敗扱いになりません。
5:36そのため、レスポンスのオーケーを自分で確認してから、ジェイソンを読み、必要な項目の型まで検証します。
5:43通信を途中でやめたいときは、アボートコントローラーのシグナルを渡します。
5:49読み込み中表示の後始末は、成功でも失敗でも必ず通るファイナリーで行います。
5:54キャッチで例外を黙って消してしまうと、呼び出し元が成功と誤解してしまいます。
6:00扱える場所で表示や再試行を行うか、上位へきちんと伝えてください。
6:05応用的な三つの道具を紹介します。
6:07まずジェネレーターです。
6:09アスタリスク付きの関数が、イールドで値を一つ渡しては一時停止します。
6:15配列を先に全部作らず、必要な分だけ順に生成できるのが利点です。
6:21ただし、使い終わったイテレーターは途中から再開するため、最初から読みたいときは作り直します。
6:28次に正規表現です。
6:30入力全体の形式を調べたいときは、先頭と末尾を示す記号を付け、不要なフラグは付けません。
6:37最後に日時です。
6:39ある瞬間を保存するときと、地域に合わせて表示するときは役割が違います。
6:45保存はアイエスオー形式で明確にし、表示はインターナショナルの日時フォーマットで、
6:50タイムゾーンを指定してください。
6:54最後は画面と、学びの締め方です。
6:57ドムでは、利用者の入力を文字として見せるならテキストコンテンツを使い、未検証の文字列をインナーエイチティーエムエルへ渡さないことが安全の基本です。
7:08イベントは、アボートコントローラーでまとめて解除できるようにしておくと、
7:12画面を閉じるときの後始末が楽になります。
7:16理解の確認には、ガイドの練習問題が役立ちます。
7:20空文字、ゼロ、最大値を超える値、通信の失敗、中止した後の状態など、境界条件で試してください。
7:27学ぶ順序は、入門で基本構文、次にこのガイドで仕組み、実践記事で手を動かし、
7:32最後にクラスと非同期を組み合わせる課題へ進む流れがおすすめです。
7:37エムディーエヌで仕様を確認しながら、小さく実行する習慣を続けましょう。
7:42お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

MDNを参考にJavaScriptの型・比較・クロージャ・参照・クラス・モジュール・非同期処理を詳しく解説。実行結果つきコード、境界条件の練習、公式資料で仕組みを学べます。

解説記事・サンプルコードを読む：JavaScript詳解ガイド｜型・関数・クラス・非同期処理を実例で理解する →