前回との接続と今回の役割
前回のF-03では、データを直接書き換えるか、新しく作るかという更新方式の違いを見ました。今回のテーマは、処理の時間的な流れです。これまでのコードは、上から順に即座に実行されてきました。しかし実際のアプリには、時間のかかる処理、たとえばサーバーへの問い合わせのような処理が登場します。この詳細はカテゴリKで扱いますが、そうした処理の待ち方をどう設計するかが、この講義の中心になります。
このスライドのポイント
- F-03: データを直接書き換えるか、新しく作るかという更新方式の違いを学んだ
- ここまでのコードは、上から順に即座に実行されてきた
- 現実には「時間のかかる処理」がある（例: サーバーへの問い合わせ。詳細はカテゴリK）
- 今回のテーマ: その処理の「待ち方」をどう設計するか
同期処理・非同期処理の定義
同期処理とは、1つの処理が終わるまで次へ進まない流れのことです。これに対して非同期処理とは、時間のかかる処理を依頼だけして先へ進み、結果は後から受け取る流れを指します。JavaScriptは原則として1本の流れで動くため、長い待ちが入ると全体が止まってしまいます。そこで、待っている間も他の処理を進められるように、非同期という仕組みが中心的に使われます。まずはこの2つの言葉を、流れの違いとして押さえてください。
このスライドのポイント
- 同期処理＝1つの処理が終わるまで、次へ進まない流れ
- 非同期処理＝時間のかかる処理を「依頼」だけして先へ進み、結果は後から受け取る流れ
- JavaScriptは原則1本の流れで動く
- だから長い待ちで全体を止めない工夫として、非同期が中心的に使われる
なぜ必要か
この違いを知らないと、データが来る前に表示しようとして画面が空になる、というバイブコーディングで最も多いバグの構造が読めません。結果がまだ届いていないのに、届いた前提で次の処理を書いてしまうために起こります。また、AIが書いた非同期のコードは、見た目の行の順序と、実際に動く順序がずれることがあります。この流れの違いを理解していないと、その順序を追えず、AIへの修正の指示も的外れになってしまいます。
このスライドのポイント
- 知らないと: データが来る前に表示しようとして画面が空になる、という最頻出バグの構造が読めない
- 原因: 結果がまだ届いていないのに、届いた前提で次の処理を書いてしまう
- AIの書いた非同期コードは、見た目の行の順序と実際に動く順序がずれることがある
- 流れの違いを知らないと、その順序を追えず、修正指示も的外れになる
2つの流れの構造
図では、2本のタイムラインで違いを示しています。上の同期処理では、依頼を出したあと、結果が返るまでずっと待ち、待ち終えてから次へ進みます。下の非同期処理では、依頼を出したらすぐ次の処理へ進み、結果は後から合流します。ここでのポイントは、非同期では依頼と結果が時間的に離れる、ということです。そしてこの間、全体の流れは止まらず動き続けられます。この「離れる」という感覚が、非同期を理解する鍵になります。
このスライドのポイント
- 同期のタイムライン: ［依頼］→［待ち……］→［次へ］（待ち終えてから進む）
- 非同期のタイムライン: ［依頼］→すぐ［次へ］、結果は後から合流
- ポイント: 非同期では「依頼」と「結果」が時間的に離れる
- その間、全体の流れは止まらず動き続けられる
処理の流れ・Webアプリでの具体例
経費アプリで考えてみます。保存ボタンを押すと、サーバーへ保存を依頼します。これは時間のかかる処理です。もしこれが同期だと、その間は画面が固まって、何も操作できません。非同期なら、依頼を出したあとも画面は操作でき、保存が完了した時点で、保存しましたと表示できます。利用者を待たせずに画面を動かし続けられるのは、まさにこの非同期のおかげです。裏を返せば、完了の表示を出すタイミングは、結果が届いた後でなければならない、ということでもあります。
このスライドのポイント
- 経費アプリの保存ボタンの例
- 保存ボタン→サーバーへ保存を依頼（時間がかかる処理）
- 同期だと: その間は画面が固まって操作できない
- 非同期だと: 依頼中も画面は操作でき、完了時に「保存しました」を表示
技術サンプルカード
サンプルは、2つの流れを時間軸で並べた図です。同期では、Aが完了してからBが始まり、順番に一列で進みます。非同期では、Aを依頼したらすぐBやCへ進み、Aの結果は時間差で後から届いて、続きの処理につながります。読み方の要点は2つです。非同期では依頼と結果が時間的に離れること、そして、結果が届く前にその結果を使うとバグになることです。AIには、この処理は結果を待ってから次へ進みますか、待たない場合は結果をどこで受け取っていますか、と質問できます。
このスライドのポイント
- 種別: diagram
- 目的: 同期と非同期の流れの違いを、時間軸で見比べて確認する
- サンプル本体:
混同しやすい概念
混同しやすいのが、処理が失敗したのか、それともまだ終わっていないのか、という区別です。同期の世界では、結果は必ずその場にありますが、非同期の世界には、まだ、という状態があります。手元の結果が空だからといって、失敗したとは限りません。単に、まだ届いていないだけかもしれないのです。空イコール失敗と決めつけてしまうと、原因の切り分けを誤り、直さなくてよい場所を直そうとしてしまいます。
このスライドのポイント
- 「処理が失敗した」 vs 「まだ終わっていない」
- 同期の世界: 結果は必ずその場にある
- 非同期の世界: 「まだ」という状態がある
- 手元の結果が空＝失敗、とは限らない（まだ届いていないだけかもしれない）
バイブコーディングでの確認点
バイブコーディングでの確認点です。たまに空になる、たまに順序が変わる、という不安定な不具合が出たら、まず非同期の順序を疑ってください。そのうえでAIに、この2つの処理は、どちらが先に終わる保証がありますか、と聞くと、順序の思い込みを洗い出せます。安定して再現しないバグほど、この時間的な流れが原因であることが多いと覚えておきましょう。毎回ではなく、たまに、というのが、非同期を疑うサインです。
このスライドのポイント
- 「たまに空になる」「たまに順序が変」という不具合は、まず非同期の順序を疑う
- AIへの質問例: 「この2つの処理は、どちらが先に終わる保証がありますか」
- 安定して再現しないバグほど、時間的な流れが原因のことが多い
まとめと次回への橋渡し
一問一答です。時間のかかる処理を依頼して先へ進む流れを、何と呼ぶでしょうか。（間）答えは、非同期処理です。30秒まとめとして、同期は終わるまで待つ流れ、非同期は依頼して先へ進み結果は後から受け取る流れ、そして結果が届く前に使うとバグになる、この3点を押さえてください。次回のF-05では、その後から届く結果をコードの中でどう持つか、その入れ物であるPromiseへ進みます。関連資料は、エラー解決プロンプト50、API連携 超入門です。
このスライドのポイント
- 一問一答: 「時間のかかる処理を依頼して先へ進む流れを何と呼ぶ？」→ 非同期処理
- 30秒まとめ: 同期＝終わるまで待つ／非同期＝依頼して先へ進み結果は後から／届く前に使うとバグ
- 次回 F-05: その「後から届く結果」を扱う道具、Promiseへ
- 関連資料: 「エラー解決プロンプト50」「API連携 超入門」
