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

はじめに
●JavaScriptのAsyncとは
- ○Asyncの基本
- ○Promiseとの関係
●JavaScriptのAsyncの使い方
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、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();

●注意点と対処法

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