0Pricing
JavaScript Academy · レッスン

async関数の作成、try/catch、並列処理と逐次処理

async関数を作成して結果をawaitし、エラーを捕捉し、逐次処理と並列処理のパターンを比較します。

「async関数の作成、try/catch、並列処理と逐次処理」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン1/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全3レッスンが含まれています。

async/awaitの概要

目標:async/awaitを安全に使います。

  • async関数の作成
  • 値のawait
  • try/catchによるエラー処理
  • 並列実行と順次実行
async関数の作成、try/catch、並列処理と逐次処理 — イラスト1

小さなPromiseヘルパー

awaitをテストするために、小さなPromiseベースのヘルパーを作成します。

// delay returns a Promise that resolves after ms
function delay(ms, value) {
  return new Promise(function (resolve) {
    setTimeout(function () { resolve(value); }, ms);
  });
}

// Example usage
delay(10, "ok").then(function (v) {
  console.log("delay:", v);
});
async関数の作成、try/catch、並列処理と逐次処理 — イラスト2

async関数の基本

asyncはPromiseを返す関数であることを示します。その中ではawaitを使えます。

// An async function can use await inside
async function greet() {
  const name = await delay(5, "Ayla");
  console.log("Hello,", name);
}

// Call it
greet();
async関数の作成、try/catch、並列処理と逐次処理 — イラスト3

awaitでのtry/catch

ステップがrejectされる可能性がある場合は、awaitをtry/catchで囲みます。

// Simulate a failing task
function failAfter(ms, message) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () { reject(new Error(message)); }, ms);
  });
}

async function runSafe() {
  try {
    const v = await failAfter(5, "boom");
    console.log("Value:", v);
  } catch (e) {
    console.log("Caught:", e.message);
  }
}

runSafe();
async関数の作成、try/catch、並列処理と逐次処理 — イラスト4

順次実行のパターン

順次実行:各awaitは前の処理が終わるまで待機するため、処理時間が加算されます。

// Sequential: total time ~ A + B
async function sequential() {
  const a = await delay(8, "A");
  const b = await delay(8, "B");
  console.log("seq:", a + b);
}

sequential();
async関数の作成、try/catch、並列処理と逐次処理 — イラスト5

allによる並列実行

並列実行:まずタスクを開始し、その後await Promise.allを実行します。合計時間はおよそmax(A, B)です。

// Parallel: start both, then await together
async function parallel() {
  const pa = delay(8, "A");
  const pb = delay(8, "B");
  const results = await Promise.all([pa, pb]);
  console.log("par:", results.join(""));
}

parallel();
async関数の作成、try/catch、並列処理と逐次処理 — イラスト6

並列実行と順次実行のクイズ

簡単な確認:独立したタスクに適した、より速いパターンです。

async関数の作成、try/catch、並列処理と逐次処理 — イラスト7

振り返り

振り返り:async関数を記述し、値をawaitし、try/catchでエラーを処理し、順次実行するawaitと、より速い並列実行のPromise.allを比較しました。

async関数の作成、try/catch、並列処理と逐次処理 — イラスト8

よくある質問

「async関数の作成、try/catch、並列処理と逐次処理」レッスンは無料ですか?

はい。「async関数の作成、try/catch、並列処理と逐次処理」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全3レッスンが含まれています。

「async関数の作成、try/catch、並列処理と逐次処理」で何を学びますか?

async関数を作成して結果をawaitし、エラーを捕捉し、逐次処理と並列処理のパターンを比較します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

JavaScript Academyを始めるのに経験は必要ですか?

事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/3です。

「async関数の作成、try/catch、並列処理と逐次処理」レッスンにはどのくらい時間がかかりますか?

ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJavaScript Academyレッスンでコードを書いて実行できますか?

はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. async関数の作成、try/catch、並列処理と逐次処理
  2. AbortControllerによるタイムアウトと中止
  3. リトライとバックオフのパターン
← JavaScript Academyに戻る