【11章】JavaScriptの非同期処理を終えて

郵便番号を入力すると住所がアラートで出る、という課題をなんとか終えてAIレビューも合格をもらえた。正直まだ await がふわふわした理解のままだけど、書けたものは書けた。

第11章で解ったことは
非同期処理は「待つ」と宣言しないと勝手に先に進む。

fetch で待つ
.json() で待つ
そのために関数に async が要る

待たないと、変数の中身は「引換券」のまま次の行に進んでしまう。中身が入ってると思い込んで触りにいって落ちる。

非同期処理って「注文したけど、できるまで席で待つかどうか」みたいな話だなと思った。await を書かないのは、番号札もらった瞬間に「はい料理来ました」って言い張るようなもの。違うと思うがw

ハマったところ

一番時間を溶かしたのは、コードが原因じゃなかったやつ。

APIが「桁数が不正です」と返してくる。7桁入れてるのに。console.log で変数の中身を見たら undefined だった。

でも window.prompt は文字列か null しか返さない。undefined は返らない。ということはダイアログ自体が出ていない。

犯人はCodePenだった。プレビューがサンドボックスの中で動いていて、ブラウザが prompt を無視していた。ローカルにHTMLファイル作って開いたら一発で動いた。

コードを1文字も直さずに解決した。これが一番こたえた。

[ ] と { } の話

レスポンスの results が [ ] で囲まれてた。つまり配列。1件しか該当しなくても、APIは常にリストで返してくる。

だから results[0] で中身を取り出してから、.address1 で値を見にいく。

• オブジェクト → 名前で辿る（ドット）

• 配列 → 番号で辿る（角カッコ）

ここを間違えると取り出せない。コンソールで [ ] なのか { } なのかを見る癖がついた。

あと分割代入の { } は、= の左に置くと「作る」じゃなくて「取り出す」になる。最初 const address = {} と書いて意味が反対になってた。

学び

バグの多くは、処理の中身は合ってるのに「待つ」と言い忘れた時に起きるのだな、と思った。

あと、直す前に console.log で実際の値を見る。想像で直すと、今回みたいに「そもそもコードのせいじゃない」場合に永遠に抜け出せない。

【あまりにも文章書くのが下手すぎてAIに書いてもいました】