JavaScriptのPromise.rejectメソッドの使い方を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptのPromise.rejectメソッドの使い方について現役エンジニアが解説しています。非同期処理の結果を表すオブジェクトです。Promise.rejectメソッドは処理が失敗した場合に実行します。Promise.rejectメソッドの書き方や使い方について解説します。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
監修してくれたメンター
永井浩平
バックエンド、フロント、クラウドなど幅広く業務を行う。
テックアカデミーでは、フロントエンドコース / Javaコースのメンター。
JavaScriptのPromise.rejectメソッドの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
目次
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
今回は、JavaScriptに関する内容だね！
どういう内容でしょうか？
JavaScriptのPromise.rejectメソッドの使い方について詳しく説明していくね！
お願いします！
はじめに
JavaScriptで非同期処理を実装する際に、エラーハンドリングを行うrejectオブジェクトに関して説明をします。
現在多くのWebサイトで、以下の目的のため非同期処理を実装しています。
- 一部のコンテンツの表示速度改善
- SPA（Single Page Application）によるUI向上
- API連携
今回は非同期処理を実装する際に、大切なエラーハンドリングと注意点に関して解説します。
ぜひ実装で使えるようになりましょう。
非同期処理とは
処理には大まかに分けて以下2つの実行方式があります。
- 同期処理
- 非同期処理
まずはそれぞれの実行方式に関して説明します。
それぞれの処理方式に関して、ニュースサイトの記事を表示する例で説明します。
[1]記事タイトルを取得・表示（1秒）
[2]記事の画像を取得・表示（1秒）
[3]記事に対するコメントを取得・表示（3秒）
[4]関連記事を取得・表示（3秒）
[5]広告を取得・表示（2秒）
同期処理
1つ1つの処理が順番に行われ、1つの処理が完了するまで次の処理は実行されない処理方式です。
普段何気なくコーディングをしている処理が、この同期処理です。
[1]から[5]までの処理が順番に行われて初めてページが表示されるので、合計で1つの記事を表示するのに10秒かかる計算です。
ページ表示されるまで10秒も時間がかかると「遅い」「重い」サイトと思われてしまうデメリットがあります。
一方処理の実装方法によっては、すべてのコンテンツ（データ）の整合性を担保できるメリットがあります。
非同期処理
1つの処理が終わるのを待たずに、並列で処理を行う方法です。
[1]と[2]が完了したら一度画面をユーザーに表示させた後に[3]、[4]、[5]の処理を並列で処理させます。
まずはメインコンテンツなどを表示した後に、ユーザーに読み込み中であることを知らせた上で、サブコンテンツや広告などを順次読み込んでいきます。
ユーザーからすると記事の表示までは2秒、その後3秒後にすべてのコンテンツが表示されます。
すべてのコンテンツの表示する時間差は5秒ですが、記事を見ている間に残りのコンテンツも表示されるので、体感では8秒程早くなります。
以下イメージ図ですが、[3]から[5]が並列で処理されている状態を表しています。
今回はこの非同期処理にPromiseオブジェクトを使い、前述のrejectオブジェクトでエラーハンドリングを行う説明をします。
Promiseオブジェクトとは
Promiseオブジェクトとは、非同期処理の結果と結果の値を表すオブジェクトです。
APIなどで通信するような時間のかかる処理などに非同期処理を使うことで、処理を止めずに進めることができます。
非同期で実行している処理が完了してから行いたい処理がある場合に、Promiseオブジェクトを使うことで簡潔に記述できます。
例えば、通信してデータを取得するような処理がある場合、処理が終わるまでデータがありません。
この場合、データが取得できてから、データを使う処理を行う必要があります。
このような非同期で行う処理の戻り値をPromiseオブジェクトにすることで、処理結果と結果の値を管理でき、非同期処理と他の処理を連動させることができます。
Promise.rejectとは
平たく言うと、Promiseで管理している非同期処理が失敗した時に呼ぶメソッドです。
rejectが失敗した時に呼ばれるのに対して、成功した場合はresolveというメソッドが呼ばれます。
Promise.rejectの使い方
rejectはPromiseオブジェクトのメソッドなので、以下のように記述することで使えます。
Promise.reject("失敗した理由は○○です")
.then(
function(successData) {
//成功したとき（resolveが呼ばれたときはこちらの処理が実行されます）
console.log(successData);
}, function(error) {
//失敗したとき（rejectが呼ばれたときはこちらの処理が実行されます）
console.log(error);
});引数は省略可能ですが、処理が失敗した理由を渡すことが多いです。
失敗の理由がわかれば、プログラムを書いた人は調査をスムーズに行うことができます。
またユーザーにはエラーメッセージなどで、一部の処理が失敗したことを伝える処理を実装することもあります。
実際に書いてみよう
以下ニュースサイトの例で、[3]以降の処理を非同期で実装するパターンです。
実装内容が多いですが、それぞれコピーして各ファイルを作成して処理の動きを見てみましょう。
※非同期処理とわかりやすいように、各処理に2秒から3秒の待機時間を入れています。
<html>
<head>
<!-- css読み込み省略-->
<!-- js読み込み省略-->
</head>
<body>
<h2 class='title'>記事タイトル</h2>
<div class= 'contents'>
<img src="https://picsum.photos/id/237/100/100" />
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
</div>
<div id="advertising">
<span class="loading"></span>
</div>
<div id="relationArticle">
<span class="loading"></span>
</div>
<div id="comments">
<span class="loading"></span>
</div>
</body>
</html>/*読み込み中のサイクル表示用*/
span{
display:inline-block;
width:70px;
height:70px;
margin:20px;
}
.loading{
border-radius:100%;
box-sizing:border-box;
border:10px dotted gray;
animation:3s linear infinite rotation;
}
@keyframes rotation{
0%{ transform:rotate(0);}
100%{ transform:rotate(360deg); }
}
@keyframes rotationx{
0%{ transform:rotateX(0);}
50%{ background:tomato; }
100%{ transform:rotateX(360deg); }
}
@keyframes rotationy{
0%{ transform:rotateY(0);}
100%{ transform:rotateY(360deg); }
}
@keyframes movement{
0%{ left:-100px;}
100%{ left:100px; }
}
/*エラー文言*/
.error{
color:red;
}let viewAdvertising = new Promise(function(resolve, reject) {
setTimeout(function() {
/*APIなどで広告取得処理*/
resolve();//処理成功
}, 2000);/*処理待機時間*/
});
viewAdvertising.then(function(success) {
console.log("広告取得成功");
document.getElementById('advertising').innerHTML = '<h2>広告</h2>'
});
let viewRelation = new Promise(function(resolve, reject) {
setTimeout(function() {
/*APIなどで関連記事取得処理*/
resolve();//処理失敗
}, 3000);/*処理待機時間*/
});
viewRelation.then(function(success) {
console.log("関連記事取得成功");
document.getElementById('relationArticle').innerHTML = '<h2>関連記事</h2>'
});
let viewComments = new Promise(function(resolve, reject) {
setTimeout(function() {
/*APIなどでコメント取得処理*/
//処理を失敗させる。
let array = [];
let obj = array[3];//エラーを発生させる。outIndex
}, 3000);/*処理待機時間*/
});
viewComments.then(
function(successData) {
console.log("コメント取得成功");
document.getElementById('comments').innerHTML = '<h2>コメント</h2>'
}).catch( function(error){
//失敗したとき（rejectが呼ばれたときはこちらの処理が実行されます）
document.getElementById('comments').innerHTML = '<p class="error">コメント取得に失敗しました。</p>'
});解説
1.画面表示が終わった後に、それぞれview○○という処理が非同期で行われます。
2.viewAdvertisingとviewRelationはresolve()まで処理が進むので、then以下の処理に進み、読み込み中のアイコンを書き換えます。
3.viewCommentsは配列に関するエラーが発生するように処理を記載しているので、エラーとなりcatch以下の処理に進みます。
※本来、API連携が失敗した場合などは、errorの中にセキュリティに関するエラーや通信エラーなどメッセージやステータスコードなどが格納されます。今回は、「コメント取得に失敗しました」と画面に表示する処理を記載しています。
動作確認
実際にブラウザで確認すると以下のように、時間差で表示が変わったことと、処理が失敗したコメントにはエラーメッセージが表示されたことが確認できました。
まとめ
Promiseを返す関数は、JavaScriptの標準の関数や配布されているモジュールにもたくさんあります。
thenとcatchで成功の時のresolve、失敗の時のrejectを分けるだけで、非同期処理の後の処理を制御できます。
非同期処理の実装は、これからのフロントエンドの開発では必須になりますので、ぜひ実装できるように内容を覚えておきましょう。
内容が分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
JavaScriptを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
プログラミングを学習していて、このように思ったことはありませんか？
テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
