Day 5・プログラムはどう動くか
同期と非同期
同期は行列に並んで待つ、非同期は番号札をもらって後で受け取る。時間のかかる処理の待ち方の違い。
待ち方には2種類ある
プログラムには一瞬で終わる処理と、時間がかかる処理があります。時間がかかるのは、たとえば遠くの[[serveserverequestにデータを取りに行くとき(通信)。この「時間のかかる作業をどう待つか」に、同期と非同期という二つのやり方があります。まとめて[[sync-asynclienrequestと呼びます。
たとえるなら
同期は、ラーメン屋で自分の番まで行列にじっと並ぶ方式。前の人が終わるまで一歩も進めず、あなたは他のことが何もできません。非同期は、番号札をもらって席で待つ方式。呼ばれるまで、あなたはスマホを見たり水を飲んだり別のことができます。
同期: 終わるまでその場で待つ
同期(sync)は「一つの作業が終わるまで、次に進まない」やり方です。順番がはっきりして分かりやすい反面、時間のかかる処理があると、その間ずっと固まってしまいます。画面が「くるくる」して何も押せなくなる、あの状態です。
非同期: 頼んでおいて先に進む
非同期(async)は「時間のかかる作業を頼んだら、完了を待たずに先に進む」やり方です。作業が終わったら結果を受け取ります。番号札方式なので、待っている間も他のことができ、画面が固まりません。
- 同期 = 行列で並んで待つ。順番は明快だが、その間は他が止まる
- 非同期 = 番号札をもらう。待つ間も別のことができる
- 時間のかかる処理(通信・ファイル読み込み等)でこの差が効いてくる
- 非同期は「後で結果が返ってくる」ので、返ってきたときの処理も用意しておく
// 疑似コード: 非同期の考え方(番号札 → 後で受け取る)
データ = 注文する(サーバーからユーザー情報) // 番号札をもらう(まだ結果はない)
... 待っている間、他の処理を進められる ...
完了したら: 受け取ったデータで画面を表示する // 呼ばれたら受け取る非同期を同期のつもりで扱う
データが後で返ってくるのに、すぐ手元にある前提で使ってしまう。まだ空っぽの結果を使って「何も表示されない」バグに。
データを注文
// すぐ使う(まだ届いていない!)
画面に表示する(データ)後で来る前提で扱う
「返ってきたら使う」と順番を分ける。届いてから表示するので、正しく出る。
データを注文
// 返ってきたら:
画面に表示する(データ)非同期でよくあるつまずき
「データが空っぽ/undefinedになる」「一瞬だけ表示されない」の多くは、後で来る結果を早く使いすぎたことが原因。番号札はまだ商品ではない、と思い出してください。
AIにはこう頼む
「この処理は同期?非同期?非同期なら、結果はどのタイミングで使える?」と確認しましょう。さらに「読み込み中の表示も入れて」と頼むと、待っている間の見た目まで整えてくれます。
読んでも腑に落ちない所は、AIに噛み砕いてもらいましょう。
理解度チェック
答えられれば、面接で説明できる状態に一歩近づきます。
「非同期」を最もよく表しているたとえは?
非同期処理でよく起きるバグの原因として、最も典型的なのは?
同期と非同期の違いを、行列と番号札のたとえを使って説明してください。
記述式です。まず自分の言葉で答えを考えてから、模範解答を開いて自己採点してください。