asyncとawaitをわかりやすく説明してみた

async/awaitとは

コンピューターの世界では「同期処理」、「非同期処理」という処理の仕方が2種類あります。
おつかいで例えると、、、
同期処理は、お母さんが子供に「パン買ってきて」とパン屋さんにおつかいを頼んだとします。
でもパン屋さんはいつも混んでいて、パンが焼き上がるまで待たなきゃいけません。

流れでいうと下記です。

1.パン屋さんに行く
2.パンが焼き上がるのを待つ（ここで時間がかかる）
3.パンを買って家に帰る

なので上記の状態だとこの2の時に他の作業ができないです。(例えば宿題とかゲーム)

逆に非同期処理は「パンが焼けたら教えてね！」とお店の人に頼んで、その間に他のことをやれるようにします。

基本的にはこの考え方がasyncとawaitの考え方です。

プログラムで表すと

async function buyBread() {
  console.log("パン屋さんに行くよ！");
  
  // パンが焼けるのを待つ
  await new Promise(resolve => setTimeout(resolve, 3000)); 
  
  console.log("パンを買った！家に帰るよ！");
}

console.log("宿題をするよ！");
buyBread();
console.log("ゲームをするよ！");

・asyncとは
関数の前につけることでその関数は非同期であることを示します。
そうすることで、プログラムに対して、「この関数の中には終わるのを待たないといけない作業がある
かも！」と伝えることができます。
おつかいの例で言うと「このおつかいは時間がかかるよ！」という合図です。

・awaitとは
関数内の作業に対して、「作業が終了するまで待つよ！」という指示を出せます。
こちらもおつかいの例で言うと「パンが焼けるまで待つよ！」という意味になります。

上記プログラムがどういった流れで動くかというと、、
1.まず「宿題をするよ！」 が表示される。
2.パンを買いに行く（でも、パンが焼けるまで待たない）
3.「ゲームをするよ！」 がすぐに表示される
4.3秒後（パンが焼けたあと）、「パンを買った！家に帰るよ！」 が表示される

await で待っている間に、他のことができるというのが非同期処理のポイントです。

async/awaitがないとダメな例

下記はNext.jsの一例ですが、awaitが仮になかった場合「data.errors」の部分でエラーが出ます。
理由としては、awaitがないとデータが全て受け取れていない状態にも関わらずそのデータの中身を強引に見に行こうとしてしまっているからです。

const data = await response.json();

if(response.ok){
    router.push("/main");
}else{
    if(data.errors){
        setError(data.errors);
    }
}

まとめ

すごく初歩的な内容ですが、意外とふわっとしたまま進めてしまっていた部分だったので今回自分にもわかりやすく説明させていただきました。