4歳娘「パパ、Promiseやasync/awaitって何？」〜Promise編〜

## スペシャルサンクス
@sega_yuu
@frodo821 

## とある休日


娘（**4歳**）「ねえパパ」

ワイ「なんや、娘ちゃん？」

娘「**非同期**って何？」

ワイ「ひ、**非道鬼！？**」

娘「そうそう、**非同期処理**とかいうやつ」

ワイ「**非道鬼**を**処理**やて・・・！？」

> 非道鬼「ヴォ〜〜〜！！！」
>
> 娘「！？」
> 娘「・・・現れたわね、非道鬼」
> 娘「**処理**してあげる」

ワイ「娘ちゃん、まだ4歳なのに、もう**厨二病**か・・・？」

よめ太郎「おい」
よめ太郎「お前まさか、非同期も知らんのか・・・？」

ワイ「いやいや、まさかまさか」
ワイ「流石に知っとるわ」
ワイ「それはそれは・・・極悪非道な・・・鬼のことや・・・」

よめ太郎「**お前が非道鬼に喰われてしまえ**」

## 非同期処理とは

よめ太郎「ええか、娘ちゃん」
よめ太郎「まず、**同期**って言葉は」
よめ太郎「**タイミングが合う**って意味や」

娘「じゃあ、**非同期**っていうのは**タイミングが合わない**ってこと？」

よめ太郎「せや」

娘「なんかピンとこないね・・・」

よめ太郎「ほな、例を挙げて説明するわ」

## 例えば、カウントダウンする処理

よめ太郎「ほな、例として」
よめ太郎「`5、4、3、2、1、0`って感じで」
よめ太郎「カウントダウンする処理を書いてみるで」

娘「うん」

よめ太郎「まず↓こんな感じのコードを書いてみたで」

```js:JavaScript
setTimeout(() => console.log(5), 1000);
setTimeout(() => console.log(4), 1000);
setTimeout(() => console.log(3), 1000);
setTimeout(() => console.log(2), 1000);
setTimeout(() => console.log(1), 1000);
setTimeout(() => console.log(0), 1000);
```

よめ太郎「↑このコードを実行するのに、合計で何秒かかると思う？」

娘「ええと、setTimeout()は確か」
娘「タイマーをセットするメソッドだから」
娘「1,000ミリ秒後・・・つまり1秒後に`console.log(5)`が実行されるよね」

よめ太郎「せやな」

娘「その後、次の行が処理されるから」
娘「また1秒経過して、今度は`console.log(4)`が実行される」
娘「5、4、3、2、1、0・・・だから」
娘「合計6秒かかる！」

よめ太郎「・・・って思うやろ？」
よめ太郎「実は**1秒**しか掛からへんねん」

娘「そうなんだ・・・！」

よめ太郎「1行目の`setTimeout()`に渡した関数は」
よめ太郎「1秒後に実行される訳やけど」
よめ太郎「その1秒間を**待たずに**、次の行が実行されてしまうねん」

娘「へえ〜」

よめ太郎「それが**非同期処理**やな」

娘「つまり・・・」
娘「1行目の処理が終わったら、2行目」
娘「2行目の処理が終わったら、3行目」
娘「そんな風にちゃんと**タイミングを合わせて**処理してくれるのが」
娘「**同期的な処理**で」

よめ太郎「そうそう」

娘「**前の処理の完了を待たずに、次の処理が走る**のが」
娘「**非同期処理**なんだね」

よめ太郎「その通りや」
よめ太郎「そして、さっきの`setTimeout()`は」
よめ太郎「**非同期的に**処理されるメソッド、ってことやな」

娘「なるほどね〜」

よめ太郎「ほかにも、**外部APIからデータを取得する処理**なんかも非同期やな」
よめ太郎「例えばQiitaのAPIからデータを取得しようとして・・・」

1. QiitaのAPIから、やめ太郎のフォロワー一覧を取得して、変数に格納する。
1. フォロワーさん達を、リストとして画面に表示する。

よめ太郎「↑こんな処理をしようとした場合に」
よめ太郎「非同期処理のことを考えずにコードを書いてしまうとマズいんや」

> JSくん「よっしゃ、QiitaのAPIに通信開始や！」
> JSくん「そして、すぐさまフォロワーさんの一覧を表示や！」
> JSくん「この`followers`いう変数に入っとるはずやな！」
> JSくん「あれ？何も入っとらんで！」
> JSくん「あかん、エラーや！！！」
>
> よめ太郎「そらせやろ」
> よめ太郎「まだ通信中や！」

