第7回:非同期処理とPromise

2024-08-31

JavaScriptでウェブページに動きをつけたり、データをサーバーとやり取りしたりするには、「非同期処理」という考え方が重要です。
これから2回に渡って非同期処理について解説します。
今回は非同期処理と、それを管理するための「Promise」という仕組みについて解説します。
初めて聞く言葉かもしれませんが、ゆっくりとひとつずつ理解していきましょう。

非同期処理とは？

JavaScriptは基本的に「同期処理」として動作します。
これはコードが上から順番に実行されることを意味します。

しかし例えばサーバーからデータを取得する場合や、ユーザーのクリックを待つ場合、すぐに結果が得られないことがあります。
このようなときに便利なのが「非同期処理」です。

非同期処理は長時間かかる処理（例: サーバーからデータを取得する）を待つ間に、他のコードを実行させることができる仕組みです。
これによりウェブページが固まって動かなくなるのを防ぎます。

以下に使用例を掲載します。

// データをサーバーから取得する関数
function fetchData() {
  console.log("データの取得を開始します...");
  
  // 非同期処理: 2秒後にデータが取得されたことをシミュレート
  setTimeout(() => {
    console.log("データが取得されました！");
  }, 2000);
  
  console.log("次の処理を実行します...");
}

fetchData();

データの取得を開始します...
次の処理を実行します...
（2秒後）
データが取得されました！

補足: なぜ非同期処理が必要なのかを料理で考えてみましょう。

まずご飯を炊きます。
同期処理だとご飯が炊けるまで、炊飯器の前でじっと持つことになります。
ご飯が炊けてから、カレー用の具材を切り始めます。

非同期処理だと、ご飯をセットしたらすぐにカレーの具材を切り始められます。
カレーが煮えるころにご飯が炊きあがることが期待できます。

私は「非同期処理とは並列処理ができるようになる」と覚えました。

Promiseとは？

非同期処理を管理するための仕組みとして、「Promise（プロミス）」というものがあります。
Promiseを使うことで非同期処理が成功したか失敗したかを管理し、その結果を元に次の処理を行うことができます。

Promiseの基本的な使い方

Promiseはある処理が「成功」するか「失敗」するかを表すオブジェクトです。
Promiseを使うと非同期処理の結果に応じて次に行う処理を簡単に指定できます。

以下に使用例を掲載します。

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true; // 成功か失敗かを決めるフラグ

      if (success) {
        resolve("データの取得に成功しました！");
      } else {
        reject("データの取得に失敗しました...");
      }
    }, 2000);
  });
}

fetchData()
  .then(message => {
    console.log(message); // 成功した場合の処理
  })
  .catch(error => {
    console.error(error); // 失敗した場合の処理
  });

（2秒後）
データの取得に成功しました！

補足：Promiseは非同期処理が完了するまで「保留中（pending）」の状態になります。
その後「成功（fulfilled）」か「失敗（rejected）」のどちらかに変わります。
この結果に応じて、次の処理（then や catch）が実行されます。

まとめ

非同期処理はJavaScriptで重要な概念であり、ウェブアプリケーションの快適な動作に不可欠です。
Promiseを使うことで非同期処理をより直感的に管理できるようになります。
初めての非同期処理やPromiseに戸惑うかもしれませんが、少しずつコードを書いて慣れていくことが大切です。
引き続き練習して、自信を持って進めていきましょう！

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！