同期処理と非同期処理の違いは？

✅ 回答

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

同期処理のイメージ

// 同期処理：上から順番に実行される
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 関数の中でのみ使える

中高生向けの例え

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

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