変数のスコープがfetchの中ので変わってしまう。

Question

前提・実現したいこと

住所から郵便番号を取得するためのスクリプトを書いています。該当するデータを配列変数citiesに追加していくだけなのですが、後記のスクリプトだと、ループから出たら配列が空になってしまいます。

変数のスコープが合っていないようなのですが、どのように解決したら良いかわかりません。

発生している問題・エラーメッセージ

#1 では変数citiesは最終的に長さ3の配列になります。しかし#2ではからになってしまいます。

該当のソースコード

const apiUrl = 'http://zipcoda.net/api?address='
let targetUrl
let address

let prefectures = ['東京都', '広島県']
address = '府中市緑町1-1-1'

let cities = new Array()
for (let city of prefectures) {
  targetUrl = apiUrl + city + address
    fetch(targetUrl)
    .then(response => response.json())
    .then(json => {
        cities = cities.concat(json.items)
        console.log(cities) // #1
    });
}

console.log(cities) // #2

Answer 1

console.log()で出力される順番は#2,#1 となっていませんか？

Ajaxは非同期実行であるため、コードが上から順番に流れるわけではありません。処理を投げて返ってくる間にそのスコープ外の処理が流れてしまうこともあります（というか大抵スコープ内の処理のほうが後になります）。

Answer 2

こんにちは。

#1 では変数citiesは最終的に長さ3の配列になります。しかし#2ではからになってしまいます。

という結果で問題はないのではと思います。ログが出力される順番をみると、

console.log(cities) // #2

によって、空の配列が表示されるのが（時間的に）先で、

console.log(cities) // #1

が２回表示されるほうが後になっていると思われますが、いかがでしょうか？留意すべきことは

console.log(cities) // #2

が、ソースコードの中で一番下の行に書いてあるからといって、時間的に最後に実行されるわけではない、ということです。

参考になれば幸いです。

追記

ご理解の参考になるとよいのですが、擬似的なAPIのつもりのfetchDummy という関数を自作して、レスポンスを返すまで時間を、東京都の場合は５秒、広島県の場合は２秒待たせるようにして、これで、ご質問に挙げられているコードの fetch を置き換えたものが以下です。console.log で出力する情報も追加しています。

• https://codepen.io/jun68ykt/pen/QWWQvmm?editors=0012

このサンプルでは、APIにリクエストを送ってから、レスポンスが返ってくるまでには一般に時間がかかることを模しており、それを待たずに#2 のログが出力されること、および、forループの順序で、先にリクエストが送られるのは東京都のほうであっても、cities には、先にレスポンスが返ってくる広島県の items が、先に追加されていることが分かると思います。

Comments

[NCC1701]

なんと、非同期実行という初歩的なことを失念していたのですね。猛省です。
ありがとうございました。

[jun68ykt]

どういたしまして。蛇足かもしれませんが、回答に追記しました。参考になれば幸いです。

Answer 3

「アロー関数は、宣言した時点で this を確定する」と言うような記事を読んだことがあります。
// #1 の結果を得る関数を 変数 cities と同スコープで宣言してみるとどうでしょうか。

let cities = new Array()
let setResult = json => {
        cities = cities.concat(json.items)
        console.log(cities) // #1
}

for (let city of prefectures) {
  targetUrl = apiUrl + city + address
    fetch(targetUrl)
    .then(response => response.json())
    .then(setResult);
}
console.log(cities) // #2

Comments

[AkitoshiManabe]

単に実行順ですね。自分でマイナス評価つけたいです。