概要

郵便番号で都道府県情報検索して住所自動入力する機能があれば便利だとおもいます。インターネットでそんなライブラリがあるか検索してみると下記のJSライブラリ見つけました。

Yubinbango

導入方法はすごく簡単で手順書によっては下記のようにフォームをおけばOKです。

    <form class="h-adr">
      <span class="p-country-name" style="display:none;">Japan</span>

      〒<input type="text" class="p-postal-code" size="3" maxlength="3">
      <input type="text" class="p-postal-code" size="4" maxlength="4"><br>

      <input type="text" class="p-region" readonly /><br>
      <input type="text" class="p-locality" readonly /><br>
      <input type="text" class="p-street-address" /><br>
      <input type="text" class="p-extended-address" />
    </form>

もちろんJSライブラリのインポートもしなければならないです。


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

ただ開発しているシステムのフロントはVueJSで実装していることで通常JSライブラリを使えるようにNPMでライブラリ導入してapp.jsでrequiredしましたが下記のような問題が発生しました。

郵便番号入力したら住所情報自動検索はできましたが他の入力欄でキー叩いたら住所欄の内容は空白になってしまいました。

原因の調査

いろいろ調査してみたらやっと原因がわかりました。VUEJSは通常のDOM使わずに自分のDOMでUI要素のみなを管理しているということが忘れてしまいました。そういうことで問題発生のながれは下記のようです

YubinbangoはJSライブラリだからJQUERYでHTMLのDOMつかって都道府県の情報を検索完了したあと、住所欄探して検索結果自動的に入れてくれる。
VUESJはHTMLのDOM使わないことで行った住所欄の更新について分かりません。
VUEJSは次の更新操作で住所らんの値を自分持っている値（NULLかも）で入れてしまって空白となる。

改修

使えなくて残念の気持ちしながらもう一回解決方法探してみると「Yubinbango-Core」とういう物見つけましていい記事も見つけました。

教えたくれた通りにしてみたら想像外に[YubinBangoCore.core is not a constructor]とか「TypeError: Cannot read property 'Core' of undefined"」というJSエラーが出てきました。

YubinbangoのGithubでみなからのFeedbackみてみると既存の問題のようです。

YubinBango module が export されていない

しょうがないだからYubinbangoExportさせるようにNodeModuleのJSファイルを直接修正することにしました。

app.js


window.YubinBango = require('yubinbango-core')

HelloWorld.vue

<template>
  <div class="hello">
    <input v-model="zip"/>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    props: {
      msg: String
    },
    data: function(){
      return {
        zip: null,
        address :null
      }
    },
    watch: {
      zip: function(zip) {
        let _this = this;
        new window.YubinBango.Core(zip, function(addr) {
          console.log(addr);
          _this.pref_id  = addr.region_id // 都道府県ID
          _this.locality = addr.locality  // 市区町村
          _this.street   = addr.street// 町域
        })
      }
    }


  }
</script>

あまりよくない方法ですが暫定的な策としてつかっても良さそうです。もちろんnpm更新で修正したコードがなくなる可能性があることでお気をつけてください。

以上です。

VueJS でYubinbangoライブラリを使えるようにする改修

概要

原因の調査

改修