PR：この記事にはアフィリエイトリンクが含まれます。
Promiseやasync/awaitを使い始めた途端、処理が思った順に進まず戸惑うことがあります。JavaScriptの非同期処理は、コードの見た目だけでは実行順が読み取りにくいんですよね。
通信を待ちながら画面を動かすには、Promiseの構文だけでなく、イベントループとブラウザーAPIの役割も知っておきたいところです。仕組みを押さえれば、エラーや処理の流れを追いやすくなります。
紹介するのは、非同期処理に特化した本、問題を解いて学ぶ本、JavaScript全体を扱う本の3冊です。学びたいことに近い一冊を見つけてください。
先に全体像
まずは3冊を一覧で確認しましょう。非同期処理を掘り下げる本、手を動かして練習する本、言語や実行環境まで広く学べる本。それぞれ得意な学び方が違います。
| 書名 | 主な内容 | 非同期処理の範囲 | 参考価格（税込） |
|---|---|---|---|
 JavaScript徹底攻略 非同期処理編 Promise, async/awaitの仕組みと使い方 | 非同期処理の専門解説 | Promiseの内部、イベントループ、async関数とawait | 2,200円 |
 JavaScript基礎ドリル 穴埋め式 | 問題演習と詳しい解説 | タイマー、Promise、async関数とawait、Fetch API | 2,200円 |
 JavaScript（第7版） | 言語・標準ライブラリ・実行環境 | Promise、async関数とawait、非同期イテレーション | 5,060円 |
価格は公式の希望小売価格・定価を目安にしています。実売価格は時期や店舗で変わるため、購入時に確認してください。
仕組みを知りたいなら専門書、コードを書いて練習したいならドリル、JavaScript全体を押さえたいなら総合書が合います。ブラウザーAPIを学ぶ人は、Fetch APIやDOMの扱いも確かめておきましょう。
非同期が難しい理由
JavaScriptのコードは基本的に書かれた順に一つずつ実行されます。通信やタイマーには待ち時間があるため、結果が返るまで処理を止めるわけにはいきません。
たとえばサーバーからデータを受け取る間も、画面のボタンは押せる状態にしたいもの。データが届いてから続きを動かす仕組みが、非同期処理です。
コールバックを何段も入れ子にすると、処理の順や失敗時の流れを追うのが大変になります。Promiseは成功・失敗を一つの値として扱い、処理をつなぎます。
async関数とawaitを使うと、Promiseを待つ流れを読みやすく書けます。ただ、上から並んだコードでも待ち時間には別の処理が進行します。この差を押さえると実行順を追いやすくなります。
順番を決める仕組み
イベントループは、実行中のJavaScriptが区切れたあと、次に動かす処理を取り出していく仕組みです。ブラウザーのメインスレッドでは、一つの処理が終わるまで次の処理は待ちます。
Promiseのthenやcatchに登録した処理は、登録直後には動かずマイクロタスクとして予約されます。同期処理が終わったあと、次のタスクへ移る前に処理されるのが基本です。
setTimeoutに登録した処理は、指定した待ち時間が過ぎてからタスクとして実行されます。指定時間ぴったりに動くとは限りません。ほかの処理が続いていれば、そのぶん後ろにずれることもあります。
実行順を追うときは、同期処理、マイクロタスク、次のタスクという流れを意識すると整理しやすくなります。画面の描画タイミングも関わるため、表示更新の順序はいつも一律ではありません。
ブラウザーAPIの役割
Promiseやasync/awaitはJavaScript言語の機能です。Fetch APIやDOM、タイマーはブラウザーの機能。この違いを押さえると、コードがどの環境の機能を呼び出しているか見通せます。
Fetch APIは通信を行い、Promiseを返します。HTTP 404などの応答を受け取っただけではPromiseは失敗になりません。通信結果の判定にはResponseのokやstatusを確認します。
タイマーやクリックイベントでは、ブラウザーの環境がタイミングを管理し、登録した関数をあとから実行します。待ち時間や失敗の扱いはAPIごとに異なるので、Promiseの挙動と合わせて押さえておきたいですね。
Node.jsもJavaScriptを実行しますが、DOMのようなブラウザー固有の機能はありません。ブラウザー用のコードを学ぶなら、言語機能と実行環境の両方を見ておくことが大切です。
問題で手を動かす
『JavaScript基礎ドリル 穴埋め式』は金子平祐、Grodet Aymeric、Bahadur MD Rakibと新居雅行の共著で、オーム社から2020年11月に刊行されました。256ページの紙書籍で、参考価格は税込2,200円です。
穴埋め式の問題を解き、詳しい解説で答えを確かめる構成です。タイマーを使う処理やPromise、async関数とawaitのほか、Fetch APIによるAJAXも練習できます。
ブラウザー環境とDOM、ユーザーインターフェイスやNode.jsも範囲に含みます。非同期処理の演習に限らず、画面上でJavaScriptがどう使われるかも問題を通して確かめられます。
コードを読んで終わりにせず、自分で続きを補いながら学びたい人におすすめです。問題を解きながら基本の書き方を身につけられます。
内部の仕組みを追う
『JavaScript徹底攻略 非同期処理編 Promise, async/awaitの仕組みと使い方』は澁谷真帆著、インプレス NextPublishing刊の印刷版です。2022年1月刊行で246ページ。参考価格は税込2,200円です。
対応する規格はECMAScript 2021です。コールバック、Promise、Promiseチェーン、複数のPromise、async関数とawaitへと進み、非同期処理を段階的に扱います。
イベントループやマイクロタスクキューに加えて、PromiseをJavaScriptで実装する話題も収録。thenで値やエラーがどう引き継がれるか、async関数とawaitがどう関係するかも扱います。
Promiseやasync関数とawaitを使っているものの、実行順や内部の動きが曖昧な人におすすめです。仕様書だけでは難しく感じる仕組みも、解説書を通して理解できます。
言語全体を見渡す
『JavaScript（第7版）』はDavid Flanagan著、村上列訳の総合書です。オライリー・ジャパンから2021年12月に刊行された784ページの紙書籍で、参考価格は税込5,060円です。
JavaScriptの言語機能や標準ライブラリから、ブラウザー上のクライアントサイドJavaScript、Node.jsまで幅広く扱います。非同期処理ではコールバック、Promise、async関数とawaitに加え、非同期イテレーションも取り上げています。
モジュールについても、Node形式とES6形式、Web上のモジュール、動的インポートを解説。非同期処理を実行環境やアプリ全体の構成と結びつけて理解したいときに役立ちます。
JavaScriptを広く学び、詳しい参考書を手元に置きたい人におすすめです。非同期処理だけを集中して学ぶなら専門書の方が焦点は合いますが、知識の幅を広げるなら本書を選べます。
結論
Promiseの内部やイベントループを学ぶなら『JavaScript徹底攻略 非同期処理編』、問題を解いてFetch APIまで練習するなら『JavaScript基礎ドリル 穴埋め式』がおすすめです。JavaScript全体を学ぶ人には『JavaScript（第7版）』を勧めます。
イベントループやマイクロタスクが分かると、thenの実行順やawait後の処理を自分の言葉で説明しやすくなります。ブラウザーAPIを使うコードを書く人は、FetchやDOMの学習も忘れずに。
知りたいのが書き方ならドリル、処理順の疑問なら専門書、周辺知識まで含む基礎固めなら総合書です。いま気になっているテーマから読み始めると、学習を進めやすくなります。
Amazon の PC をスコア化してみた
Amazonにある8〜14インチの小型WindowsタブレットやノートPCを、スペック別にスコア化して比較・ランキング。
