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

✅ 回答

レストランで例えると：同期＝料理が来るまでじっと待つ、非同期＝料理を待つ間にスマホを見る。

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 で読みやすく書く

コードで比較

// 同期処理: 上から順番に実行（待つ）
console.log("1: 開始");
const result = heavyCalculation(); // 3秒かかる → 待つ
console.log("2: 完了"); // 3秒後に実行される

// 非同期処理: 待たずに次へ進む
console.log("1: 開始");
fetch('/api/data').then(res => {
  console.log("3: データ取得完了"); // 後で実行される
});
console.log("2: fetch中だけど先に進む"); // すぐ実行される
// 出力順: 1 → 2 → 3

// async/await: 非同期を同期っぽく書ける
async function getData() {
  console.log("1: 開始");
  const res = await fetch('/api/data'); // ここで待つ
  console.log("2: 取得完了"); // fetchが終わってから実行
}
// await は async 関数の中でのみ使える

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

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

中高生向けの例え

同期：ラーメン屋で注文→できるまで席で待つ→食べる（1つずつ順番）

非同期：フードコートで注文→番号札をもらう→他の店も回る→呼ばれたら取りに行く（並行して進む）