前回のPromiseを、読みやすい形に
前回のF-05では、将来届く結果を成功・失敗の状態として持つ入れ物、Promiseを学びました。ただ、Promiseをそのままつなげて書くと、処理の順序が追いにくくなります。この講義では、そのPromiseを、上から下へ読める同期処理のような見た目で書くための記法を扱います。AIが書いた非同期コードを読む力は、コードレビューの中心になる装備です。
このスライドのポイント
- F-05: 将来届く結果を、成功・失敗の状態として持つ入れ物がPromise
- 課題: Promiseをそのままつなげて書くと、処理の順序が追いにくい
- この講義の役割: そのPromiseを、上から下へ読める形で書く記法を扱う
async・await・try・catchの定義
asyncは、この関数は非同期です、という印です。asyncを付けた関数の戻り値は、自動的にPromiseになります。awaitは、このPromiseの結果が届くまでここで待つ、という印で、asyncを付けた関数の中でだけ使えます。try・catchは、tryの中で起きた失敗をcatchで受け止める例外処理の構文です。awaitしている処理が失敗したときは、その失敗がcatchに飛んできます。
このスライドのポイント
- async: この関数は非同期です、の印。戻り値はPromiseになる
- await: このPromiseの結果が届くまでここで待つ、の印。asyncの中でだけ使える
- try・catch: tryの中で起きた失敗をcatchで受け止める例外処理の構文
- awaitしている処理の失敗は、catchに飛んでくる
なぜ必要か——読めないと見抜けない
この記法を読めないと、AIが生成する非同期コードの大半が読めないままになります。async、await、try、catchは、AIコードレビューの主戦場です。さらに、awaitを付け忘れると、結果ではなくPromiseのまま先へ進んでしまいます。これはF-05で見た、入れ物をそのまま表示してしまう事故の、原因側にあたります。付け忘れを見抜くためにも、待つ位置を指させることが大切です。
このスライドのポイント
- 読めないと: AIが生成する非同期コードの大半が読めないまま
- async・await・try・catchはAIコードレビューの主戦場
- awaitの付け忘れ＝結果ではなくPromiseのまま進むバグ（F-05の事故の原因側）
構造——async関数の骨格
非同期の関数の骨格は、いつも同じ形をしています。まずasync functionで始まり、その中にtryのまとまりを置きます。tryの中では、awaitで依頼の結果を待ち、届いた結果を使います。もし途中で失敗すれば、処理はcatchのまとまりへ移り、そこで失敗の扱いを書きます。awaitの行では、結果が届くまで時間が止まる、と考えると流れを追いやすくなります。
このスライドのポイント
- 骨格: async function → try { await 依頼 → 結果を使う } catch { 失敗の扱い }
- tryの中: awaitで結果を待ち、届いた結果を使う
- catchの中: 途中で失敗したときの扱いを書く
- awaitの行で時間が止まる、と考えると流れを追いやすい
処理の流れ——保存の成功と失敗
経費アプリで、保存ボタンを押した場面を考えます。保存を依頼し、awaitでその結果を待ちます。無事に届けば、結果の中の受付番号を取り出して表示します。もし保存に失敗すれば、処理はcatchへ移り、利用者に失敗を知らせます。F-05では成功と失敗の2つの出口を設計しました。この講義の構文では、成功はtryの続き、失敗はcatchの中、という形で、その2つの出口がはっきり分かれて書かれます。
このスライドのポイント
- 場面: 経費アプリで保存ボタンを押す
- 成功: 保存を依頼→awaitで待つ→届いた結果の受付番号を表示
- 失敗: 保存に失敗→catchへ移る→利用者に失敗を知らせる
- F-05の2つの出口（成功／失敗）が、tryの続きとcatchの中に分かれて書かれる
技術サンプルカード
サンプルを見ます。種別はコードで、目的はasyncとawait、そしてtry・catchの組み合わせを読むことです。saveExpenseは、保存を依頼してPromiseを返す関数、という前提だけ置き、その中身には踏み込みません。読み方は3点です。awaitの行で結果が届くまで待つこと、失敗するとcatchへ飛ぶこと、そしてawaitを消すとresultは結果ではなくPromiseになることです。AIには、このawaitを外すと何が起きますか、catchに来るのはどんな失敗のときですか、と聞くとよいでしょう。
混同しやすい概念——awaitの有無
混同しやすいのは、awaitが有るときと無いときの違いです。awaitを付けると、Promiseの中身、つまり結果の値がresultに入ります。awaitを付けないと、結果ではなくPromiseそのものがresultに入ってしまいます。たった1語の有無で、変数に入るものの種類が変わります。表示が[object Promise]のようになっていたら、この付け忘れをまず疑ってください。
バイブコーディングでの確認点
AIの非同期コードを確認するときは、2点を見ます。1つは、awaitの付け忘れがないか。もう1つは、catchの中で利用者に何が見えるか、です。特に、catchの中身が空になっている、いわゆる握りつぶしは要修正です。失敗が起きても誰にも伝わらず、原因も残りません。AIには、このコードでawaitの付け忘れはありませんか、失敗したとき利用者には何が表示されますか、と確認してください。
このスライドのポイント
- 確認1: awaitの付け忘れはないか
- 確認2: catchの中で利用者に何が見えるか
- catchが空（握りつぶし）は要修正——失敗が誰にも伝わらず原因も残らない
- 質問例: 「awaitの付け忘れはありませんか。失敗したとき利用者には何が表示されますか」
一問一答とまとめ
一問一答です。awaitは、どんな関数の中でだけ使えるでしょうか。（間）答えは、asyncを付けた関数の中、です。30秒まとめです。asyncは非同期の印、awaitは結果を待つ印、try・catchは失敗を受け止める構文、そしてawaitの有無で入るものが結果かPromiseかが変わる、この4点を押さえてください。次回は、コードをファイルに分ける仕組み、モジュールとimport・exportへ進みます。関連資料は「エラー解決プロンプト50」と「開発プロンプト100選」です。
このスライドのポイント
- 一問一答:「awaitはどんな関数の中でだけ使える？」→ async関数の中
- 30秒まとめ: async＝非同期の印／await＝結果を待つ印／try・catch＝失敗を受け止める／awaitの有無で結果かPromiseかが変わる
- 次回: F-07 モジュールとimport／export
- 関連資料: 「エラー解決プロンプト50」「開発プロンプト100選」