よめ太郎「↑こんな感じになってしまうんや」

娘「なるほどー」
娘「APIとの通信とかって、何ミリ秒かかるのか予測できないから」
娘「完了を待たずに次の処理をしてくれようとしちゃうんだね」

よめ太郎「せやな」
よめ太郎「`setTimeout()`もそんな感じで」
よめ太郎「1秒待ってる間にも、次のコードを実行しようとしてしまうんや」

娘「同期が取れてないんだねぇ」

## じゃあ、どうやってカウントダウンするの？

娘「でもさあ」
娘「それなら、どうやってカウントダウン機能を実装するの？」

ワイ「そこはワイに任しとき！」
ワイ「要は**タイミングが合うように**書いてやればええんや」

```js:JavaScript
setTimeout(() => {
    console.log(5);
    // ここに次の処理を書く。
}, 1000);
```

ワイ「↑こんな感じや」

娘「どういうこと？」

ワイ「ええとな」
ワイ「`setTimeout()`の第一引数には、**1秒後に実行したい関数**を渡すやろ？」

娘「うん」

ワイ「**引数として渡される関数**・・・つまり**コールバック関数**やな」
ワイ「そのコールバック関数の中に、**次にやりたい処理も書いてやる**んや」
ワイ「上のコードで言うと、`console.log(5);`が実行された直後の部分に」
ワイ「次の処理も追加で書いてやればええんや」

娘「なるほどね」
娘「1秒経って、`console.log(5);`が実行された後で」
娘「次の処理が走るように、ってことかぁ」
娘「じゃあ、そこに次の`setTimeout()`を書けばいいんだね！」

ワイ「そうそう」
ワイ「せやから次は・・・」

```js:JavaScript
setTimeout(() => {
    console.log(5);
    setTimeout(() => {
        console.log(4);
        // ここに、更に次の処理を書く。
    }, 1000);
}, 1000);
```

ワイ「↑こうやな」
ワイ「こんな感じで、どんどん**入れ子**にしてやればええねん」

娘「なるほどー」
娘「パパ、すご〜い！」

ワイ「最終的には↓こうや！」

```js:JavaScript
setTimeout(() => {
    console.log(5);
    setTimeout(() => {
        console.log(4);
        setTimeout(() => {
            console.log(3);
            setTimeout(() => {
                console.log(2);
                setTimeout(() => {
                    console.log(1);
                    setTimeout(() => {
                        console.log(0);
                    }, 1000);
                }, 1000);
            }, 1000);
        }, 1000);
    }, 1000);
}, 1000);
```

娘「あれ？なんか・・・」
娘「地獄みたいに読みづらいコードになっちゃったけど・・・」

よめ太郎「**コールバック地獄**いうやつやな」

娘「このコールバック地獄に**非道鬼**が住んでるの？」

ワイ「せや」

よめ太郎「ムチャクチャ言うなや」
よめ太郎「せっかく娘ちゃんが理解しかけてたのに」
よめ太郎「**非道鬼**の話に戻ってしまったやないか」

ワイ「いやいや、綺麗なコードやと思うで」
ワイ「見てみい」

<img width="360" alt="スクリーンショット 2020-05-16 12.26.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/295452/22b13cbf-d788-31c7-e148-99445305057d.png">

ワイ「天使が持ってる**ハープ**みたいやで」
ワイ「地獄どころか、**天国**や」
ワイ「ワイは好きやけどな〜」

よめ太郎「そんなに好きなら**貴様を天国に送ったるわ**」

ワイ「ひ、**非道鬼ィ！**」

よめ太郎「誰が**非道鬼**や」

娘「（なんだこの家・・・）」

## それじゃあ、どうやって書けばいいの？

娘「で、結局どうすればいいの？」
娘「コールバック地獄にならないように、うまく非同期処理を繋げられる方法があるの？」

よめ太郎「あるで」
よめ太郎「**Promise**とか**async/await**やな」

娘「ふーん」
娘「**パパ、Promiseやasync/awaitって何？**」

ワイ「（**いや何でワイに聞くねん**）」

## Promise、async/awaitとは

ワイ「プロミス・・・つまりやな」
ワイ「消費者金融にお金を借りに行く前に」
ワイ「**a think**」
ワイ「いったん考えるんや」
ワイ「気軽に何十万も借りると、後から大変なことになってまうからな」

娘「そっか」

ワイ「そして、**await**」
ワイ「審査の間は大人しく待つんや」

#### よめ太郎「結局申し込んどるやないかい」
よめ太郎「代われ、わしが説明する」
よめ太郎「まずは**Promise**からや」

## Promiseとは

よめ太郎「Promiseを使うと、**連続した非同期処理**を書くときにも」
よめ太郎「ネスト地獄にならずに**フラットに書ける**んや」

娘「へぇ〜」
娘「どんな風に使うの？」

よめ太郎「`new Promise()`って感じで」
よめ太郎「**promiseオブジェクト**を生成するんや」

娘「promiseオブジェクト・・・」

よめ太郎「せや」

娘「よく分かんないけど、`setTimeout()`はどこに書くの？」

よめ太郎「`new Promise()`するときに、引数として**コールバック関数**を渡すんやけど」
よめ太郎「そのコールバック関数の中に`setTimeout()`とかを書くんや」

娘「またコールバック・・・？」
娘「連続して処理すると地獄になっちゃわない・・・？」

よめ太郎「大丈夫や」
よめ太郎「やってみるで」
よめ太郎「`new Promise()`するときにコールバック関数を渡すから・・・」

```js:JavaScript
const promiseObj = new Promise(() => {});
```

よめ太郎「↑こんなイメージやな」
よめ太郎「こんな感じで**promiseオブジェクト**を生成して、変数に格納するイメージや」

娘「うん」

よめ太郎「ほんで、そのコールバック関数の中に」
よめ太郎「`setTimeout()`とか`console.log(5)`を書くわけやから・・・」

```js:JavaScript
const promiseObj = new Promise(resolve => {
    setTimeout(() => {
        console.log(5);
        resolve();
    }, 1000);
});
```

よめ太郎「↑こんな感じや」
よめ太郎「この時点で`setTimeout()`は実行されて」
よめ太郎「1秒タイマーが開始されるんや」

娘「じゃあ、1秒後に`console.log(5)`が実行されるんだね」
娘「コールバック地獄のときは、その`console.log(5)`の後に」
娘「**次の**`setTimeout()`を書いてたけど」
娘「Promiseの場合は、次の`setTimeout`の代わりに」
娘「`resolve()`っていうのを実行してるね」
娘「`resolve()`を実行すると何が起こるの？」

よめ太郎「**次に実行したい処理**が実行されるんや」

娘「でもまだ次にやりたい処理は書いてないよ？」
娘「次の`setTimeout()`はどこに書くの？」

よめ太郎「**次に処理したい内容**は」
よめ太郎「**promiseオブジェクト**が持ってる`then()`メソッドに渡して**登録する**んや」
よめ太郎「**コールバック関数**としてな」

```js:JavaScript
const promiseObj = new Promise(resolve => {
    setTimeout(() => {
        console.log(5);
        resolve();
    }, 1000);
});

// 次にやりたい処理はthen（）に渡す。
promiseObj.then(() => {
    setTimeout(() => {
        console.log(4);
    }, 1000);
});
```

よめ太郎「↑こんな感じや」

娘「へえ〜」
娘「`setTimeout()`の中に`setTimeout()`・・・っていう風にネストしないで」
娘「外側に出てから次の処理を書けるんだね」

よめ太郎「せや」
よめ太郎「これは`resolve()`君のおかげや」
よめ太郎「`resolve()`を実行すると」
よめ太郎「`then()`メソッドで登録した**次の処理**が実行されるんや」

娘「後から`then()`に渡した**コールバック関数**が」
娘「そのまま`resolve`になるんだね！」

よめ太郎「いや、`then()`に渡した関数がそのまま`resolve`になる訳ではないんや」
よめ太郎「`resolve`が実行されたら、`then()`で登録した関数も実行される、っていうだけや」

娘「へー」
娘「下の`then()`で登録した関数が」
娘「上の`resolve()`きっかけで発動する、ってことか」
娘「そのまま`resolve`に入って来る訳ではないんだね」

よめ太郎「せや」
よめ太郎「だから、何回も`then()`して、複数の関数を登録することもできるで？」

```js:JavaScript
const promiseObj = new Promise(resolve => {
    setTimeout(() => {
        console.log(5);
        resolve();
    }, 1000);
});

promiseObj.then(() => {
    setTimeout(() => {
        console.log(4);
    }, 1000);
});

// 複数回then()することもできる。
promiseObj.then(() => {
    setTimeout(() => {
        console.log('もう1個！');
    }, 1000);
});
```

