Contents
JavaScript async/await入門：初心者向けにわかりやすく解説
JavaScriptの非同期処理は、初学者にとって理解が難しい概念ですが、async/awaitを使うことでシンプルに実装できます。本記事では、コード例を交えながらasync/awaitの基本構文と実践的な使い方を丁寧に解説します。WebAPIとの連携方法も紹介し、非同期処理の仕組みを実際に体験できるように構成しました。
async/awaitって何？
async/awaitはJavaScriptで「待つ」動作を簡単に書ける機能です。小学生に例えるなら、「お菓子を買うために店員に頼んで待っていること」に似ています。例えば、Webページからデータを取得する際、処理が終わるまで待たずに次のコードを実行できます。
重要ポイント
asyncで非同期関数を作成awaitでPromiseの解決を待ちながら処理を続ける
以下に具体的な使い方やメリットを解説します。
非同期処理の魔法のキーワード
async/awaitは「並列処理」と呼ばれる技術を使います。具体的には：
asyncで非同期関数を作成awaitで「待つ」操作を明示的に記述
この組み合わせによって、複雑なコールバック地獄（callback hell）が回避できるのです。
Promiseとの関係性
async/awaitはPromiseの上に乗っています。Promiseが「約束」なら、async/awaitはその約束を待つための便利な道具です。
|
1 2 |
このセクションでは、async/awaitとPromiseの関係性を詳しく解説します。 |
| 項目 | 値 | 補足 |
|---|---|---|
| Promise | 「約束」を表すオブジェクト | async/awaitの基盤 |
| async | 非同期関数を定義するキーワード | awaitを使うための前提条件 |
| await | Promiseが解決されるまで待つ | メインスレッドをブロックしない |
基本構文と実践例
async/awaitを使ったコードは、同期処理のように直感的に書けます。以下にタイマー処理のサンプルを示します。
|
1 2 |
このセクションでは、async/awaitの基本構文をステップバイステップで解説します。 |
コードで体験！
1. async関数を作成
|
1 2 3 4 5 6 |
async function waitAndPrint() { console.log("スタート"); await new Promise(resolve => setTimeout(resolve, 2000)); console.log("終了"); } |
2. 関数を実行
|
1 2 3 |
waitAndPrint(); console.log("他の処理を実行中..."); |
上記コードは「スタート」→「他の処理を実行中…」→「終了」と表示されます。awaitがないと、タイマーが終わる前に「終了」が出力されてしまう点に注意してください。
エラーの取り扱い方法
非同期処理ではエラーハンドリングも重要です。try/catch文を使えば、ネットワークリクエストの失敗をスムーズに対応できます。
|
1 2 |
このセクションでは、async/awaitにおけるエラーハンドリングの具体的な方法を解説します。 |
失敗しても怖くない！
1. ネットワークリクエスト時のエラー例
|
1 2 3 4 5 6 7 8 9 10 |
async function fetchData() { try { const response = await fetch("https://api.example.com/data"); if (!response.ok) throw new Error("ネットワークエラー"); console.log(await response.json()); } catch (error) { console.error("取得に失敗しました:", error); } } |
2. エラーハンドリングのポイント
tryブロック内で処理を実行catchでエラーを捕捉し、ユーザーに通知や再試行を提案- ネットワーク環境の不安定さに対応
非同期処理の流れをイメージする
非同期処理は「並列」で動作するため、実行順序が直感的ではありません。視覚的に理解するために、タイマーやfetch APIの例を比較してみましょう。
|
1 2 |
このセクションでは、非同期処理の流れを視覚的に理解する方法を紹介します。 |
タイムラインで見よう
| 手順 | 同期処理 | 非同期処理 (async/await) |
|---|---|---|
| 1 | console.log("A") |
console.log("A") |
| 2 | setTimeout(...) |
await new Promise(...) |
| 3 | console.log("B") |
console.log("B")（待機後） |
非同期処理では、setTimeoutの処理が終わるまで他のコードも実行されます。この特性を活かして、アプリのパフォーマンス向上に繋げましょう。
WebAPIとの連携例
async/awaitはWebAPI（REST APIなど）と組み合わせて使うのが本領です。GitHub APIや天気予報APIを使って実際に動かしてみましょう。
|
1 2 |
このセクションでは、async/awaitを用いたWebAPIの実装例を紹介します。 |
実際にネットワークを使う
1. GitHub APIの使用例
|
1 2 3 4 5 6 7 8 9 10 11 |
async function getRepoInfo() { try { const response = await fetch("https://api.github.com/repos/octocat/Hello-World"); if (!response.ok) throw new Error("リポジトリ情報取得失敗"); const data = await response.json(); console.log(`スター数: ${data.stargazers_count}`); } catch (error) { console.error(error); } } |
2. 実行手順
fetchでAPIにアクセスresponse.json()でデータを取得- エラー処理を実施
上記コードは、GitHubのリポジトリ情報を取得し、「スター数」をコンソールに出力します。
まとめ
- async/awaitは非同期処理を直感的に書けるJavaScriptの機能
- Promiseの上に構築されており、
try/catchでエラーハンドリング可能 - WebAPIとの連携で、実際のデータ取得が簡単に実装できる
演習問題はこちら：本記事で解説したコードを実際に試してみましょう。練習用のサンプルコードや環境については、当社の公式リソースをご参照ください。