こんにちは，ココア（@cocoa_folio）です．
これまでは主にpythonに触れてきましたが，最近Javascriptを勉強し始めたので，Webエンジニアを目指す方々へのtipsとして記事を書いていきたいと思います．

前回の記事はこちら▼

前回に引き続き，今回はasync/awaitについて説明していきます！

async/awaitとは

Promiseと一緒に用いられることの多いasync/await
asyncとawaitって一体なんでしょう？
Googleで「async await」と調べてみると...

asyncとは

非同期関数 — AsyncFunction オブジェクトである関数を定義します。非同期関数はイベントループを介して他のコードとは別に実行され、結果として暗黙の Promise を返します。ただし、非同期関数を使用したコードの構文および構造は、通常の同期関数と似たものになります。

awaitとは

async function によって Promise が返されるのを待機するために使用します。

となっています．

つまり，なんとなく

asyncを使うと，返り値としてPromiseを返す
awaitを使うと待機状態を作ってくれる

ということが分かります．

コードの作成

実際のコードを見てみましょう！

サンプルコード全体

//こちらはコメントです．
//functionで関数の宣言
//Promiseの機能を持った関数"makeRequest"と"processRequest"を定義
//locationとresponseはそれぞれの関数における引数
//`${}`で文字列の中に変数の値を代入可能

function makeRequest(location){
  return new Promise((resolve, reject)=>{
    console.log(`Making Request to ${location}`)
    if (location === 'Google'){
      resolve('Google says hi')
    }else{
      reject('We can only talk to Google')
    }
  })
}

function processRequest(response){
  return new Promise((resolve,reject)=>{
    console.log('Processing response')
    resolve(`Extra Infromation + ${response}`)
  })
}

//asyncの利用
//try catchを使用

async function doWork(){
  try{
  const response = await makeRequest('Google')
  console.log('Response Received')
  const processedResponse = await processRequest(response)
  console.log(processedResponse)
  } catch(err){
    console.log(err)
  }
}
doWork()

こちらのコードをもとにasync/awaitの仕様を説明していきます．
まず，並列処理を行いたい関数makeRequestとprocessRequestを用意します．
（関数名はなんでも構いません）

これらのPromiseオブジェクトを処理する際には，thenを用いて直列接続（or並列接続）する必要がありました．
しかし，(start)→関数→then→関数→then→関数→then→...→(goal)と繋いでいくと，コードの見栄えが悪くなってしまいます．（ifを何度もつなげてしまうようなイメージ...😭）

そこで，thenの代わりに使用するのが，async/awaitです！
async/awaitを使うことで，複数のPromiseオブジェクトをより簡潔に記載することができます．

文法

サンプルコードのdoWorkを見ていきましょう．
asyncはfunctionの先頭に記載するだけで，doWork関数を非同期関数とすることができます
さらに，async functionの中で

const response = await makeRequest('Google')

と定義することで，makeRequest関数にawait（待機状態）を付与することができます
待機状態が付与されると，makeRequest関数の処理が終了するまで，次に進まないため，thenのような直列化をたったの１行で施すことができます．

async/awaitを使うときには，エラー処理としてtry catchを使うことが通例なので覚えておきましょう！

参考文献

JavaScript Async Await　：　https://www.youtube.com/watch?v=V_Kr9OSfDeU