← カテゴリ一覧に戻る

非同期処理（async/await）

async await Promise Promise.allSettled

JavaScriptの非同期処理を直感的に記述するための構文と、Promiseの便利メソッドをまとめます。

デモ：逐次 vs 並列 vs allSettled

ここにログが表示されます...

コード例

js
// async/await 基本
async function fetchUser(id) {
  try {
    const res = await fetch(`/api/users/${id}`);
    if (!res.ok) throw new Error('取得失敗');
    return await res.json();
  } catch (err) {
    console.error(err);
  }
}

// 逐次実行（前のタスクを待つ）
const user = await fetchUser(1);
const posts = await fetchPosts(user.id); // user取得後に実行

// 並列実行（Promise.all）：全て成功する前提
const [user, posts] = await Promise.all([
  fetchUser(1),    // 同時に開始
  fetchPosts(1),   // 同時に開始
]);
// 1つでも失敗すると全てreject

// Promise.allSettled：失敗しても全結果を取得
const results = await Promise.allSettled([
  fetchUser(1),
  fetchUser(99), // 存在しないID（失敗する）
]);
results.forEach(result => {
  if (result.status === 'fulfilled') {
    console.log('成功:', result.value);
  } else {
    console.log('失敗:', result.reason);
  }
});

// Promise.race：最初に完了したものを使う
const fastest = await Promise.race([
  fetch('/api/server1'),
  fetch('/api/server2'),
]);

// Promise.any：最初に成功したものを使う（全失敗でエラー）
const result = await Promise.any([
  fetch('/api/server1'), // どれかが成功すれば OK
  fetch('/api/server2'),
]);

比較：Promise の複数実行メソッド

メソッド失敗時用途
Promise.all1つでも失敗→全体がreject全て成功が必須な並列処理
Promise.allSettled全結果を取得（失敗も含む）✅ 一部失敗を許容する並列処理
Promise.race最初の結果（成功・失敗問わず）タイムアウト、高速サーバー選択
Promise.any全失敗でAggregateError✅ 最初の成功を使いたい場合

NEWTop-level await & using 宣言（ES2022+）

js
// Top-level await（ESモジュール内で async 不要）
// ファイルの先頭レベルで await が使える
const data = await fetch('/api/init').then(r => r.json());
export { data }; // 初期化完了後にexport

// using 宣言（Explicit Resource Management, ES2025）
// finally で確実にクリーンアップ
{
  await using conn = await openDatabaseConnection();
  // ブロックを抜けると自動的に conn[Symbol.asyncDispose]() が呼ばれる
}
// using（同期版）
{
  using file = openFile('data.txt');
  // ブロック終了時に自動クローズ
}

jQueryで書くとこうなる

jQueryでは $.Deferred() や .done() .fail() チェーンで非同期処理を管理していました。現代のJavaScriptでは Promise と async/await を使うことで、より直感的に非同期処理を書けます。
js
// $.Deferred() による非同期処理
function fetchData() {
  const deferred = $.Deferred();
  setTimeout(function () {
    deferred.resolve('データ取得完了');
  }, 1000);
  return deferred.promise();
}

fetchData()
  .done(function (data) {
    console.log(data);
  })
  .fail(function (error) {
    console.error(error);
  });

// $.when() で複数の非同期処理を待つ
$.when(
  $.get('https://api.example.com/users'),
  $.get('https://api.example.com/posts')
).done(function (users, posts) {
  console.log(users, posts);
});

// $.ajax() のPromiseチェーン
$.ajax({ url: 'https://api.example.com/data' })
  .then(function (data) { return $.ajax({ url: data.nextUrl }); })
  .then(function (result) { console.log(result); });
💡 上記のデモは、バニラJS（ブラウザ標準API）です。

🤖 AIプロンプトテンプレート

以下の要件を満たすTypeScript + Reactコンポーネントを作成してください。

- Promiseとasync/awaitを使った非同期処理のサンプルを示す
- Promise.all()で複数の非同期処理を並列実行する例を含める
- async/awaitのエラーハンドリング（try/catch）のサンプルを含める
- Promise.race()やPromise.allSettled()の使い方を示す
- 実際のAPIコール（fetch）をasync/awaitで書いたサンプルを含める
- コメントは日本語で記述する

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo