マンガでわかるJavaScriptのPromise

第4話「コールバック関数のネスト」

今回は、コールバック関数のネストの問題について解説します。

コールバック関数の例

　シンプルなコールバック関数の例を示します。1000ミリ秒（1秒）後に、関数が実行されます。

ソースコード）コールバック関数の例


setTimeout(function() {
    console.log('1秒後');
}, 1000);

種類	無料版	有料版
頒布先	Amazon	Booth
形態	Kindle電書	PDF+コード
価格	0円	500円
目的	知識普及安価に閲覧	作者応援自由な環境で閲覧
DRM	あり	なし
マンガ	○	○
コラム	○	○
実行可能なコード	×	○

# コールバック関数のネスト

------------------------------
## 1p

1)
モフオ：
今回は
コールバック関数の
ネストの問題に
ついて話すよ

[モフオ]

2)
ミア：
そもそも
ネストって何？

ネス湖なら
知っているん
だけど

（ネッシーのポーズ）

[ミア]

-----

3)
モフオ：
えー

ネストは
入れ子の
ことだよ

4)
入れ子

マトリョーシカ

------------------------------
## 2p

1)
モフオ：
さて コールバック関数を
「待ち時間のある処理」の
「終了時に呼び出す目的」で
 使うとする

2)
待ち時間のある処理(
    コールバック関数 {
        終わったあとの処理
    }
}

-----

3)
モフオ：
この前提で
ファイルＡを読み込んだあと
ファイルＢを読み込んで…
みたいな処理が
あったとするね

4)
ファイルＡを読み込む
▼
終わったら
ファイルＢを読み込む
▼
終わったら
ファイルＣを読み込む
▼
終わったら
ファイルＤを読み込む
▼
終わったら
ファイルＥを読み込む
▼
終わったら
ファイルＦを読み込む
▼
終わったら
処理をする

------------------------------
## 3p

1)
モフオ：
これを
コールバック関数で
書くとこうなる

2)
ミア：
なんじゃ
こりゃ！

-----

3)
ファイルＡを読み込む(
    コールバック関数 {
        ファイルＢを読み込む(
            コールバック関数 {
                ファイルＣを読み込む(
                    コールバック関数 {
                        ファイルＤを読み込む(
                            コールバック関数 {
                                ファイルＥを読み込む(
                                    コールバック関数 {
                                        ファイルＦを読み込む(
                                            コールバック関数 {
                                                終わったあとの処理
                                            }
                                        )
                                    }
                                )
                            }
                        )
                    }
                )
            }
        )
    }
)

------------------------------
## 4p

1)
モフオ：
ミアちゃん
読みやすい？

2)
ミア：
滅茶苦茶
読みにくい！

-----

3)
モフオ：
だよね

だからこれ
どうにかしようって
話になったんだよ

4)
ミア：
そりゃあ
そうでしょう

-----

5)
モフオ：
このネストを
解消する仕掛けが
Ｐｒｏｍｉｓｅ
なんだ

というわけで次は
Ｐｒｏｍｉｓｅの
話をするね

＜前へ次へ＞ JS Promise トップへ

作成：2022/07/17　更新：2022/07/17　 [Permalink]