[恋に落ちるラジオ] 恋に落ちるPromise -Promise of Love.-

　……なんかすっげえ久しぶりな感じがするぞ。どんなキャラだったっけ、私。徐々に思い出すから待っててね。
　それじゃ、行きます！　タイトルコール！
　｜木更津彩《きさらづあや》の、恋に落ちる、プロミス！

　＊

　改めまして、こんばんプロミスー。恋に落ちるPromise、パーソナリティの木更津彩です。花も恥じらう現役女子中学生ですよ。
　この番組は、888.8MHz、敦賀ガベージコレクションFMからお送りしております。

　この番組ってどんな番組だったっけ？　とココロがハテナなそこの若人。
　この番組は、生活になくてはならない非同期処理でのお約束、JavaScriptのPromiseオブジェクトについての最新情報をお伝えする、生活密着型の情報番組なんですよ。
　あなたの心にー、エイシンク・アンド・アウェイト！

　この番組は、敦賀こんぶ館、敦賀かまぼこ道場、敦賀みかん農園の提供でお送りします。

　＊

　さてさて、メールボックスがパンクしてたのでどしどし御紹介しますね。
　えーと、ラジオネーム、おろし蕎麦は究極のメニューさん。いつもいつもありがとね！

『彩ちゃん、こんばんプロミス。』
　はい、こんばんプロミスー。
『Promiseって最近よく聞くんですけど、どうやって使うのかピンときません。気になってソーシャルクラッキングも手につきません。彩ちゃん、やさしく教えて下さい』……

　はい、ありがとうございます。番組特製練り消しを差し上げます。とろろ昆布の香り付きだよ。
　Promiseオブジェクトって、JavaScriptではもはや常識のレベルなんですけど。知ってる人からすると鼻で笑われて鼻息がバンバンかかって不快になるレベルなんですけど。
　でも、初心者からすると、ものすごく理解しにくい存在なんですよね。中級者にステップアップしようとするボーイズアンドガールズに立ちはだかる中ボスみたいな存在。大人の階段登ってるボーイズアンドガールズを蹴っ飛ばしてナントカ行進曲よろしく転がり落とす存在。あー恐ろしい。
　そんなニクいあいつを、今日はばっちり理解してやりましょう。

　＊

　JavaScriptのプログラムって、通常は上から下に進んでいきます。ま、これはわかりますよね。
　で、ある値に対してある処理を行い、その結果に対してまた別の処理を行い……って場合。これもよくありますよね。
　そんな時。

var x;
x = 処理A(x);
x = 処理B(x);
x = 処理C(x);

　……あ、コードちゃんと見えてますか？　この放送は見えるラジオでお送りしておりますけれども。
　で、こんな風に書きたくなる気持ち、よくわかります。彩、すっごいわかるよ。私も昔はそんな無垢で純真な少女でした。
　でもね。処理は上から順番に進むけど、前の処理が終わるまで待ってくれるわけじゃない、ってこと。これ大事。

　カップ焼きそばで言うとね。フタ開けて、お湯入れて、3分待って、お湯を捨てる……っていう順番にやらなきゃいけないのに、全部同時にやっちゃうようなもんなの。フタ開けながらカップ焼きそばひっくり返して上から熱湯注いでるようなもんなの。色んな意味で大惨事だよ。
　だからね、前の処理が成功したことを確認した上で、次のステップに進むようにコードを書かなきゃいけないわけ。

　じゃあしょうがないってことで、

var x;
x = 処理C(x) {
    処理B(x) {
        処理A(x) {
            return x;
        }
        return x;
    }
    return x;
};

　あ、見えるラジオの表示、切り替わりましたかね。
　こんな風に書くと、処理Cの中で処理Bが呼び出され、処理Bの中で処理Aが呼び出されることによって、ちゃんと変数xに対して処理A→B→Cの順に処理が行われます。
　だけどねー……
　全然イケてないよね、こんなコード。恋に落ちないよね。インスタ映えしないよね。
　別の処理を増やすことになったらすっごく大変だし、その度にネストも増えていくし。とにかく読みづらい。

　ここで、本日の主役の登場です。
　こういう時に本領を発揮するのが、Promiseオブジェクトなんですよ。

　＊

　では、続いてのメールです。
　えー、ラジオネーム、かたパン超合金さん。ありがとうございます。

『彩ちゃん、こんばんプロミス。』
　はい、こんばんプロミスー。
『Promiseを使った具体的なコード例を教えてください、というメールを送ったら多分採用されると思ったので書きました。』……

　はい、ありがとうございます。番組特製ステッカー差し上げます。正直な人好きよ。
　さっきのコードをPromiseオブジェクトを使って書き直すとこんな感じになります。

var x;
x = 処理A(x)
.then(x => 処理B(x))
.then(x => 処理C(x))

　とってもスッキリしてシャレオツなコードですね。インスタ映え間違い無し。
　んじゃ、そこそこ真面目に解説しますよ。

　まず、処理Aとか処理Bは、必ず結果としてPromiseオブジェクトを返すように書かないといけませんよ。
　具体的には、処理が終わるまで待ち、成功したらresolve（解決）っていうPromiseオブジェクトを返すんですね。上手く行ったぜ！　って太鼓判の押されたオブジェクト。
　で、それに.thenメソッドを繋げることで、その戻り値を受け取った状態で次の処理を書くことが出来るんですよ。この.thenメソッド自体もPromiseオブジェクトを返すので、延々と繋げて書くことができる。これを「メソッドチェーン」といいます。then then then世からずっと続いてるみたいな。
　こう書くことで、意図した順番で処理を行うことができるんです。

　それからですね。Promiseオブジェクトは、次の3つの状態のうちのどれかを返すようになってます。信号機みたいな感じで。
　まずひとつは、「成功したよ」って状態。青信号だね。処理が上手くいったら、ドヤ顔でfulfilledって言ってる状態。
　次に「ふええ……失敗しちゃった……」って状態。赤信号だね。処理が失敗した時に、泣き顔の幼女がrejectedって言ってる状態。
　最後に、まだ処理が完了していない状態。黄信号……かな？　成功も失敗もしていない場合はpendingです。
　で、状態がfulfilledに変わった時に、resolveを返すわけですね。

　まとめると、処理が終わるまで待っててあげる、という約束をしてくれるわけです。だからPromise。ええ話や。

　＊

　さて、そろそろお時間となりました。早いですねー。
　番組では、質問、感想、なんでもメールで受け付けてます。どしどし送ってくださいね。

　じゃあ、次回も楽しみにしてくださいね。
　お相手は、あなたの心にエイシンク・アンド・アウェイト、木更津彩でした。
　それでは、バイバイプロミスー！