同期処理はピタゴラスイッチ、非同期処理はJavaScript【Day21 of 100】

同期はピタゴラスイッチ、非同期はJavaScript！

プログラミングって、上から下に順番に一個ずつ終わらせて進む「ピタゴラスイッチ」みたいなものだと思ってた。実際、Pythonなんかはそうで、3秒待機と書けば、PCはその間じっとフリーズして待ってくれる。これが「同期処理」っていうんだって。

ところが、JavaScriptは違った。こいつは超せっかちな「非同期処理」なのだ。3秒待てと書いても、それは「3秒後に鳴るタイマーをそこに置いた」だけで、自分は待たずに次の一行へ全力疾走してしまう。タイマーを置いた瞬間に、もう次の仕掛けを動かしちゃうんだよね。

この「タイマーを置いただけ」の状態を制御して、僕のイメージ通りに「ちゃんと鳴るまで待って！」と襟首を掴んで順番待ちさせる魔法が、async / await。これを使うことで、ようやくピタゴラスイッチのように順番に処理が進むようになる。

52歳、JavaScriptの「せっかち」の正体がわかって、またひとつ呪いが解けた気がするよ。

↑動機処理なプログラムはピタゴラスイッチ。PHPやRuby, Python

↓一個一個終わってから進めよ！って指示しないと同時進行しちゃうスーパーせっかちJavaScript

自分学習用

async function morningWow() {

console.log(“わお…”);

// 正解：await 魔法の関数(秒数);

await setTimeout(3000);

console.log(“まじか！”);

}

// ここを追加！

morningWow();

これぐらいシンプルにしたい。これじゃどうしてだめなの？

そのシンプルにしたい気持ち、めちゃくちゃ分かります！「待つ（setTimeout）のを待って（await）ね」という書き方は、日本語としては完璧に筋が通っていますもんね。

でも、残念ながらこれだと3秒待たずに「まじか！」が一瞬で出てしまいます。

なぜダメなのか、そしてどうすれば理想のシンプルさに近づけるのか解説しますね。

---

なぜ await setTimeout(3000) ではダメなのか？

結論から言うと、JavaScriptの標準の setTimeout という道具が、「await（待て）」という命令に対応していない古い設計だからです。

• await が待てる相手： 「終わったら報告します！」という約束（Promise）を返してくれる道具だけ。
• setTimeout の正体： 注文だけ受けて、レシートも何も出さない「昔ながらの頑固な注文取り」。

await は相手から「約束（Promise）」を渡されないと、「あ、待つ必要ないんだな」と判断して、すぐに次の行へ進んでしまうんです。

---

これが一番シンプルで「正解」に近い形！

標準の setTimeout をそのまま使うのは諦めて、今のJavaScriptでは**「待てるタイマー」**を一行だけ作っておくのが一般的です。

JavaScript

// 【準備】これ一行だけ最初に書いておけば、あとは自由に「待て」が使えます
const wait = (ms) => new Promise(res => setTimeout(res, ms));

async function morningWow() {
  console.log("わお...");

  // これなら「3秒待ってから次へ行く」という理想の動きになります！
  await wait(3000);

  console.log("まじか！");
}

morningWow();