Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Vue.jsにて郵便番号からの住所自動入力

More than 1 year has passed since last update.

javascriptにおける郵便番号からの住所自動入力で有名なライブラリにajaxzip3がある。
今はさらに使いやすくなってYubinBangoというライブラリがある。

https://github.com/yubinbango/yubinbango

これは非常に簡単便利:thumbsup_tone1:
しかし、今回取り上げるのはYubinBangoではなく、
そのコアライブラリであるYubinBango-Coreのほう。
ajaxzip3もYubinBangoも内部ではYubinBango-Coreを使っている。

https://github.com/yubinbango/yubinbango-core

何故YubinBango-Coreなのかというと、
今回、Vue.jsで作ったフロントで住所を自動入力出来るようにしたのだが、
YubinBangoは単体で使われることを想定されていて、Vue.jsからは使いづらい。
具体的にはinputのvalueは変わっても、inputに関連付けられたVue.js内のデータは変わらないんですね。上っ面だけ値が変わっても意味がない。

というわけでVue.jsからYubinBango-Coreを使ってみる。
本当ならnpm install yubinbango-coreからrequireなどで読み込みたいのだがうまくいかず。誰か教えてください:pray_tone1:
別の方法ということで、ここはjsを直接読み込む。

<script src="https://yubinbango.github.io/yubinbango-core/yubinbango-core.js" charset="UTF-8"></script>

続いてVue.js内では郵便番号をwatchする。

export default {
    data() {
        return {
            zip: null,
            pref_id: null,
            locality: null,
            street: null,
        }
    },
    watch: {
        zip: function(zip) {
            let _this = this
            new YubinBango.Core(zip, function(addr) {
                _this.pref_id  = addr.region_id // 都道府県ID
                _this.locality = addr.locality  // 市区町村
                _this.street   = addr.street   // 町域
            })
        }
    }
}

注意点としてはnew YubinBango.Core()でのコールバックではthisがVue.jsのthisではなくなってしまうので、
変数にthisを入れてVue.jsのデータを操作しないといけない。懐かしい:sob:
これで住所を自動で補完出来ます。簡単:thumbsup_tone1:
だけど本当はrequireしたいですね:sob:

kiyc
Webエンジニア。インフラもバックエンドもフロントエンドも書いています。 普段書いているのはPHP(Laravel)、JavaScript(Vue.js)です。
prime-order
組織と業務に変革をもたらす新しいカタチのシステム開発サービス
https://prime-order.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away