こういうときはスプレット構文を使うんやで

はじめに
リファクタ前
リファクタ後
おしまい
- コメント

はじめに

こういうときはこう書け！

というやつです。適当なサンプルコードです。

リファクタ前

まず、元のコードは以下のようになっています。

const fetchShop = () => {
  axios.get('/api/hoge/shop').then((response) => {
    try {
      if (response.status === 'success') {
        const fetchedShop = {
          id: response.data.id,
          name: response.data.name,
          zipcode: response.data.zipcode,
          formatZipcode:
            response.data.zipcode.slice(0, 3) +
            '-' +
            response.data.zipcode.slice(3),
          prefecture: response.data.prefecture,
          formatAddress: response.data.address,
          tel: response.data.tel,
          formatTel: response.data.formatTel,
        }

        setShop(fetchedShop)
      }
    } catch (error) {
      console.error(error)
    }
  })
}

このコードでは、response.dataから取得した各プロパティを一つずつfetchedShopオブジェクトにセットしています。

リファクタ後

次に、リファクタリング後のコードは以下のようになります

const fetchShop = () => {
  axios.get('/api/hoge/shop').then((response) => {
    try {
      if (response.status === 'success') {
        const fetchedShop = {
          ...response.data, // response.dataの全てのプロパティを一度にfetchedShopにセット
          formatZipcode:
            response.data.zipcode.slice(0, 3) +
            '-' +
            response.data.zipcode.slice(3), // formatZipcodeプロパティを追加
        }

        setShop(fetchedShop) // fetchedShopをsetShop関数に渡す
      }
    } catch (error) {
      console.error(error)
    }
  })
}

このコードでは、...response.dataという記述（スプレッド構文）を使って、response.dataの全てのプロパティを一度にfetchedShopオブジェクトにセットしています。

formatZipcodeは郵便番号を特定の形式（例えば、123-4567）に変換するためのものです。 response.dataの値を操作して新しいプロパティ名に改変している、つまりresponse.dataには存在しないプロパティに関しては個別に追加しています。

このようにコードをリファクタリングすることで、コードがシンプルになり、読みやすくなりますし、新たなプロパティが追加された場合でも、コードの修正が容易になります。