読み込み中...

JavaScriptのAsyncを活用!7つの使い方とサンプルコード

JavaScriptのAsyncを活用し、効率的なプログラミングを実現する方法を紹介する画像 JS
この記事は約7分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScriptのAsyncを活用したプログラミングができるようになります。

初心者の方でもわかりやすく解説しているので、安心して取り組んでください。

Asyncを使いこなすことで、効率的な非同期処理が実現できます。

●JavaScriptのAsyncとは

○Asyncの基本

JavaScriptのAsyncは、非同期処理を行うための機能です。

非同期処理とは、一つの処理が完了するのを待たずに次の処理を行うことで、効率的なプログラムを実現する方法です。

Asyncは「async」と「await」の2つのキーワードで構成されており、これらを使って非同期処理を行います。

○Promiseとの関係

JavaScriptのAsyncは、Promiseをベースにした非同期処理をより簡潔に書くことができる機能です。Promiseは、非同期処理の結果を表すオブジェクトであり、成功・失敗の処理をチェーンでつなげることができます。

Asyncは、このPromiseを簡単に扱うための構文です。

●JavaScriptのAsyncの使い方

○サンプルコード1:基本的なAsync関数の書き方

このコードでは、基本的なAsync関数を定義しています。

この例では、setTimeoutを使って非同期処理を行っています。

async function sampleAsync() {
  console.log("処理を開始");
  await new Promise((resolve) => setTimeout(resolve, 2000));
  console.log("処理が終了");
}

sampleAsync();

○サンプルコード2:複数の非同期処理を順番に実行

このコードでは、async/awaitを使って複数の非同期処理を順番に実行しています。

この例では、2つの非同期処理が完了するまでの時間を計測しています。

async function process1() {
  // 非同期処理1
}

async function process2() {
  // 非同期処理2
}

async function main() {
  console.log("開始");
  await process1();
  await process2();
  console.log("終了");
}

main();

○サンプルコード3:複数の非同期処理を並行して実行

このコードでは、Promise.allを使って複数の非同期処理を並行して実行しています。

この例では、3つの非同期処理を一度に実行して、すべて完了するまでの時間を計測しています。

async function processA() {
  // 非同期処理A
}

async function processB() {
  // 非同期処理B
}

async function processC() {
  // 非同期処理C
}

async function main() {
  console.log("開始");
  await Promise.all([processA(), processB(), processC()]);
  console.log("終了");
}

main();

○サンプルコード4:エラーハンドリング

このコードでは、非同期処理で発生したエラーを捕捉して処理しています。

この例では、try-catch文を使用してエラーをハンドリングしています。

async function fetchData() {
  // データを取得する非同期処理
}

async function main() {
  try {
    const data = await fetchData();
    console.log("データ取得成功", data);
  } catch (error) {
    console.error("データ取得失敗", error);
  }
}

main();

○サンプルコード5:async/awaitを使ったループ処理

このコードでは、async/awaitを使って非同期処理をループ内で実行しています。

この例では、for文を使って一定時間ごとに非同期処理を実行しています。

async function sleep(milliseconds) {
  return new Promise((resolve) => setTimeout(resolve, milliseconds));
}

async function main() {
  for (let i = 0; i < 5; i++) {
    console.log(`ループ${i}回目`);
    await sleep(1000);
  }
}

main();

○サンプルコード6:async/awaitとPromise.allの組み合わせ

このコードでは、async/awaitとPromise.allを組み合わせて、複数の非同期処理を効率的に実行しています。

この例では、複数のデータ取得処理を並行して行い、すべての結果をまとめて表示しています。

async function fetchDataA() {
  // データAを取得する非同期処理
}

async function fetchDataB() {
  // データBを取得する非同期処理
}

async function fetchDataC() {
  // データCを取得する非同期処理
}

async function main() {
  const [dataA, dataB, dataC] = await Promise.all([fetchDataA(), fetchDataB(), fetchDataC()]);
  console.log("すべてのデータ取得完了", dataA, dataB, dataC);
}

main();

○サンプルコード7:カスタム非同期関数の作成

このコードでは、カスタム非同期関数を作成し、それを呼び出す方法を紹介しています。

この例では、非同期で乱数を生成して返すカスタム関数を実装しています。

function getRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

async function generateRandomNumberAsync(min, max, delay) {
  return new Promise((resolve) => {
    setTimeout(() => {
      const result = getRandomNumber(min, max);
      resolve(result);
    }, delay);
  });
}

async function main() {
  console.log("乱数生成開始");
  const randomNumber = await generateRandomNumberAsync(1, 100, 2000);
  console.log("生成された乱数:", randomNumber);
}

main();

●注意点と対処法

  1. エラーハンドリング:非同期処理でエラーが発生した場合、適切にハンドリングする必要があります。
    try-catch文を使ってエラーを捕捉し、適切な処理を行いましょう。
  2. デッドロック:複数の非同期処理が相互に待ち合ってしまい、処理が進まなくなる現象です。
    Promise.allを使って、複数の非同期処理を並行して実行することでデッドロックを回避できます。

●カスタマイズ方法

Async/awaitを使用した非同期処理は、様々な場面でカスタマイズが可能です。

具体的には、次のような方法が考えられます。

  1. タイムアウト設定:setTimeoutを使用して、非同期処理にタイムアウトを設定することができます。
  2. 並列処理の制御:Promise.allやPromise.raceを使って、複数の非同期処理を効率的に実行することができます。
  3. 非同期処理のキャンセル:AbortControllerを使って、非同期処理をキャンセルすることができます。

まとめ

この記事では、JavaScriptのAsyncについて、基本的な使い方や各種サンプルコードを紹介しました。

非同期処理を効率的に実行するために、Async/awaitの機能を活用して、より良いプログラムを作成しましょう。