JavaScriptのasync/awaitとPromiseの違いを初心者向けにわかりやすく解説！非同期処理を簡単理解

1. 非同期処理とは？

1. 非同期処理とは？

非同期処理とは、ある処理が終わるのを待たずに次の処理を進められる仕組みです。例えば、ネットからデータを取得する処理は時間がかかる場合があります。その間に他の処理を止めないようにするために非同期処理が使われます。

2. Promiseとは何か

2. Promiseとは何か

PromiseはJavaScriptで非同期処理を扱うためのオブジェクトです。非同期処理が成功した場合はresolve、失敗した場合はrejectで結果を返します。Promiseを使うことで非同期処理の順序や結果を整理できます。

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("処理が成功しました");
  }, 1000);
});

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

処理が成功しました

3. async/awaitとは何か

3. async/awaitとは何か

async/awaitはPromiseをもっと簡単に書ける構文です。asyncを関数につけると、その関数の中でawaitを使ってPromiseの完了を待つことができます。これにより、非同期処理を同期処理のように書けるので、初心者でも理解しやすくなります。

async function fetchData() {
  const result = await new Promise(resolve => {
    setTimeout(() => resolve("データ取得完了"), 1000);
  });
  console.log(result);
}

fetchData();

データ取得完了

4. Promiseとasync/awaitの違い

4. Promiseとasync/awaitの違い

大きな違いは書き方です。Promiseは.then()や.catch()をチェーンして書きますが、async/awaitはまるで順番に処理が進む同期的な書き方ができます。また、async/awaitはtry/catchでエラー処理をまとめやすいというメリットもあります。

// Promiseの書き方
myPromise
  .then(result => console.log(result))
  .catch(error => console.log(error));

// async/awaitの書き方
async function example() {
  try {
    const result = await myPromise;
    console.log(result);
  } catch(error) {
    console.log(error);
  }
}
example();

5. 複数の非同期処理を順番に実行する

5. 複数の非同期処理を順番に実行する

非同期処理を順番に実行したい場合も、Promiseとasync/awaitで書き方が変わります。Promiseは.then()を続ける方法、async/awaitは順番にawaitする方法があります。

// Promiseで順番に実行
new Promise(resolve => setTimeout(() => resolve(1), 500))
  .then(result => {
    console.log(result);
    return new Promise(resolve => setTimeout(() => resolve(2), 500));
  })
  .then(result => console.log(result));

1
2

// async/awaitで順番に実行
async function runSequential() {
  const first = await new Promise(resolve => setTimeout(() => resolve(1), 500));
  console.log(first);
  const second = await new Promise(resolve => setTimeout(() => resolve(2), 500));
  console.log(second);
}
runSequential();

6. 複数の非同期処理を同時に実行する

6. 複数の非同期処理を同時に実行する

複数の非同期処理を同時に実行したい場合はPromise.all()を使うと便利です。すべての処理が完了するのを待ってから次の処理に進めます。

const promise1 = new Promise(resolve => setTimeout(() => resolve("結果1"), 1000));
const promise2 = new Promise(resolve => setTimeout(() => resolve("結果2"), 1500));

Promise.all([promise1, promise2]).then(results => {
  console.log(results); // ["結果1", "結果2"]
});

["結果1", "結果2"]

7. エラー処理の違い

7. エラー処理の違い

Promiseは.catch()でエラー処理を行いますが、async/awaitではtry/catchを使うことで、複数の非同期処理をまとめてエラー処理できます。これにより、可読性が高くなります。

// async/awaitのエラー処理
async function fetchWithError() {
  try {
    const result = await new Promise((resolve, reject) => reject("エラー発生"));
    console.log(result);
  } catch(error) {
    console.log("エラー:", error);
  }
}
fetchWithError();

エラー: エラー発生

8. Promiseとasync/awaitの使い分け

8. Promiseとasync/awaitの使い分け

基本的にはasync/awaitの方が読みやすく初心者向けです。ただし、複数の非同期処理を同時に実行する場合や、チェーンで処理を組み合わせたい場合はPromiseを使うことがあります。状況に応じて使い分けましょう。

9. 簡単な例題で理解しよう

9. 簡単な例題で理解しよう

最後に、非同期処理を使って疑似的にデータを取得する簡単な例を見てみましょう。Promiseとasync/awaitで同じ処理を書きます。

// Promise
function getDataPromise() {
  return new Promise(resolve => setTimeout(() => resolve("データ取得完了(Promise)"), 1000));
}
getDataPromise().then(data => console.log(data));

// async/await
async function getDataAsync() {
  const data = await new Promise(resolve => setTimeout(() => resolve("データ取得完了(async/await)"), 1000));
  console.log(data);
}
getDataAsync();

データ取得完了(Promise)
データ取得完了(async/await)

まとめ

まとめ

今回の記事では、JavaScriptの非同期処理の基本であるPromiseとasync/awaitについて、初心者でもわかるように詳しく解説しました。非同期処理とは、処理の完了を待たずに次の処理を進める仕組みで、Webアプリケーションでのデータ取得やAPI通信、タイマー処理などでよく使われます。Promiseは非同期処理の成功や失敗を整理するためのオブジェクトで、thenやcatchを使って結果を扱います。一方、async/awaitはPromiseをさらに簡単に扱える構文で、非同期処理をあたかも同期処理のように書けるため、可読性が高く初心者にも理解しやすいのが特徴です。特に複数の非同期処理を順番に実行する場合や、エラー処理をまとめて行いたい場合に便利です。

Promiseでは.then()を連結して順序を制御しますが、async/awaitではawaitを使うことで処理を順番に実行できます。また、複数の非同期処理を同時に実行したい場合はPromise.all()を使うことで、すべての処理が完了してから次の処理に進むことができます。エラー処理の面でも、Promiseは.catch()で個別に対応しますが、async/awaitはtry/catchを使うことで複数の処理のエラーをまとめて扱えます。これにより、コードの可読性と保守性が向上します。

使い分けのポイントとしては、基本的にはasync/awaitを使う方が直感的で読みやすく、初心者にも扱いやすいです。しかし、複数の非同期処理を同時に実行する場合や、非同期処理をチェーンで組み合わせて使う場合はPromiseを使う場面があります。状況に応じてPromiseとasync/awaitを使い分けることで、より効率的で安定した非同期処理が可能になります。

 // 簡単な非同期処理の例 async function simpleExample() { try { const result = await new Promise(resolve => setTimeout(() => resolve("非同期処理完了"), 1000)); console.log(result); } catch(error) { console.log("エラー:", error); } } simpleExample();

 非同期処理完了