JavaScriptのPromiseオブジェクトのcatchメソッドについて現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのPromiseオブジェクトのcatchメソッドについて現役エンジニアが解説しています。Promiseオブジェクトは非同期処理を行うオブジェクトで、処理後にthenメソッドを、エラー時にcatchメソッドを実行します。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

JavaScriptのPromiseオブジェクトのcatchメソッドについて、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

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

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptのPromiseオブジェクトのcatchメソッドについて詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

Promiseオブジェクトとは

プログラムには、完了まで時間がかかったり、いつ完了するか分からないような処理があります。

そのような処理を「主たる処理の実行順」とは別に進めておいて、完了した際に主たる処理に結果を返す処理方法を「非同期処理」と呼びます。非同期処理の方法の1つにコールバックがあります。コールバックは引数に「関数」を指定しておき、処理完了時にその関数を実行する方法です。

例えば 以下の例では 第一引数に指定したコールバック関数を1秒(1000ミリ秒)後に実行します。

setTimeout(()=>{
  console.log('setTimeout完了');
}, 1000);

コールバック関数は簡便な反面、非同期処理の成功/失敗によって処理を分けることが難しい、非同期処理を複数組み合わせた際のプログラムが分かりづらい、といった欠点があります。それらを解決するのがPromiseオブジェクトです。

Promiseオブジェクトは非同期処理の結果を成功または失敗で表します。以下は、Promiseオブジェクトを返す非同期処理の例です。

const func1 = (myname) => {
  return new Promise((resolve, reject) => {
    if (myname) {
      resolve(`文字列「${myname}」の長さは${myname.length}です`);
    } else {
      reject("文字列が入力されていません");
    }
  })
};

Promiseはresolveとrejectの2つの関数を引数に取ります。非同期処理が成功した際にはresolveが、失敗した際にはrejectが実行されます。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

catchメソッドとは

非同期処理の呼び出し元で利用されるのがthenメソッドとcatchメソッドです。

func1('Hello!')
  .then((result) => {
    // 非同期処理が成功した
  })
  .catch((result) => {
    // 非同期処理が失敗した
  });

Promiseのresolveはthen 、rejectはcatchに紐付いています。また、thenやcatchの中で再度非同期処理を呼ぶことで、複数の非同期処理を容易に実行することができます。

Promiseについて、詳しくは以下の記事も参考にしてください。

MDN – Promiseを使う

実際に書いてみよう

今回のサンプルプログラムでは、 Promiseオブジェクトを使用した非同期処理の書き方について確認します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>sample</title>
</head>
<body>
  test
  <script type="text/javascript" src="main.js"></script>
</body>
</html>

main.js

// 非同期処理の定義
const func1 = (myname) => {
  return new Promise((resolve, reject) => {
    if (myname) {
      resolve(`文字列「${myname}」の長さは${myname.length}です`);
    } else {
      reject("文字列が入力されていません");
    }
  })
}

// 成功の例
func1('Hello!')
  .then((result) => {
    console.log(result);
  })
  .catch((result) => {
    console.log(result);
  });

// 失敗の例
func1(null)
  .then((result) => {
    console.log(result);
  })
  .catch((result) => {
    console.log(result);
  });

// 複数組み合わせた例
func1('Hello!')
  .then((result) => {
    return func1(result);
  })
  .then((result) => {
    console.log(result);
  })
  .catch((result) => {
    console.log(result);
  });

// 一番最初に以下の処理が実行される
console.log('スタート');

実行結果は以下のとおりです。非同期処理の成功、失敗、複数組み合わせた場合について処理内容と結果を確認しましょう。

スタート
文字列「Hello!」の長さは6です
文字列が入力されていません
文字列「文字列「Hello!」の長さは6です」の長さは18です

 

まとめ

今回の記事ではJavaScriptのPromiseオブジェクトのcatchメソッドについて学習しました。

筆者プロフィール

太田和樹(おおたかずき)

ITベンチャー企業のPM兼エンジニア

普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。

開発実績:画像認識技術を活用した駐車場混雑状況把握(実証実験)、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント。

地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

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

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。