2019/04/14SHAREツイートシェアはてブGoogle+PocketLINEこんにちは、あかしぃです。Webサービスの会員登録フォームで、郵便番号を入力したら自動的に住所も入力される...みたいなフォームを見たことがあると思います。Vue.jsやNuxt.jsならこういったフォームを簡単に作れるので、コードを含めて解説します。入力フォームについて住所自動入力のメソッド部分についてまとめ自動的に住所が入力されるフォームの作り方まずソースコードのサンプルがこちら。住所取得apiには「zipcloud」を利用しています。}}</script>コードについて、簡単に解説します。入力フォームについて入力フォームそのものはただのHTMLなので、とくに解説する点はありません。v-modelでそれぞれのデータをバインディングしているのと、@blurで入力フォームからフォーカスが外れたタイミングでfetchAddressが実行されるようにしています。サンプルコードでは都道府県の部分もinputタグを使っていますが、セレクトボックス形式にして一覧から都道府県を選択できるようにしてあげたほうがユーザーにとっては使いやすいかも(どうせ自動入力されるのであまり意味はないかもですが・・・)セレクトボックスにする場合は、prefecture.jsonといった名前で都道府県一覧のデータをリポジトリに含め、それをvuex(store)に登録すると使いやすいです。使い方のイメージはこんな感じ。/></select>住所自動入力のメソッド部分について住所の自動入力については、fetchAddressメソッドが担当しています。書くと1行でも書けるこの部分は郵便番号のバリデーションです。この処理がなくても問題ありませんが、無意味なapiリクエストを送りたくないので、郵便番号ではない形式の入力があった場合は、この時点で処理を中断しています。ハイフンつきを許すなら、正規表現部分を少し変更する必要があります。}})外部apiからデータを取得する処理です。zipcloudのリファレンスを読むと、データを取得するには「http://zipcloud.ibsnet.co.jp/api/search/」にzipcode=xxxxxxxというクエリをつけてGETメソッドで叩けばいいことがわかります。「this.$axios.$get(`ZIPCODE_API_URL?${this.zipcode}`)」のような形式でリクエストを送ればいい...予定だったのですが、zipcloudにはCROS対策が行われていないようです。別ドメインからapiを叩こうとするとCROSエラーが発生します。いったケースではJsonpを使います。(Jsonpについてはこちらの記事とかがわかりやすい)axiosでJsonpリクエストを送るには、「axios-jsonp」というライブラリが必要です。'axios-jsonp'」としている部分ですね。axons-jsonpしておきましょう)こいつをaxiosのオプションとしてセットしてあげれば、無事CROSエラーを回避して、データを取得することができます。ここでもう一度、zipcloudのリファレンスを見て、返ってくるデータ構造を確認すると、以下のような構造であることがわかります。]}返ってくるデータ構造がわかれば、あとはそれに対応した処理を書くだけです。res.results[0].address3prefecture、addressはそれぞれinputタグにバインディングされているので、データを入れてあげればブラウザにも反映され、ユーザーから自動的に住所が入力されたように見える...というわけですね。まとめ自分で実装するまでは、「これどうやって作ってんのかな〜...」みたいに思っていましたが、書いてみると意外にシンプルでした。一般的な会員登録フォームではもはやデフォルトの仕様になっている気がしますね。コメントをキャンセルメールアドレスが公開されることはありません。*サイト前の記事フロントエンド開発の副業を探しています。PostsVue.jsでフォーカス機能つきのスクロールスパイを実装するあかしぃ流、辛くない技術書の読み方Nuxt(Vue).jsで郵便番号が入力されたら自動的に住所も入力されるフォームを作るフロントエンド開発の副業を探しています。