Async/Awaitの基本と分割代入で守るJavaScriptのAPI処理術

JavaScriptでAPIを使用する際、非同期処理として async / await 記法を使うことがあります。

この async は、関数の書き方（関数宣言・関数式・アロー関数）によって記載する位置が変わるため、備忘録としてまとめておきます。

基本の書き方（関数宣言）

async function getAddress() { 
  const response = await fetch('https://zipcloud.ibsnet.co.jp/api/search?zipcode=XXXXXXX'); 
  const data = await response.json(); 
  console.log(data.results[0].address1 +　data.results[0].address2); 
}

getAddress();

関数宣言の場合は、function の前に async を付けます。

関数式

const getAddress = async function() {
 // 省略
}

関数式の場合は、function の前に async を付けます。

アロー関数を使う場合

const getAddress = async() = {
 // 省略
}

アロー関数の場合は、() => の前に async を付けます。

補足：分割代入を使うとコードが読みやすくなる

コンソールに住所情報を出力するとき、
data.results[0] を何度も書くことになります。

console.log(data.results[0].address1 + data.results[0].address2);

この書き方でも問題はありませんが、

• 記述が長くなる

• タイポ（タイプミス）のリスクが増える

といったデメリットがあります。

そこで 分割代入 を使うと、コードをすっきり書くことができます。

▼分割代入なし

console.log(data.results[0].address1 +　data.results[0].address2); 

▼分割代入あり

  const {address1, address2} = data.results[0];
  window.alert(address1 + address2);  

このように書くことで、

• タイポのリスクを減らせる

• コードの見通しが良くなる

というメリットがあります。

まとめ

async は 関数の前に付ける。

• 関数宣言 → async function

• 関数式 → async function

• アロー関数 → async () =>

関数の書き方によって位置は変わりますが、
「関数の前に付ける」という点は共通しています。