JavaScriptの非同期処理

1. はじめに：同期処理と非同期処理

JavaScript はシングルスレッドで動作しますが、非同期処理を行うことで、時間のかかる処理（例：ネットワークリクエスト、ファイルの読み込み）の完了を待たずに、次の処理を進めることができます。

• 同期処理： 処理が順番に実行され、前の処理が終わるまで次の処理は開始されません。
• 非同期処理： 時間のかかる処理をバックグラウンドで実行し、その間にも他の処理を進めることができます。処理が完了したら、コールバック関数や Promise を使って結果を受け取ります。

2. async/await：非同期処理をシンプルに書くための構文

async/await は、非同期処理を同期処理のように書くことができる構文です。

• async： 関数宣言の前に付けることで、その関数が非同期処理を含むことを示します。async 関数は常に Promise を返します。
• await： Promise の前に付けることで、その Promise が解決されるまで処理を一時停止します。await は async 関数の中でしか使用できません。

JavaScript

async function fetchData() {
  const response = await fetch('https://example.com/data.json');
  const data = await response.json();
  return data;
}

fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error));

3. Promise：非同期処理の状態を管理するオブジェクト

Promise は、非同期処理の結果を保持するオブジェクトです。Promise には以下の 3 つの状態があります。

• pending（保留）： 非同期処理がまだ完了していない状態
• fulfilled（成功）： 非同期処理が正常に完了した状態
• rejected（失敗）： 非同期処理が失敗した状態

Promise は then() メソッドと catch() メソッドを使って、処理結果に応じた処理を記述します。

JavaScript

fetch('https://example.com/data.json')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

4. async/await と Promise の関係性

async/await は、Promise のシンタックスシュガーです。中身は Promise を実行しています。async/await を使うことで、Promise の then() や catch() を書く手間を減らすことができます。

JavaScript

async function fetchData() {
  try {
    const response = await fetch('https://example.com/data.json');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

5. まとめ

• JavaScript の非同期処理は、時間のかかる処理を効率的に行うために重要です。
• async/await は、非同期処理を同期処理のように書くことができる構文です。
• Promise は、非同期処理の結果を保持するオブジェクトです。
• async/await は Promise をより簡単に扱うための構文であり、Promise と密接な関係があります。