よめ太郎「↑こうやな」
よめ太郎「これで、1秒後に`5`がコンソールに表示されて」
よめ太郎「それから更に1秒後に`4`と`もう1個！`がコンソールに表示されるんや」

娘「へえ〜」
娘「何となくだけど分かってきたかも」
娘「1つ目の`setTimeout()`の中に、2つ目の`setTimeout()`を書くんじゃなく」
娘「1つ外に出て、`then()`に渡す関数のところで書けるから」
娘「連続で`setTimeout()`をしても、**ネスト地獄にならない**ってことだね！」

よめ太郎「そう！」
よめ太郎「その通りや！」
よめ太郎「試しに、もっと連続して`setTimeout()`してみるで！」
よめ太郎「ちょっとコード長くてごめんやで」

```js:JavaScript
new Promise(resolve => {
    setTimeout(() => {
        console.log(5);
        resolve();
    }, 1000);
})
    .then(() => {
        return new Promise(resolve => {
            setTimeout(() => {
                console.log(4);
                resolve();
            }, 1000);
        });
    })
    .then(() => {
        return new Promise(resolve => {
            setTimeout(() => {
                console.log(3);
                resolve();
            }, 1000);
        });
    })
   .then(() => {
        return new Promise(resolve => {
            setTimeout(() => {
                console.log(2);
                resolve();
            }, 1000);
        });
    })
    .then(() => {
        return new Promise(resolve => {
            setTimeout(() => {
                console.log(1);
                resolve();
            }, 1000);
        });
    })
    .then(() => {
        setTimeout(() => {
            console.log(0);
        }, 1000);
    });
```

娘「ほんとだ、ネストはしてないね・・・」
娘「でも・・・」

## もっとスッキリ書きたい

娘「もっとスッキリ書けないの？」

よめ太郎「書けるで」
よめ太郎「`new Promise()`する部分を関数にしてやるんや」
よめ太郎「ほぼ同じこと何回も書いてるからな」

```js:JavaScript
const promiseMaker = num => {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log(num);
            resolve();
        }, 1000);
    });
};
```

よめ太郎「↑こんな感じや」
よめ太郎「`console.log()`に渡す数値は**毎回変わる**から」
よめ太郎「この`promiseMaker()`の引数として渡せるようにしておいたで」
よめ太郎「引数名は`num`や」
よめ太郎「使い方としては・・・」

```js:JavaScript
promiseMaker(5)
    .then(() => promiseMaker(4))
    .then(() => promiseMaker(3))
    .then(() => promiseMaker(2))
    .then(() => promiseMaker(1))
    .then(() => promiseMaker(0));
```

よめ太郎「↑こうや」

娘「わあ」
娘「だいぶ**非道鬼**っぽさが減ったね！」

よめ太郎「せや。スッキリやろ？」

娘「うん」
娘「`then().then().then()`って、繋げて書けるんだね」

よめ太郎「せや」
よめ太郎「`then()`の返り値は**promiseオブジェクト**やから、また`then()`メソッドを持ってんねん」
よめ太郎「せやから、どんどん`then()`を繋げて書けるんや」
よめ太郎「これが**promiseチェーン**ていうやつやな」

## 外部APIからデータを取得する例

よめ太郎「外部APIからのデータ取得なんかも非同期的な処理やから」
よめ太郎「連続してやろうとすると**コールバック地獄**になりがちなんやけど」
よめ太郎「`Promise`を使えば大丈夫や」

娘「`Promise`が無いとどうなるの？」

よめ太郎「ええとな」
よめ太郎「APIからデータを取得する場合は」

```js:JavaScript
getApiData(apiUrl1, (response) => { /* データ取得後にやりたい処理 */ });
```

よめ太郎「こんな感じで、データ取得後にやりたい処理を」
よめ太郎「**コールバック関数で**渡さないといけないことが多いんや」

娘「そっか、非同期だもんね」
娘「タイミングを合わせるために」

> 「関数を渡しておくから、データ取り終わったら実行してね！」

娘「って感じでお願いするわけだもんね」

よめ太郎「せやせや」
よめ太郎「だから、連続して処理しようとすると・・・」

```js:JavaScript
getApiData(apiUrl1, response1 => {
    getApiData(apiUrl2, response2 => {
        getApiData(apiUrl3, response3 => {
            /* 最終的にやりたい処理をここに書く。 */
        });
    });
});
```

