前回の「後から届く結果」をどう持つか
前回のF-04では、時間のかかる処理を依頼して先へ進む、非同期処理の流れを学びました。そこで一つの問いが残りました。後から届く結果を、コードの中でどう持っておくのか、という問いです。その結果を入れておく箱こそがPromiseです。この講義は、非同期の結果を受け取る道具の正体を知る回にあたります。
このスライドのポイント
- F-04では、時間のかかる処理を依頼して先へ進む「非同期処理」を学んだ
- 残った問い: その「後から届く結果」を、コードの中でどう持っておくのか
- その結果の入れ物がPromise
- この講義は「非同期の結果を受け取る道具の正体」を知る回
Promiseとは何か
Promiseとは、将来の結果を表すオブジェクトです。オブジェクトは、E-09で学んだ、値をまとめて持つ入れ物のことでした。Promiseは3つの状態を持ちます。まず処理中、これは結果がまだ届いていない状態です。そこから、成功して結果の値を持つ状態か、失敗してエラーを持つ状態のどちらかへ進みます。そして、結果が届いた後にやりたい処理を、あらかじめ予約しておける点が特徴です。
このスライドのポイント
- Promise = 将来の結果を表すオブジェクト（E-09で学んだ、値をまとめて持つ入れ物）
- 状態は3つ
なぜPromiseを知る必要があるか
Promiseを知らないと、画面に「[object Promise]」という文字がそのまま表示される定番の事故が読めません。これは、結果そのものではなく、結果の入れ物のほうを表示してしまったときに起こります。また、AIが生成する非同期コードには、次回学ぶthenやawaitといった記述が出てきますが、その土台にPromiseがあると分からなければ、コードが何をしているのか追えません。だからこそ、先に入れ物の正体を押さえておきます。
このスライドのポイント
- 画面に「[object Promise]」と表示される定番事故が読めるようになる
- その事故の正体: 結果そのものではなく、結果の入れ物のほうを表示している
- AIが生成する非同期コードの土台にPromiseがあると分かる
- 土台が見えないと、コードの意味が追えない
Promiseの状態の移り変わり
Promiseの状態の移り変わりを図にすると、まず処理中から始まり、そこから成功か失敗のどちらかへ分岐する形になります。ここで押さえたいのは、Promiseはあくまで箱であり、その中身はまだ無いかもしれない、という点です。依頼した直後は、処理中の空の箱を持っているだけです。時間が経って、成功なら結果の値が、失敗ならエラーが、その箱に入ります。ですから、箱を受け取ったことと、中身がすぐ使えることは、別のことだと考えてください。
このスライドのポイント
- 処理中から始まり、成功か失敗のどちらかへ分岐する
- 中心の考え方: Promiseは箱、中身はまだ無いかもしれない
- 依頼した直後は、処理中の空の箱を持っているだけ
- 時間が経つと、成功なら結果の値が、失敗ならエラーが箱に入る
- 箱を受け取ったことと、中身が使えることは別
保存依頼で見る「約束」と「結果」の時間差
経費アプリの保存で考えます。保存を依頼した直後に手元にあるのは、保存結果の約束であって、結果そのものではありません。約束は、果たされるまで中身が空のままです。ですから、依頼したらすぐ受付番号を使う、という書き方をすると、まだ無い中身を触ることになり失敗します。正しい順序は、約束が果たされてから中身を使う、です。この時間差を意識できるかどうかが、非同期の事故を防ぐ分かれ目になります。
このスライドのポイント
- 経費アプリの保存で考える
- 依頼した直後に手元にあるのは「保存結果の約束」であって、結果そのものではない
- 約束は、果たされるまで中身が空
- すぐ受付番号を使おうとすると、まだ無い中身を触って失敗する
- 正しい順序: 約束が果たされてから中身を使う
技術サンプル: 保存依頼から結果までの流れ
サンプルは、保存依頼から結果までの流れを表した図です。保存を依頼するとPromiseが処理中で返り、そこから成功と失敗の2つの出口へ分かれます。成功なら受付番号のような結果の値が続きの処理へ渡り、失敗ならエラーが失敗時の処理へ渡ります。読み方の要点は2つです。成功と失敗の2つの出口を最初から設計すること、そして中身を使うのは結果が届いてからだ、という順序です。AIに非同期コードを書かせたら、このPromiseが失敗したとき、どこで捕まえてどう表示していますか、と質問してください。
このスライドのポイント
- 種別: diagram
- 目的: 保存依頼が返すPromiseと、成功・失敗の2つの出口を図で確認する
- サンプル本体:
混同しやすい概念: 入れ物と中身
混同しやすいのは、Promiseという結果の入れ物と、結果の値そのものの違いです。この2つを取り違えて、入れ物のほうをそのまま表示すると、画面には「[object Promise]」と出ます。これは、中身を取り出す前の箱を、そのまま画面に出してしまった状態です。箱と中身は別物だ、と切り分けて考えることが、この事故を防ぐ第一歩になります。
このスライドのポイント
- 「Promise（結果の入れ物）」vs「結果の値そのもの」
- 入れ物のほうをそのまま表示すると「[object Promise]」になる
- それは中身を取り出す前の箱を、そのまま画面に出した状態
- 箱と中身は別物、と切り分けて考える
バイブコーディングでの確認点
バイブコーディングでの確認点です。AIが書く非同期コードは、成功したときの処理しか書かないことがよくあります。ですから、失敗時の処理はどこにありますか、と必ず確認してください。これは、A-08で学んだ例外、つまり正常でない事態への備えを、非同期の現場で実践することにあたります。成功と失敗の両方の出口が用意されているかを、人間の側からチェックする習慣をつけましょう。
このスライドのポイント
- AIが書く非同期コードは、成功したときの処理しか書かないことが多い
- 必ず確認する質問: 「失敗時の処理はどこにありますか」
- これはA-08で学んだ「例外」（正常でない事態への備え）を非同期の現場で実践すること
- 成功と失敗の両方の出口があるかを、人間の側からチェックする
まとめと次回
最後に一問一答です。Promiseが持つ3つの状態は何でしょうか。（間）答えは、処理中・成功・失敗の3つです。30秒でまとめます。Promiseは将来の結果を表す箱で、処理中から成功か失敗へ進み、中身を使うのは届いてからだ、という順序が肝心でした。次回のF-06では、このPromiseを、まるで同期処理のように読みやすく書く記法を学びます。あわせて読みたい資料は、「エラー解決プロンプト50」と「API連携 超入門」です。
このスライドのポイント
- 一問一答:「Promiseの3つの状態は？」→ 処理中・成功・失敗
- 30秒まとめ: Promiseは将来の結果を表す箱／処理中から成功か失敗へ進む／中身を使うのは届いてから
- 次回F-06: このPromiseを読みやすく書く記法へ
- 関連資料: 「エラー解決プロンプト50」「API連携 超入門」
