- もう怖くない！JavaScriptの非同期処理 async/await が驚くほど分かるようになる話

公開日: 2025年9月12日

こんにちは、「SerchCode Pro」の【あさき】です。

JavaScriptの学習で、多くの人が一度は巨大な壁として感じること。それが「非同期処理」ではないでしょうか。

Promise、.then()、コールバック地獄…考えただけで頭が痛くなる、という人もいるかもしれません。

僕自身もそうでした。特に、APIからデータを取ってくるような処理を書くと、コードがネスト（入れ子）だらけになり、「一体どのコードがどの順番で動いているんだ…？」とパニックになった経験が何度もあります。

しかし、現代のJavaScriptには、そんな悪夢のような非同期処理を、まるで同期処理（上から順番に実行される普通のコード）のように、直感的に書けるようにしてくれる魔法があります。

それが、async/await です。

今日は、この async/await が、一体何をしていて、なぜこんなに便利なのかを、僕なりの言葉で解説してみたいと思います。

前提：なぜ非同期処理が必要なのか？

まず、なぜJavaScriptには非同期処理という面倒な仕組みがあるのでしょうか？

それは、「時間のかかる処理」の待ち時間で、他の作業を止めてしまわないようにするためです。

レストランのウェイターを想像してください。

Aさんの注文（時間のかかる処理）をキッチンに伝えた後、料理が出来上がるまでAさんのテーブルの前でずっと待ち続けるウェイターがいたら、どうでしょう？その間、BさんやCさんは永遠に注文できません。レストランは回りませんよね。

優秀なウェイターは、Aさんの注文を伝えたら、すぐにBさんの注文を取りに行きます。そして、キッチンから「Aさんの料理ができました！」と呼ばれたら、Aさんの元へ料理を運びに行きます。これが非同期処理の考え方です。

async/await 登場前の世界 (.then()チェーン)

async/await が登場する前は、この「料理ができたら、これをしてね」という繋がりを、.then() というメソッドで鎖（チェーン）のように繋げて書いていました。

// ユーザー情報をAPIから取ってくる例

fetch('https://api.example.com/user/1')

.then(response => {

// 最初の処理（レスポンスをJSONに変換）

return response.json();

})

.then(user => {

// 次の処理（ユーザー名を表示）

console.log(user.name);

})

.catch(error => {

// もし途中でエラーが起きたら

console.error(エラーが発生しました:, error);

});

これでも動きますが、処理が3つ、4つと増えていくと、then がどんどん連なり、コードは読みにくくなっていきます。

async/await という魔法

async/await は、この.then()チェーンを、まるで魔法のように書き換えてくれます。

// async/await を使った同じ処理

async function fetchUser() {

try {

const response = await fetch('https://api.example.com/user/1');

const user = await response.json();

console.log(user.name);

} catch (error) {

console.error('エラーが発生しました:', error);

}

}

fetchUser();

どうでしょうか？.then() がなくなり、普通のプログラムのように、コードが上から下に流れているように見えませんか？これこそが async/await の最大のメリットです。

async と await の役割

この魔法を理解するためのキーワードは2つだけです。

・関数の前につける「宣言」です。

・「この fetchUser 関数の中では、時間のかかる非同期処理が出てきますよ。だから、この関数全体を『待たせることのできる特別な関数』として扱ってくださいね」と、JavaScriptエンジンに教えてあげる役割です。

・async をつけた関数は、必ず Promise という「結果がいつか返ってくる約束手形」を返すようになります。

・Promise を返す可能性のある処理（fetch やresponse.json() など）の前に置きます。

・「この fetch() という処理は時間がかかるので、結果が返ってくるまで、ここで一旦処理を『待って』ください」という意味です。

・await は、async がついた関数の中でしか使えません。

ウェイターの例で言うなら、async function が「これから注文を取りに行くぞ」という宣言で、await が「料理が出来上がるまで、ちょっとここで待機！」という具体的な行動です。でも、レストラン全体（ブラウザ）は止まらず、他の作業を続けてくれます。

僕が async/await を使う時は、必ず try...catch で囲むようにしています。await を使った処理でエラーが起きると、catch ブロックで一括してエラー処理ができるので、コードが非常にクリーンになります。

まとめ

もしあなたが今、.then()チェーンやコールバック地獄で苦しんでいるなら、ぜひ async/await を使ってみてください。

最初は「おまじない」のように感じるかもしれませんが、使っていくうちに、その直感的な分かりやすさと、コードの綺麗さに感動するはずです。

「SerchCode Pro」で async や await と検索して、色々な用例を見てみるのも、理解を深めるのに役立ちますよ。

#プログラミング　#プログラミング　勉強 #プログラミング　初心者