支援対象地域:札幌、仙台、関東、愛知、関西、広島、福岡


1.JSのPromiseとは

JSのPromiseは、非同期処理の最終的な完了もしくは失敗を表すオブジェクトとなります。 まず、非同期処理の説明の前に同期処理の説明をさせて頂きます。同期処理とは、あるタスクを順番に実行する方式のことで、そのタスクが実行されている間は他のタスクが中断される方式となります。 同期処理にはいくつかの欠点があります。最たる例としてディスクアクセスなどのI/O処理の場合、メモリアクセスと比べると非常に遅い事が多く、ファイルやソケットが読み出しを完了するまで処理を止める必要があるので、その間は他の処理をすることができなくなります。

非同期処理とは、ある処理を実行する間に他の処理を実現することができます。 I/O処理に限らずブロックというのは、クライアントサイドにおいては大きな問題となります。アプリケーションのメインスレッドとしてUI専用のスレッド、ユーザからの操作を受け付けるためのイベントループの処理が動作しており、開発者が同スレッドにて処理をブロックするとイベントが処理できなくなります。結果としてユーザから見ると画面が止まったかのような体験となるので、UI以外の処理を同一スレッド上で実行するのを避けなければなりません。 もちろんサーバサイドにおいてもCPUを遊ばせておく必要性が低いので重要なテクニックであることには代わりありません。
本質的に、JSのPromiseとはコールバックを関数に渡すかわりに、関数が返したオブジェクトに対してコールバックを登録するようにする、というものになります。 コールバックとは、プログラム中で、ある関数などを呼び出す際に別の関数などを途中で実行するよう指定する手法のことになります。呼び出し側の用意した関数などを、呼び出し先のコードが「呼び出し返す」(callback)ように登録します。
旧来のコールバック渡しとは異なり、JSのPromiseでは以下が保証されています。 現在のJSイベントループの実行完了より前には、コールバックが決して呼び出されません。 非同期処理が完了もしくは失敗した後に、then()により登録されたコールバックでも呼び出されます。 then()を何回も呼び出して複数のコールバックを追加してもよく、それぞれのコールバックは追加順に独立して実行されます。 最もすぐわかるJSのPromiseの利点は、Promiseチェーンとなります。

2.JSのPromiseの使用方法

JSのPromiseの記述をする前に、非同期にて以下の記述があった場合の処理結果を記述します。
・処理内容1
console.log("1番目です。");…①
// 1秒後に実行する処理
setTimeout(() => {
console.log("2番目です。(1秒後に実行します。)");…②
}, 1000);
console.log("3番目です。");…③
・処理結果1
1番目です。
3番目です。
2番目です。(1秒後に実行します。)
本来出力したい順番は、①、②、③なのですが、上から順に①を表示した後に、②を表示する際に、setTimeoutを使用しています。setTimeoutは繰り返さずに一度だけ、一定時間後(今回は1秒後を指定)に特定の処理を行うことができます。そのため、③を表示した後に、②が表示されます。
JSのPromiseにて上の処理内容を順番通りに表示させたい場合、以下の記述になります。
・処理内容2
console.log("1番目です。");…①
// お約束を取り付けたい処理にPromise
new Promise((resolve) => {
//1秒後に実行する処理
setTimeout(() => {
console.log("2番目です。(1秒後に実行します。)");…②
//無事処理が終わったことを伝える
resolve();
}, 1000);
}).then(() => {
// 処理が無事終わったことを受けとって実行される処理
console.log("3番目です。");…③
});
・処理結果2
1番目です。
2番目です。(1秒後に実行します。)
3番目です。
上の内容で記載した場合、出力したい順番通りに①、②、③と出力されます。

Promiseには3つの状態があります。 Promiseには、PromiseStatusというstatusがあり、3つのstatusがあります。
1.pending: 未解決 (処理が終わるのを待っている状態)
2.resolved: 解決済み (処理が終わり、無事成功した状態)
3.rejected: 拒否 (処理が失敗に終わってしまった状態)
new Promise()で作られたPromiseオブジェクトは、pendeingというPromiseStatusで作られます。
処理が成功した時に、PromiseStatusはresolvedに変わり,thenに書かれた処理が実行されます。
処理が失敗した時は、PromiseStatusがrejectedに変わり、catchに書かれた処理が実行されます。

2.最後に

処理を作るうえで、同期処理であれば単純に処理を順番に記述すればいいですが、非同期処理の場合、どこを非同期として、順番が必要なら順番を意識し、処理の途中で何か起こった場合にどのようにするのかを意識する必要があります。 JavaScriptにて、非同期処理の記述が必要な場合Promiseにて記述してみてください。