JavaScriptでpromiseメソッドを活用する使い方【初心者向け】

JavaScriptでpromiseを活用する使い方のをサンプルプログラムを交えて解説します。

非同期処理を行う際に便利なメソッドなので、ぜひ使い方を覚えておきましょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。

 

promiseとは

JavaScriptのpromiseは、非同期処理の最終的な完了もしくは失敗を表すオブジェクトです。

promiseを使用すると非同期処理の操作が簡単になります。

また、非同期処理の成功時と失敗時の処理を明確にすることができるので、不具合の原因を取り除くことができます。

加えて、並行した非同期処理を実行させることも可能になります。

つまり、複数の非同期処理を順番に実行し、前の処理の結果を次の処理で使う事が可能ということです。

 

JavaScriptは命令文を順番に実行します

例えば次のように3種類の関数がある場合、sample2関数で処理が滞った場合、sample3関数の処理はされません。

順番に実行されるJavaScriptプログラム例

var result = "です。";
var doSomething1 = function() {
  console.log('処理問題ない １' + result);
};
var doSomething2 = function() {
  console.log('エラーが出る ' + result2);
};
var doSomething3 = function() {
  console.log('処理問題ない ３' + result);
};
doSomething1();
doSomething2();
doSomething3();

 

実行結果

処理問題ない １です。
Uncaught ReferenceError: result2 is not defined at doSomething2 (<anonymous>:6:25) at <anonymous>:12:1

 

JavaScriptのコールバック関数

これとは対象的に、ページが読み込まれたからと行って順番に処理されない方法も存在します。

たとえば、ページが読み込まれて5秒経ったら実行するというものです。

これは、ページが読み込まれて、他の処理がされている間に、5秒経過した時点で実行されます。

ページ読み込み5秒後に実行するプログラム

setTimeout(function() {
  alert('たった今、5秒経過しました！');
}, 5000);

実行結果

たった今、5秒経過しました！

このように、ある処理が完了したら後、該当するfunctionを実行させるという方法を、コールバックと呼びます。

また、そのような関数をコールバック関数と呼びます。

 

コールバック関数とpromise

コールバック関数があるのであれば非同期処理にはコールバック関数を使用すれば解決する、というように簡単には行きませんでした。

コールバック関数で複雑な非同期処理を作成すると、非常に複雑なコードになってしまうためです。

また、非同期実行の結果受け取りには、コールバック関数を使用しており、その仕様は、各ライブラリに依存していました。

そこで登場するのが「promise」です。

promiseを使用することで、よりシンプルに非同期処理を作成することができ、受け取り結果の仕様も統一することができるようになりました。

 

使用環境

promiseに対応していないブラウザもあるため、使用環境で対応しているブラウザを使用しているか事前に調べておいたほうが良いです。

promise対応ブラウザ

 

promiseにより保証される処理

1.promiseを利用することで、現在処理されているJavaScriptのイベントループの実行完了前に、コールバックが呼び出されることが無い事を保証できます。これにより、確実に順番を考えた処理の実装が可能になります。

2.promiseを利用することで、非同期処理が完了した後、非同期処理が失敗した後に、.thenを利用してコールバックを登録しても動作が保証されます。つまり、現在処理されているJavaScriptのイベントループの実行完了前に、コールバックが呼び出されることはありません。

3.promiseを利用することで、.then 何度も実装可能です。つまり、複数のコールバックを追加順に独立して実行できることが保証されます。

 

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

promiseの書き方

promiseは次のような構文で記載します。

new Promise( function(resolve, reject) { ... } );

ここでの実行順は、

function(resolve, reject) { ... }

が実行された後に、

new Promise

が実行されます。

function(resolve, reject)

について、処理が成功した場合にresolve、処理が失敗した場合にrejectがそれぞれ実行されます。

 

promiseを使用したプログラムを書いてみよう

それでは、コールバック関数と同様に5秒後に処理されるプログラムを作成していきます。

 

5秒後に非同期成功と表示されるプログラム

function hidouki() {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve('非同期成功');
        }, 5000);
    });
}

hidouki().then(function (value) {
  console.log(value);
}).catch(function (error) {
  console.log(error);
});

 

実行結果

非同期成功

 

今回は初心者向けにpromiseを使用した非同期処理を説明しました。

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

この記事を監修してくれた方 中本賢吾（なかもとけんご） アジマッチ有限会社　代表取締役社長 開発実績：PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。 その他にも地域の職業プログラマー育成活動を行い、2018年には小学生がUnityで開発したオリジナルAndroidアプリをGooglePlayでリリース。ゲームで遊ぶより作ろうぜ！を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。