郵便番号から住所引っ張りたいときあるよね

表題の機能ってよくあると思うんですが、けっこうめんどくさいんですよね

API 使うの？とかどこから住所引っ張ってくるの？とか

数年前から JS 開発で使っているライブラリあって、便利なんでずっと使っています。

今までは window から生えるメソッド使えばよかったけど今風(?)の書き方じゃないからアプローチしてみた

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

Typescript だと import だったり、型エラー起きるのでその解決方法

(いい方法あったら教えて下さい)

環境

• Nuxt.js 2.14.7

export されていないから、とりあえず script タグで読み込みます

<script src="[https://yubinbango.github.io/yubinbango-core/yubinbango-core.js](https://yubinbango.github.io/yubinbango-core/yubinbango-core.js)"></script>`

Nuxt.js だと nuxt.config.js でこうですね

head: {
	script: [
	      {
	        src: 'https://yubinbango.github.io/yubinbango-core/yubinbango-core.js'
	      }
	]
...
}

modules.ts

今回使いたい住所が、region, locality, street だけだったので丸めて return しています

interface ZipcodeAddress {
  region: number;
  locality: string;
  street: string;
}
declare global {
  interface Window {
    YubinBango: any;
  }
}
const YubinBango = window.YubinBango || {};
export function fetchAddressByZipcode(
  zipcode: string
): Promise<ZipcodeAddress> {
  return new Promise((resolve) => {
    return new YubinBango.Core(zipcode, (address: ZipcodeAddress) => {
      return resolve(address);
    });
  });
}

呼び出し

<template>
  <div>
		<input v-model="zipcode" type="text" />
		<button @click="handleFetchAddress">住所検索</button>
  </div>
	<p>
		{{ region }}
		{{ locality + street }}
	</p>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  data() {
		return {
			region: '',
			locality: '',
			street: ''
		}
  },
	methods: {
		async handleFetchAddress() {
			const address = await fetchAddressByZipcode(this.form.zipcode);
			const { region, locality, street } = address;
			this.region = region;
			this.locality = locality;
			this.street = street;
		}
	}
});

</script>

おわり

無理矢理感はあるけど、隠蔽(?)してラッパーみたいな関数を用意しておいたら呼び出しはきれいに書けた