よめ太郎「↑こう、ネストしてしまうんや」
よめ太郎「でもPromiseを使うと・・・」

```js:JavaScript
new Promise(resolve => {
    getApiData(apiUrl1, response => resolve(response.userData));
})
    .then(userData => nextFunc(userData));
```

よめ太郎「↑こんな感じで**1回外に出て**」
よめ太郎「`then()`に渡す関数のところで次の処理を書けるから」
よめ太郎「ネスト地獄にはならへんのや」
よめ太郎「例えAPIを連続で叩いてもな」

娘「へえ〜」
娘「っていうか」
娘「`resolve()`を実行する時に**引数を渡す**こともできるんだね」

よめ太郎「そうやで」
よめ太郎「むしろ**引数を渡すことの方が多い**で」
よめ太郎「外部APIからデータを取得して、そのデータを`resolve()`に渡す」
よめ太郎「渡されたデータは`then()`に渡す関数で受け取る」

娘「じゃあ、`then()`に渡す関数は」
娘「**引数を受け取るように**書かないとだね！」

よめ太郎「そうや」

```js:JavaScript
    .then(userData => nextFunc(userData));
```

よめ太郎「↑こんな感じやな」

娘「そっか」
娘「`resolve()`実行時に渡した引数が」
娘「この`userData`っていう引数に入って来るんだね」
娘「無理やり**擬人化**すると・・・」

## Promiseを擬人化してみた
プロミスくん「ああ〜、早く**生まれたい**な〜」
プロミスくん「ねぇ、そこの4歳娘ちゃん！」
プロミスくん「ワイを**生成**してや！」
プロミスくん「お役に立てるかもしれんで！」

娘「いいけど、何の役に立ってくれるの？」

プロミスくん「**連続した非同期処理**の扱いが得意や！」
プロミスくん「連続してAPIを叩く系の処理とか、上手く扱えるで！」

娘「え？助かる！」
娘「ちょうど連続してAPIを叩きたかったの！」
娘「プロミスくん、**生成したい！**」

プロミスくん「おお、もうすぐワイも誕生できるんやな！」
プロミスくん「ちなみに、どんな非同期処理を扱ってほしいの？」

娘「えっとね」
娘「↓この案件を扱ってほしいの！」

> - APIからデータを取得してくる。
> - 無事データを取得してこれたら、そのデータを元に**2つ目のAPI**を叩きたい。

プロミスくん「APIからデータを取ってこれたら」
プロミスくん「次はそのデータを元に別のAPIを叩きたい感じか！」
プロミスくん「よっしゃ！この案件、ワイが扱うで！」

娘「ありがと！」

プロミスくん「ほな、まず**1つ目のAPIを叩く処理**を関数として書いて」
プロミスくん「それを**コールバック関数**として渡しながらワイを生成してくれ！」

娘「分かった！」
娘「はい！コールバック関数を書いたよ！」

プロミスくん「あ、そのコールバック関数を実行するときに」
プロミスくん「`resolve`ってものを渡すから」
プロミスくん「`resolve`を受け取って実行するように書いといてくれ！」

娘「`resolve`を受け取って、実行する・・・」
娘「実行する、ってことは`resolve`は関数なんだね！」

プロミスくん「せや！」

娘「分かった！ちょっと書き換えるね！」
娘「でも`resolve`はどのタイミングで実行するように書けばいいの？」

プロミスくん「APIデータ取得完了後に」
プロミスくん「`resolve(apiData)`って感じで実行するように書いてくれ！」

娘「データ取得完了後に`resolve(apiData)`ね！」
娘「そこは自分で書かなきゃいけないんだね！」
娘「はい！そういう関数に書き換えたよ！」

プロミスくん「ほな、その関数を渡して、ワイを生成してくれ！」

娘「出でよ！プロミスくん！」

プロミスくん「やっと誕生できたわ！」
プロミスくん「これで、無事データが取って来れた暁には」
プロミスくん「そのデータが`resolve()`経由で**次の処理**に渡るで！」

娘「**約束**だからね！」

プロミスくん「おう！無事データが取れたらな！」

娘「了解！」
娘「あれ、でもまだ**2つ目のAPIを叩く処理**の内容を伝えてないよ！」

プロミスくん「せや！」
プロミスくん「ほな、**続きの処理**の内容を**関数として書いて**」
プロミスくん「ワイの`then()`メソッドに渡してや！」

