JavaScriptのPromiseとは？基本の使い方とエラーハンドリングを初心者向けに徹底解説

1. JavaScriptのPromiseとは何か

1. JavaScriptのPromiseとは何か

JavaScriptのPromiseとは、非同期処理の結果を表すオブジェクトです。非同期処理とは、時間がかかる処理を待っている間も、他の処理を同時に進めることができる仕組みのことです。例えば、サーバー通信やファイル読み込みなどが代表的な例です。

Promiseは、将来成功するか失敗するかが決まる処理の結果をあらかじめ表現しておくためのものです。約束という意味の通り、あとで結果を渡しますという約束をするイメージです。

JavaScriptのPromiseには三つの状態があります。処理中の状態、成功した状態、失敗した状態です。この状態の変化を管理することで、エラーハンドリングや結果の受け取りが簡単になります。

2. 非同期処理とは何かをやさしく理解する

2. 非同期処理とは何かをやさしく理解する

非同期処理という言葉は難しく聞こえますが、順番に待たずに進める処理と考えるとわかりやすいです。例えば、料理をしているときにお湯を沸かしている間に野菜を切るようなイメージです。

JavaScriptは基本的に一つずつ順番に処理を実行します。しかし、インターネット通信のように時間がかかる処理では、ずっと待っていると他の処理が止まってしまいます。そこでPromiseを使うことで、処理が終わったら知らせてもらう仕組みを作ることができます。

3. Promiseの基本的な使い方

3. Promiseの基本的な使い方

まずはPromiseの基本構文を見てみましょう。Promiseはnew Promiseで作成します。中には関数を書き、成功した場合と失敗した場合の処理を定義します。

const promise = new Promise((resolve, reject) => {
  const success = true;

  if (success) {
    resolve("成功しました");
  } else {
    reject("失敗しました");
  }
});

promise.then((result) => {
  console.log(result);
}).catch((error) => {
  console.log(error);
});

resolveは成功したときに呼び出す関数です。rejectは失敗したときに呼び出す関数です。thenは成功時の処理、catchはエラー発生時の処理を書きます。

成功しました

4. thenメソッドで結果を受け取る

4. thenメソッドで結果を受け取る

Promiseが成功した場合、thenメソッドの中に書いた処理が実行されます。thenは結果を受け取るためのメソッドです。メソッドとは、オブジェクトに対して使う機能のことです。

function getNumber() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(100);
    }, 1000);
  });
}

getNumber().then((num) => {
  console.log("受け取った数値:", num);
});

setTimeoutは一定時間後に処理を実行する関数です。この例では一秒後に数値を返しています。非同期処理の流れを体験できる簡単なサンプルです。

受け取った数値: 100

5. catchでエラーハンドリングを行う

5. catchでエラーハンドリングを行う

JavaScriptのPromiseでは、エラーハンドリングも重要です。エラーハンドリングとは、プログラムのエラーを安全に処理する仕組みのことです。Promiseではcatchを使ってエラーを受け取ります。

function divide(a, b) {
  return new Promise((resolve, reject) => {
    if (b === 0) {
      reject("ゼロで割ることはできません");
    } else {
      resolve(a / b);
    }
  });
}

divide(10, 0)
  .then((result) => {
    console.log("結果:", result);
  })
  .catch((error) => {
    console.log("エラー:", error);
  });

エラー: ゼロで割ることはできません

このように、エラーが起きてもプログラム全体が止まらないように制御できます。これがPromiseを使ったエラーハンドリングの基本です。

6. Promiseチェーンで処理をつなげる

6. Promiseチェーンで処理をつなげる

Promiseは連続してつなげることができます。これをチェーンと呼びます。チェーンを使うと、複数の非同期処理を順番に実行できます。

new Promise((resolve) => {
  resolve(5);
})
.then((num) => {
  return num * 2;
})
.then((num) => {
  return num + 3;
})
.then((result) => {
  console.log("最終結果:", result);
});

最終結果: 13

