同期処理と非同期処理の違いは？【例えとコードでわかる】

✅ 回答

飲食店で例えると：同期＝ラーメン屋で注文してできるまで席で待つ、非同期＝フードコートで番号札をもらい他の店を回って呼ばれたら取りに行く。同期は1つずつ順番に、非同期は並行して進みます。

30秒でわかる早見表

	同期処理	非同期処理
実行のしかた	上から順番に、終わるまで待つ	待たずに次の行へ進む
画面への影響	重い処理中は固まる	固まらない
代表例	ふつうの計算・代入	setTimeout・fetch（API通信）
書き方	そのまま書く	.then() / async/await

同期処理のイメージ

// 同期処理：上から順番に実行される
console.log("1. 朝起きる");
console.log("2. 顔を洗う");  // 1が終わってから実行
console.log("3. 朝食を食べる"); // 2が終わってから実行
// 出力: 1 → 2 → 3（必ずこの順番）

1つ終わるまで次に進めない。シンプルだけど、時間のかかる処理があると全体が止まる。

非同期処理のイメージ

// 非同期処理：待ち時間に他のことを進める
console.log("1. 注文する");

// 料理ができるまで待つ（3秒かかる）が、その間に他のことができる
setTimeout(() => {
  console.log("3. 料理が届いた");
}, 3000);

console.log("2. スマホを見る"); // 料理を待つ間に実行される
// 出力: 1 → 2 → 3（2が先に出る！）

「3秒待つ」処理の間に、次の行が先に実行される。画面がフリーズしない理由はこれ。

なぜ非同期が必要？

もし全部同期だったら	非同期なら
API通信中に画面が固まる	通信中も画面操作できる
画像読み込み中にスクロールできない	画像は後から表示される
1つのボタンが反応するまで他のボタンが押せない	複数の操作を同時に処理できる

実用例：天気APIの取得

// 実用例：APIからデータを取得する（非同期）
async function getWeather() {
  console.log("天気を取得中...");
  const response = await fetch("https://api.example.com/weather");
  const data = await response.json();
  console.log("天気:", data.weather);
}
// awaitで「結果が返ってくるまで待つ」ことを明示

async/await を使うと「非同期だけど、見た目は同期的に読める」コードが書けます。

学ぶ順番

1. setTimeout で非同期の感覚を掴む
2. fetch でAPIからデータを取得する
3. async/await で読みやすく書く

非同期処理のよくある間違い

間違い	正しい対処
await なしで fetch の結果を使う	await fetch(...) と書く。await がないと Promise オブジェクトが返る
async 関数の外で await を使う	await は async function の中でのみ使える
非同期の結果を同期的に使おうとする	結果を使う処理は .then() か await の後に書く
エラー処理を忘れる	try/catch で囲む。通信エラーはいつでも起きる