娘「分かった！**続きの処理**は`then()`メソッドに渡すね！」
娘「1つ目の処理の**その後に**実行したい処理だから」
娘「`then()`メソッド、っていう名前なんだね！」

プロミスくん「せや！」

娘「・・・はい！**続きの処理**の関数も書けたよ！」
娘「この関数は、**最初のAPIデータ**を引数として受け取って」
娘「それを元に**2つ目のAPIを叩く**・・・」
娘「そんなテイで書いたよ！」

プロミスくん「それでオッケーや！」
プロミスくん「これをワイの`then()`メソッドに登録しておくで！」
プロミスくん「これで、最初のAPIからデータが取れた場合」
プロミスくん「そのデータを元に、2つ目のAPIが叩かれるはずや！」

娘「ありがとう！」

プロミスくん「おっ、最初のAPIからデータが無事に取得できたようやで！」

娘「あ、ちゃんと2つ目の処理も実行されてる！」

プロミスくん「よかったな！」

娘「うん！でも・・・」
娘「なんで関数を2個も書かないといけないの？」
娘「プロミスくんを生成する時に渡す関数と」
娘「`then()に`渡す関数」

プロミスくん「いや、むしろ2つに分けるから」
プロミスくん「コールバック地獄にならへんねん」

娘「あ、そっか」
娘「1つの関数の中にネストして書くと地獄になっちゃうけど」
娘「プロミスくんが`resolve()`経由で値をうまいこと渡してくれるから」
娘「`then()`に渡す関数のところで**続きの処理**を書けるんだね」

プロミスくん「そういうことや！」

## 妄想終了

娘「・・・こんな感じだね」

よめ太郎「せやな」
よめ太郎「実際の場面としては・・・」

> 「やめ太郎のフォロワーさん一覧をAPIから取得や！」
> 「次は、そのフォロワーさん達が他に誰をフォローしているかAPIから取得や！」
> 「その情報を元に、また別のAPIを叩く！」

よめ太郎「・・・なんて処理をする時は、Promiseを使うと書きやすくなるかもな」

## 処理が失敗したときのことも書ける

よめ太郎「非同期処理は失敗することもあるから・・・」

> プロミスくん「なんかエラーが出て失敗した場合にはどうすればいい？」
> プロミスくん「エラーが起きた場合にやって欲しい処理があったら」
> プロミスくん「その内容を関数にして、ワイの`catch()`メソッドに渡してや！」

よめ太郎「なんてこともしてくれるんやで」

娘「なんか`then()`に似てるね」

よめ太郎「そうそう」
よめ太郎「失敗した場合の`then()`みたいなもんや」

娘「そっか、**APIからのデータ取得処理**なんかは」
娘「必ず成功するわけじゃないもんね」

よめ太郎「せやせや」
よめ太郎「あの有名な**axios[^2]**の`get()`メソッドなんかも」
よめ太郎「戻り値は**promiseオブジェクト**やで」
よめ太郎「だから・・・」

```js:JavaScript
axios.get('http://api.example.com/user/1')
  .then(response => nextFunc(response))
  .catch(error => console.log(error));
```

よめ太郎「↑こんな風に書けるんや」

娘「なるほどね〜」

よめ太郎「まだまだ奥が深いから」
よめ太郎「よかったら下の方に書いてある**参考文献**も読んでみてな！」

娘「うん！」

## そういえばasync/awaitは？

娘「ママ、そういえば」
娘「**async/await**はどんな感じなの？」

よめ太郎「長くなり過ぎたから、次回説明するわ」

娘「その記事はいつ公開？」

よめ太郎「公開タイミングは分からん」
よめ太郎「**非同期**だけにな」

**〜つづく〜**

## まとめ
+ 入れ子になりそうなコールバック処理も、  
`Promise`を使ったら割と平坦に書けた。

## 参考文献

1. [Promiseを使う - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Using_promises)
1. [Promise - MDN - Mozilla](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise)
1. [Promise.prototype.then() - MDN - Mozilla](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/then)
1. [Promise() コンストラクター - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise)


[^1]: 「そのまま`then()`の戻り値になる」という訳ではなく、今回の例だと同じになるだけのようです。`then()`がどんなpromiseオブジェクトを返すのかは条件によって変わります。（参考文献：[Promise.prototype.then() - MDN - Mozilla](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/then)）
[^2]: 外部APIからデータを取得する為のライブラリ。