はじめに
ここ最近、アルバイトとしてkintoneのプラグイン開発などをさせていただく中で、javascriptの勉強をしているのですが、その中でPromiseという便利なオブジェクトを使うことになる機会が多くなりました。初心者からすると意外ととっつきにくかったので、こちらでまとめてみようかなと思います。
何本かの記事に分けてゆっくり説明していく予定です～～(^^)/
想定読者
javscriptを勉強して間もない方、Promiseって聞いたことあるけどよく知らない方、など。javascriptのコードを少し読んだことのある人を想定しました。
①非同期処理でPromiseを使わないと？？
まずは、下のコードを見てください：
console.log('START!')
setTimeout(function(){
//2秒（＝2000ミリ秒）待ってからここの処理を実行する
//なにか「外部」のサービスを利用したりすることを想定してください。
console.log('setTimeout was finished just now!');
}, 2000);
console.log('FINISH!');
ここで、setTimeout関数は、渡された処理を指定した時間（ミリ秒）だけ待ってから実行する非同期処理の関数です。
上のコードでは、setTimeoutの中の処理のあとに'FINISH!'と出力したいという想定なのですが、このコードの結果は以下のようになります：
START!
FINISH!
setTimeout was finished just now!
わかりましたでしょうか？
そうです、２秒待ってる（かかっている）間に後続の処理が実行されてしまうんですね！これは困りました。。非同期処理は順序を管理するのがなかなか難しいのです(>_<)
そして、この問題を解決してくれるスーパーヒーローがPromiseなのです！！
②Promiseを使ってみよう
何はともあれ、具体的な使い方を見ていきましょう！
先ほどのcode1_1.jsを、Promiseを使って書き換えてみたものが以下のコードになります：
console.log('START');
//Promiseオブジェクトの中に、監視させたい非同期処理を記述します
new Promise(function(resolve, reject){
setTimeout(function(){
console.log('setTimeout was finished just now!');
//「このPromiseは処理完了状態になりましたよ！」と宣言するものが、resolve関数なのだ！！
resolve('SUCCESS!');
}, 2000);
})
//resolveが呼び出されると、thenの中に記述するコールバック関数が呼び出される
.then(function(message){
//resolveの引数をここで受け取って使うことが出来る
console.log(message);
console.log('FINISH!');
});
START
setTimeout was finished just now!
SUCCESS!
FINISH!
上のコードについて説明します。
まず最初に、new Promiseでは、非同期処理を監視してくれるPromiseオブジェクトを生成しています。
そしてPromiseの中に記述した関数の中で非同期処理を実行するのですが、そのときの引数resolveとrejectがポイントです。これらはそれぞれ、Promiseの中の非同期処理が終わりましたよ！失敗しましたよ！と知らせるための関数なのです！！
別の言い方をすると、「Promiseは、監視している非同期処理が終わるまで待ってくれるいいやつ！」と表現することもできます。
また、resolve関数の引数に渡した値をthenのコールバック関数で受け取れることは大事なポイントですのでしっかり覚えておいてください(^^)
なお、reject関数が呼び出されたときは、catchというメソッドで処理を引き継ぐことができます：
console.log('START');
new Promise(function(resolve, reject){
setTimeout(function(){
console.log('setTimeout was finished just now!');
reject('FAIL!');
}, 2000);
})
.catch(function(message){
console.log(message);
console.log('FINISH!');
});
START
setTimeout was finished just now!
FAIL!
FINISH!
使い方はthenと全く同じことがわかるかと思います！
ただ、実際的な使い方としては、たとえば何かしらのAPIにリクエストを送ったりしたときに、エラーオブジェクトが返ってきた場合にそれをそのままrejectに渡すことで、catchの部分でそのエラーオブジェクトを出力することがよくあります。
まとめ
いかがだったでしょうか？
「Promiseって聞いたことあるし何となくコードも読んだことあるけど、ぶっちゃけよくわかってない」という方には新鮮に感じられたのではないかと思います！
それではまた次回の記事で～～(^^)/