【JavaScript】promiseと非同期処理を初学者向けに解説

という方向けの解説となります。

画像を読み込んだり、非同期処理を実装したい場合にpromiseの機能はとても役立ちます。当記事がjavaScriptのPromise・非同期処理の理解の助けになれば幸いです。

筆者
・独学でゲームを作っている男
・javascriptが大好きな男

非同期処理　とは

非同期処理とは、ある処理を実行しながら別の処理を実行できる方式を指します。

簡単に言えば、スマホのバックグランド再生(アプリを使いながら、youtubeの音楽を再生する)が近いです。

画面を読込しつつ「もし画像ファイルが入っていたらそのファイル名を戻り値として出力しなさい」などが実際の処理となります。

Promise　とは

この非同期処理を効率的に扱うための機能がPromiseです。

Promiseには非同期処理が成功・失敗した際に呼び出されるコールバック関数が2つあり、それがresolve・rejectです。

使う場面・具体的な使い方をみていきましょう。

Promise　を使いたい時

こちらのコードをご覧ください。

• console.log(“1”);
• setTimeout(() => {
•   console.log(“2”);
• }, 1000);
• console.log(“3”);

感覚的にはconsoleに1⇒2⇒3　と順に表示されそうですが…
setTimeoutがあることで⇩のようになってしまいます。

1秒後に表示する(=setTimeout(){},1000)処理の影響で想定した順番になってくれません。
Promiseはこの問題を解消してくれます。こちらをご覧ください。

• console.log(“1”);
• new Promise((resolve) => {
•   setTimeout(() => {
•     console.log(“2”);
•     resolve();
•   }, 1000);
• }).then(() => {
•   console.log(“3”);
• });

想定した順番で出力されました。

javascriptは、一つ前の実行に時間がかかった場合、実行完了を待たずに次の処理が行われてしまう特性を持ちます。そのための機能がPromiseです。

具体的な書き方を見ていきましょう。

Promise　の書き方

こちら、Promiseインスタンスの作成方法です。

• const promise = new Promise((resolve, reject) => {});

Promiseの引数に関数を渡します。
第一引数：resolve・第二引数：reject　はそれぞれ関数。これを設定します。

resolve()の使い方

処理が成功した時は「resolve」です。

resolve関数は引数を受け取ることができ、次に呼ばれるthenメソッドの第一引数に渡すことができます。

• const promise = new Promise((resolve,reject)=>{
•   //引数を関数に渡します
• resolve(“resolveしましたよ”);
• }).then((e)=>{
•   //resolve関数で渡した文字列を受けとる
•   console.log(e)
• })
• //実行結果：“resolveしましたよ”

reject()の使い方

処理が失敗した時は「resolve」です。

reject関数も引数を受け取ることができ、次に呼ばれるcatchメソッドの第一引数に渡すことができます。

• const promise = new Promise((resolve,reject)=>{
•   //引数を関数に渡します
• reject(“rejectしましたよ”);
• }).then((e)=>{
•   //resolve関数で渡した文字列を受けとる
•   console.log(e)
• }).catch((a)=>{
•   //reject関数で渡した文字列を受けとる
•   console.log(a)
• })
• //実行結果：”rejectしましたよ”

thenは処理されずに、catchのみが処理されたのが分かります。

Promise.all()の使い方

最後によく使うPromise.all()をご紹介

Promiseオブジェクトを渡し、全てのPromiseオブジェクトの処理が完了したら進みます。

• const promise1 = new Promise((resolve,reject)=>{
• setTimeout(()=>{
•            resolve(“promise1　終わり”)
•            },1000)
• }).then((e)=>{
•   console.log(e)
• })
• const promise2 = new Promise((resolve,reject)=>{
•   setTimeout(()=>{
•     resolve(“promise2 終わり”)
•   },2000)
• }).then((f)=>{
• console.log(f)
• })
• Promise.all([promise1,promise2]).then(()=>{
•   console.log(“promise1.2が終わったよ！！！”)
• })
• //実行結果
• //1秒後⇒“promise1　終わり”
• //2秒後⇒“promise2　終わり”
• //2秒後⇒“promise1.2が終わったよ！！！”

このように全てのPromiseが終わったことを条件に処理を入れることができます。

Promise()　のまとめ

最後にポイントをおさらいしましょう。

Promiseは「画面をロードにした時に格納できる画像ファイルがある場合は～」などゲームを作る時に特に便利な機能です。

当記事がjavascriptでゲームを作ったりする時の理解の助けになれば幸いです。