async/awaitを使ったJavaScriptの非同期プログラミング入門

JavaScriptのasync/await、もう怖くない！非同期処理をスッキリ書く方法を伝授します。

async/awaitとは？JavaScriptの非同期処理をわかりやすく解説

JavaScriptにおける非同期処理は、Webアプリケーションのパフォーマンスを向上させるために不可欠です。特に、APIからのデータ取得やファイルの読み込みなど、時間のかかる処理をスムーズに行うために重要な役割を果たします。async/awaitは、Promiseベースの非同期処理をよりシンプルに、同期処理のように記述できるようにする構文です。

この記事では、async/awaitの基本的な使い方から、具体的なコード例、そしてエラーハンドリングまで、初心者にもわかりやすく解説します。非同期処理をマスターして、より効率的で快適なWebアプリケーション開発を目指しましょう。

Promiseとは？async/awaitの前に理解すべきこと

async/awaitを理解するには、まずPromiseについて理解しておく必要があります。Promiseは、非同期処理の結果を表現するオブジェクトです。処理が成功した場合はresolve、失敗した場合はrejectを呼び出すことで、結果を通知します。

// Promiseの基本的な使い方
const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("処理が完了しました！");
    // reject("エラーが発生しました");
  }, 1000);
});

myPromise
  .then(result => {
    console.log(result); // → "処理が完了しました！"
  })
  .catch(error => {
    console.error(error);
  });

上記の例では、myPromiseは1秒後にresolveされます。.then()メソッドを使って、resolveされた値を受け取り、コンソールに出力しています。もしrejectされた場合は、.catch()メソッドでエラーをキャッチできます。

async関数の基本的な使い方

async関数は、asyncキーワードを関数の定義の前につけることで定義します。async関数の中では、awaitキーワードを使ってPromiseのresolveを待つことができます。

// async/await の基本例
async function fetchData() {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
  const data = await response.json();
  console.log(data);
}

fetchData();

この例では、fetchData関数はasync関数として定義されています。await fetch(...) は、fetch APIがPromiseをresolveするまで一時停止します。resolveされた値（ここではレスポンスオブジェクト）は、response変数に格納されます。同様に、await response.json()もJSONデータがresolveされるまで一時停止し、結果をdata変数に格納します。

async関数は常にPromiseを返します。したがって、fetchData()の呼び出しは、.then()メソッドを使って結果を処理できます。

awaitキーワードの使い方

awaitキーワードは、async関数の中でPromiseがresolveされるのを待ちます。awaitキーワードを使うことで、非同期処理を同期処理のように記述できます。

awaitはasync関数の中でのみ使用可能です。async関数外で使用するとSyntaxErrorが発生します。

エラーハンドリング

async/awaitを使った場合のエラーハンドリングは、try…catch文を使用します。

// async/await + try...catch
async function fetchDataWithErrorHandling() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/invalid-url");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("エラーが発生しました:", error);
  }
}

fetchDataWithErrorHandling();

この例では、fetch関数とresponse.json()の呼び出しをtryブロックで囲んでいます。もしエラーが発生した場合、catchブロックが実行され、エラーメッセージがコンソールに出力されます。

async/awaitのメリット・デメリット

async/awaitを使うメリットは、コードが読みやすく、書きやすくなることです。また、エラーハンドリングが容易になるという利点もあります。

デメリットとしては、async/awaitはPromiseベースであるため、Promiseを理解している必要があること、そして、async関数の中でしかawaitを使用できないことが挙げられます。

参考リンク

まとめ

async/awaitは、JavaScriptの非同期処理をよりシンプルに記述するための強力な構文です。Promiseと組み合わせることで、複雑な非同期処理も容易に扱えるようになります。ぜひ、async/awaitをマスターして、より効率的なWebアプリケーション開発に役立ててください。