同期処理 / 非同期処理

概要（サマリー）

同期処理とは、ある処理が完了するまで次の処理を待ってから進む方式のことである。コードが上から順番に1行ずつ確実に実行される。

非同期処理とは、時間のかかる処理の完了を待たずに次の処理を進める方式のことである。処理が終わったタイミングで結果を受け取り、続きの処理を実行する。

AIコーディングでAPIからデータを取得するコードを書いてもらうと、ほぼ必ず非同期処理が登場する。await や .then() が出てきたら非同期処理のサインだ。

詳細解説

同期処理の流れ

同期処理では、前の処理が終わるまで次の処理に進まない。上から順番に読めるため分かりやすいが、時間のかかる処理があると、その間ほかの処理も待たされる。

console.log('1. 開始');
console.log('2. 処理中');
console.log('3. 終了');

このコードは、必ず 1. 開始、2. 処理中、3. 終了 の順番で表示される。単純な計算や短い処理では、同期処理の方が理解しやすいことが多い。

なぜ非同期処理が必要なのか

ブラウザ上のJavaScriptはシングルスレッド（1つの処理しか同時に実行できない）で動く。サーバーへのデータ取得など時間のかかる処理を同期的に行うと、その間ページ全体が固まってしまう。

非同期処理を使うことで、時間のかかる処理が完了するのを「待ちながら」も、他の操作（画面の描画、ユーザーの操作への応答）を止めずに動かし続けることができる。

async / await の書き方

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

async を関数の前に付けると非同期関数になる。await を付けた処理は完了を待ってから次の行に進む。非同期処理を同期処理のように読みやすく書ける構文だ。

非同期処理のエラー処理

API通信やファイル読み込みのような非同期処理では、通信失敗、サーバーエラー、データ形式の不一致などが起こることがある。そのため、async/await を使うときは try/catch でエラーを捕まえる書き方がよく使われる。

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

try の中に成功時の処理を書き、失敗した場合は catch に進む。AIが生成したAPI通信コードでエラーの原因を調べるときは、エラーハンドリングが入っているか確認するとよい。

Promise

await の裏側では Promise という仕組みが動いている。Promise は「未来のある時点で結果が得られる約束」を表すオブジェクトで、.then() や .catch() をつなげて処理を記述することもできる。

fetch('https://example.com/api')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

AIコーディングと非同期処理の関係

AIにAPI通信、ログイン処理、ファイル読み込み、データ保存などのコードを作ってもらうと、非同期処理がよく登場する。fetch、Promise、async、await、.then() が出てきたら、処理の完了タイミングを意識して読む必要がある。

動かない場合は、await を付け忘れていないか、async が必要な関数に付いているか、Promiseの結果を受け取る前に値を使っていないかを確認する。エラーメッセージと該当コードをAIに渡して「非同期処理の順番に問題がないか確認してください」と聞くと、原因を絞り込みやすい。

よくある勘違い

await を付ければ必ず待ってくれる？

通常のJavaScriptでは、await は async 関数の中で使う。async のない関数の中で使うとエラーになるため、AIが生成したコードに await があるのに動かない場合、関数に async が付いているか確認するとよい。

ただし、ES Modules では関数の外側でもトップレベル await を使える場合がある。初心者のうちは「関数の中で await を使うなら、その関数に async が必要」と覚えると実用上わかりやすい。

非同期処理は同時に全部実行される？

非同期処理は「待ち時間中に他の処理を止めにくい」仕組みであり、すべてが完全に同時実行されるという意味ではない。JavaScriptでは、処理の完了通知を受け取りながら順番に続きを実行するイメージで考えると分かりやすい。

await を忘れるとどうなる？

await を忘れると、実際の結果ではなくPromiseそのものを扱ってしまうことがある。たとえばAPIの結果を待たずに画面へ表示しようとして、期待したデータが入っていない状態になることがある。

非同期処理は難しいから避けるべき？

API通信やユーザー操作を扱うWeb開発では、非同期処理は避けて通れない。最初は async/await と try/catch の基本形を覚え、複雑なPromiseチェーンは必要になったときに学ぶとよい。

より詳しくAIに聞いてみよう

• async/await と Promise の関係を初心者向けに説明してください。
• 非同期処理でエラーが起きたとき、どうやって捕捉すればよいですか？
• fetch を使った API 通信のコードを、async/await で書いてください。
• 同期処理と非同期処理の違いを、日常の例えとJavaScriptコードで説明してください。
• AIが生成した非同期処理のコードで await を付け忘れていないか確認する方法を教えてください。