[Laravel][Vue.js] Laravel + vue で郵便番号から住所を取得

バージョン

Laravel 5.8
Vue.js 2.6.10

概要

郵便番号-住所検索API (zipaddress.net)の外部APIを呼び出して郵便番号から住所を取得する。
※なぜこの方式を採用したのかは最後に記載します。

以下の流れになる。

1. vueから自サイトのAPIを呼び出してLaravel側のコントローラーを呼ぶ
2. サーバー側（Laravelのコントローラー）から外部API（zipaddress.net）を呼び出す（CORS対策）
3. 外部APIの結果をJSONデコードしてvueに返す

コード

◾️vue

<template>
  〜〜略〜〜
  <input v-model="zipcode" />
  <input v-model="state" />
  <input v-model="city" />
  <input v-model="address_1" />
  〜〜略〜〜
</template>
<script>
export default {
  data() {
    return {
      zipcode: "",
      state: "",
      city: "",
      address_1: ""
    };
  },
  watch: {
    zipcode: function(val) {
      if (7 != val.length) {
        return;
      }

      let self = this;
      // 自サイトのAPI
      let url = "/ajax/zipcode/" + val;
      axios.get(url).then(function(response) {
        if (response.data.success) {
          self.state = response.data.response.pref;
          self.city = response.data.response.city;
          self.address_1 = response.data.response.town;
        }
      });
    }
  }
</script>

◾️Laravel側のcontroller（GET:"/ajax/zipcode/" + val　呼び出し）

    /**
     * 郵便番号情報取得
     */
    public function getZipInfo(Request $request, $zipcode)
    {
        // 外部API呼び出し
        $handle = curl_init("https://api.zipaddress.net/?zipcode=" . $zipcode);
        curl_setopt($handle, CURLOPT_SSLVERSION, CURL_SSLVERSION_TLSv1);
        curl_setopt($handle, CURLOPT_RETURNTRANSFER, true);

        $result = curl_exec($handle);
        curl_close($handle);

        $contents = (array)json_decode($result, false);
        if (!$contents) {
            return response()->error('取得失敗');
        } elseif ($contents['code'] != 200) {
            return response()->error($contents["message"]);
        }

        $res = [];
        $res = $contents['data'];
        
        return response()->success($res);
    }

なぜこの方式なのか？

• 自前DBに郵便番号と住所のデータを格納する方式 定期的に日本郵便のサイト（郵便番号データダウンロード - 日本郵便）から
  データを取得し、自前DBに格納するのがおそらくベストだが
  「定期的に集計する運用コスト」、「０からの構築スピード」を考えて今回は見送った。
  ただし、本方法であればサイトをスケールアップする際にLaravel側のコントローラを修正すれば対応できる。

• 他の外部APIについて YubinBango（YubinBango-core）が候補に挙がったがvueとの組み合わせでは使えないっぽい。
  以下のサイトに記載あり。
  郵便番号から住所を自動で入力する│hoge

基礎から学ぶ Vue.js