読み込み中...

JavaScriptのasync/awaitが一瞬で分かる7つの例

JavaScriptでasync/awaitを使ったサンプルコード JS
2023.05.02
この記事は約7分で読めます。

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

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

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

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

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

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

はじめに

この記事を読めば、JavaScriptのasync/awaitについての理解が深まり、非同期処理を行う際に役立つスキルが身につくでしょう。

●JavaScriptのasync/awaitとは

JavaScriptのasync/awaitは、非同期処理を行う際に便利な機能です。

Promiseを使った非同期処理のコードを読みやすくするために、ECMAScript 2017で導入されました。

○async/awaitの基本

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

これにより、コードが読みやすくなり、デバッグもしやすくなります。

●async/awaitの使い方

async/awaitを使って非同期処理を行う方法を、サンプルコードを通して説明します。

○サンプルコード1：基本的なasync/await

次の例では、非同期関数を定義し、async/awaitを使って結果を取得しています。

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

fetchData();

○サンプルコード2：Promiseチェーンとの比較

このコードでは、Promiseチェーンとasync/awaitの使い方を比較しています。

この例では、データを取得し、JSON形式に変換して表示しています。

// Promiseチェーンを使った方法
function fetchDataWithPromise() {
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));
}

// async/awaitを使った方法
async function fetchDataWithAsyncAwait() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

fetchDataWithPromise();
fetchDataWithAsyncAwait();

○サンプルコード3：エラー処理の方法

このコードでは、async/awaitを使ってエラー処理を行う方法を紹介しています。

この例では、try-catch文を使用してエラーを捕捉しています。

async function fetchDataWithErrorHandling() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('データの取得に失敗しました。', error);
  }
}

fetchDataWithErrorHandling();

●async/awaitの応用例

async/awaitを使った応用例をいくつか紹介します。

○サンプルコード4：非同期ループ

このコードでは、非同期処理をループで実行する方法を紹介しています。

この例では、for文を使って複数のURLからデータを取得しています。

const urls = [
  'https://api.example.com/data1',
  'https://api.example.com/data2',
  'https://api.example.com/data3'
];

async function fetchMultipleData() {
  for (const url of urls) {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
  }
}

fetchMultipleData();

○サンプルコード5：並行処理

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

この例では、複数のURLからデータを同時に取得しています。

async function fetchConcurrentData() {
  const promises = urls.map(async url => {
    const response = await fetch(url);
    return response.json();
  });

  const results = await Promise.all(promises);
  console.log(results);
}

fetchConcurrentData();

○サンプルコード6：逐次実行

このコードでは、Promise.allを使って非同期処理を順番に実行する方法を紹介しています。

この例では、複数のURLからデータを順番に取得しています。

async function fetchSequentialData() {
  const results = [];

  for (const url of urls) {
    const response = await fetch(url);
    const data = await response.json();
    results.push(data);
  }

  console.log(results);
}

fetchSequentialData();

○サンプルコード7：async/awaitとイベントリスナー

このコードでは、async/awaitを使ってイベントリスナーを実装する方法を紹介しています。

この例では、ボタンクリック時に非同期処理を実行しています。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Async/Await Event Listener Example</title>
  </head>
  <body>
    <button id="fetch-data-button">データを取得</button>
    <script>
      const button = document.getElementById('fetch-data-button');

      async function fetchDataOnClick() {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
      }

      button.addEventListener('click', fetchDataOnClick);
    </script>
  </body>
</html>

●注意点と対処法

  1. エラー処理を適切に行う：async/awaitを使う場合、エラー処理はtry-catch文を使って行うことが推奨されます。
  2. async/awaitの過剰使用：async/awaitは非同期処理をシンプルに記述できますが、適切な場面でのみ使用しましょう。
    単純な処理にはPromiseを使った方が適切な場合もあります。

●カスタマイズ方法

async/awaitを使って、独自の非同期処理を実装することができます。

例えば、非同期処理を再試行する処理や、タイムアウトを設定する処理など、カスタマイズの幅は広いです。

まとめ

この記事では、JavaScriptのasync/awaitの基本的な使い方や応用例、注意点などを紹介しました。

これらの知識を活かして、非同期処理を効率的に実装しましょう。

この記事を読めば、JavaScriptの非同期処理をマスターすることができるようになります。