JavaScriptのPromiseの仕組みについて現役エンジニアが解説【初心者向け】

JavaScriptのPromiseの仕組みについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

目次

• Promiseとは
• Promiseの動作の仕組み
• 実際に使ってみよう
• まとめ

 

Promiseとは

非同期処理の完了または失敗を表すオブジェクトです。

非同期処理とはなにか。非同期処理を理解するために、まずは同期処理について説明します。

同期処理とは、平たく言うと「ソースコードの上から順番に処理される」ことです。
JavaScriptは通常、ソースコードの上の行から順に処理がおこなわれます。

具体的な例を紹介します。
下記のソースを実行すると、コンソールには1つ目、2つ目、3つ目と表示されます。

console.log('1つ目');
console.log('2つ目');
console.log('3つ目');

ここで仮に2つ目の処理に時間がかかっても、3つ目の処理は2つ目の処理が終わるまで実行されません。
同期処理では、必ず順番どおりに処理がおこなわれます。
つまり、順番どおり＝同期している　となります。

これに対して非同期処理は、同期していない処理、つまり順番どおりではない処理ということになります。
具体的な例を紹介します。
下記のソースを実行すると、コンソールには、1つ目、3つ目、2つ目と表示されます。

console.log('1つ目');
setTimeout( () => console.log('2つ目'), 5000);
console.log('3つ目');

setTimeoutメソッドを使って、2行目の処理を5秒後に実行するようにしています。
setTimeoutを使ったことで、非同期になり2つ目の処理の終わりを待たずに3つ目が実行されています。

同期処理だと必ず順番どおりになる代わりに、途中に大きなデータを取得するような時間のかかる処理があると、その後の処理がおこなわれないため、画面の表示がとまったり、操作できなかったりするような状態になります。

非同期処理にすることで、時間のかかる処理を待たずにその後の処理がおこなわれ、画面の表示や操作ができるようになります。

 

[PR] フロントエンドで副業する学習方法を動画で公開中

Promiseの動作の仕組み

非同期処理の後に処理をおこないたいケースがあります。
たとえば、いつ完了するかわからない通信をする処理を非同期にして、その後で通信結果を使って処理をするようなケースです。

Promiseオブジェクトを使うと、非同期処理の後に処理をおこなうことができます。
記述方法がいくつかあるので、今回は簡単なものを1つ紹介します。

new演算子を使って生成するとPromiseオブジェクトを作成できます。
作成の際は、引数に関数を渡します。
その関数の引数に2つの関数を渡します。

具体的には、下記のような記述になります。

new Promise( (functionA, functionB) => {
  //ここで非同期の処理をおこない、結果によって引数のどちらかの関数を呼び出す。
  //1つ目の関数を呼び出すと、処理が成功したことになる。
  //2つ目の関数を呼び出すと、処理が失敗したことになる。
})

上記の例では、functionAとfunctionBという2つの関数を引数に持った関数をPromiseの引数に渡しています。

引数の関数名は自由につけられます。
1つ目の関数名には「解決する」を意味するresolve、2つ目の関数名には「拒否する」を意味するreject　という名前をつけることが多いです。

2つの関数のうちどちらかが実行され、成功か失敗かによってその後の処理がわかれます。

1つ目の関数が呼ばれた場合は、処理が成功して完了したという状態になりthenメソッド、2つ目の関数が呼ばれた場合は、処理が失敗したという状態になりcatchメソッドが実行されます。thenもcatchも引数に関数を渡します。

これで、Promiseの中でおこなわれた非同期の処理の後に、thenまたはcatchによってその後の処理が実行されます。

 

実際に使ってみよう

最初に紹介した非同期の例のソースを、Promiseを使ってその後の処理を作成してみます。

下記のソースを実行すると、コンソールには、1つ目、3つ目、2つ目と表示されます。
setTimeoutにより2つ目の処理の完了を待たずに（非同期）3つ目の処理がおこなわれています。

console.log('1つ目');
setTimeout( () => console.log('2つ目'), 5000);
console.log('3つ目');

ここで、1つ目、3つ目、2つ目と表示された後に、なにかを表示したい場合にPromiseを使います。

console.log('1つ目');

new Promise( (success, fail) => {
  setTimeout( () => {
    console.log('2つ目');
    success();
  }, 5000);
})
  .then( () => console.log('成功した後の処理です'))
  .catch( () => console.log('失敗した後の処理です'));

console.log('3つ目');

この処理の結果は、下記のようにコンソールに表示されます。
2つ目の後に表示が追加されていることが確認できました。

1つ目
3つ目
2つ目
成功した後の処理です

2つ目と表示する処理のsetTimeoutをPromiseに渡した関数の中で実行しています。
その後、引数の1つ目の関数であるsuccessを呼び出しているので、thenに渡した関数が実行されています。
引数の2つ目の関数であるfailを呼び出すと、catchに渡した関数が実行されることになります。

今回の例では、コンソールに出力するだけなので成功で完了として、1つ目の関数を呼び出しています。
通信をおこなうような処理などを非同期におこなう場合は、処理の結果に合わせて呼び出す関数を切り替えてください。

 

まとめ

Promiseの仕組みと使い方を紹介しました。
Promiseの記述方法はいくつかあるのですが、まずは1つ記述方法を覚えて非同期処理の流れに慣れてください。

 

監修してくれたメンター

横山茂雄（よこやましげお） フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。 言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。