このようにthenをつなげることで、処理結果を次の処理へ渡せます。JavaScriptの非同期処理をきれいに書くために重要な考え方です。

7. Promiseを使うメリットと注意点

7. Promiseを使うメリットと注意点

JavaScriptでPromiseを使うメリットは、非同期処理の流れが整理されて読みやすくなることです。従来のコールバック関数だけで書くと、処理が入れ子になりやすく、可読性が下がります。Promiseを使えば、thenやcatchで流れを明確にできます。

一方で注意点もあります。必ずcatchでエラーを受け取るようにしないと、エラーが見逃される可能性があります。また、Promiseの中で例外が発生すると自動的にreject扱いになることも覚えておきましょう。

JavaScriptのPromiseは、現代のWeb開発では必須の知識です。非同期処理、エラーハンドリング、then、catch、resolve、rejectといったキーワードを理解することで、より実践的なプログラムが書けるようになります。

まとめ

まとめ

今回はJavaScriptのPromiseとは何かという基本から、非同期処理の仕組み、thenメソッドによる結果の受け取り方、catchを使ったエラーハンドリング、そしてPromiseチェーンによる処理の連結までを丁寧に解説しました。JavaScriptのPromiseは、非同期処理をわかりやすく管理するための重要なオブジェクトです。サーバー通信やデータ取得、タイマー処理など、時間がかかる処理を安全に扱うために欠かせない知識です。

非同期処理という考え方を理解することで、JavaScriptの動き方がより明確になります。Promiseは成功と失敗という二つの結果を管理し、resolveとrejectによって状態を切り替えます。そしてthenで成功時の処理を書き、catchでエラー発生時の処理を書くことで、プログラム全体の安全性と可読性を高めることができます。

特にエラーハンドリングは、実務レベルのWeb開発では非常に重要です。エラーを適切に処理しないと、画面が正しく表示されなかったり、予期しない動作が発生したりします。Promiseのcatchを正しく使うことで、エラーを検知し、ユーザーにわかりやすいメッセージを表示することができます。

また、Promiseチェーンを使うことで、複数の非同期処理を順番に実行することが可能になります。thenを連続してつなげることで、前の処理結果を次の処理へ受け渡すことができます。これにより、複雑な非同期処理も整理されたコードで書くことができます。

ここで改めて、Promiseの基本的な流れを確認してみましょう。まずnew Promiseでオブジェクトを作成し、その中でresolveまたはrejectを呼び出します。その後、thenで成功時の処理を定義し、catchで失敗時の処理を定義します。この流れを理解しておくことが、JavaScriptの非同期処理を攻略する第一歩です。

function fetchData(flag) {
  return new Promise((resolve, reject) => {
    if (flag) {
      resolve("データ取得に成功しました");
    } else {
      reject("データ取得に失敗しました");
    }
  });
}

fetchData(true)
  .then((message) => {
    console.log(message);
    return "次の処理へ進みます";
  })
  .then((next) => {
    console.log(next);
  })
  .catch((error) => {
    console.log("エラー発生:", error);
  });

データ取得に成功しました
次の処理へ進みます

このサンプルプログラムでは、Promiseの成功時にメッセージを表示し、その結果を次のthenへ渡しています。もし失敗した場合はcatchが実行されます。このようにPromiseは、成功と失敗を明確に分けて処理できるため、非同期処理のコードが整理され、読みやすくなります。

JavaScriptのPromiseを理解することで、非同期処理の流れがはっきりと見えるようになります。さらに発展させると、asyncやawaitといった構文も理解しやすくなりますが、まずはPromiseの基本構文とエラーハンドリングの考え方をしっかり身につけることが大切です。

非同期処理、Promise、then、catch、resolve、reject、エラーハンドリング、Promiseチェーンといったキーワードは、JavaScript学習において何度も登場します。これらを正しく理解することで、実践的なWebアプリケーション開発へとステップアップできます。基礎を繰り返し確認しながら、実際にコードを書いて体験することが上達への近道です。