ken-all
v0.4.1
Published
Ken All は、郵便番号で住所を検索できる npm パッケージです。
Downloads
4,350
Readme
Ken All は、郵便番号で住所を検索できる npm パッケージです。
import KenAll from 'ken-all';
// [['東京都', '千代田区', '大手町']];
KenAll('1000004').then(res => console.log(res));導入方法
$ npm install ken-allもしくは
$ yarn add ken-all使い方
importしたKenAllに、7桁半角数字の文字列を渡します。
import KenAll from 'ken-all';
// [['東京都', '千代田区', '大手町']];
KenAll('1000004').then(res => console.log(res));返り値は、以下の値を持つpromiseオブジェクトです。
[
['都道府県', '市区町村', '町域'],
['都道府県', '市区町村', '町域'],
// ...
]// [["愛知県", "弥富市", ""], ["三重県", "桑名郡木曽岬町", ""]]
KenAll('4980000').then(res => console.log(res));該当する住所がない場合は、空の配列を返します。
// []
KenAll('9009999').then(res => console.log(res));型定義ファイルも同梱しているので、TypeScript アプリでも利用することが出来ます。
注意点
内部でfetchを行っているので、fetchを使えない環境ではポリフィルが必要になります。
サンプル
＊以下のサンプルは、シンプルにするために複数の住所が返ってきたケースを考慮していません
React
// React のバージョン 16.10.2 で確認
import React, {useState} from 'react';
import ReactDOM from 'react-dom';
import KenAll from 'ken-all';
const App = () => {
const [postCode, setPostCode] = useState('');
const [address, setAddress] = useState('');
return (
<>
<input
type="text"
value={postCode}
onChange={e => {
const inputValue = e.currentTarget.value;
setPostCode(inputValue);
if (inputValue.length === 7) {
KenAll(inputValue).then(res => {
if (res.length === 0) {
setAddress('該当する住所はありません');
} else {
setAddress(res[0].join(' '));
}
});
}
}}
maxLength={7}
/>
<p>{address}</p>
</>
);
};
ReactDOM.render(<App />, document.querySelector('#app'));Vue
エントリポイント。
// Vue のバージョン 2.6.10 で確認
import Vue from 'vue';
import App from './components/App.vue';
document.addEventListener('DOMContentLoaded', () => {
new Vue({
render: h => h(App),
}).$mount('#app');
});コンポーネント。
<template>
<div>
<input
v-model="postCode"
maxlength="7"
@keyup="onChange"
/>
<p>{{ this.address }}</p>
</div>
</template>
<script>
import KenAll from 'ken-all';
export default {
data() {
return {
postCode: '',
address: '',
};
},
methods: {
onChange() {
if (this.postCode.length === 7) {
KenAll(this.postCode).then(res => {
if (res.length === 0) {
this.address = '該当する住所はありません';
} else {
this.address = res[0].join(' ');
}
});
}
},
},
};
</script>Node.js
Node.js にはfetchが存在しないので、その対応が必要になります。
また、ES Modules で利用するか CommonJS で利用するかで、コードが変わります。
いずれも Node.js のバージョン12.22.1で確認しています。
// ESM
import fetch from "node-fetch";
import KenAll from "ken-all";
global.fetch = fetch;
// [['東京都', '千代田区', '大手町']];
KenAll("1000004").then((res) => console.log(res));// CJS
const fetch = require("node-fetch");
global.fetch = fetch;
import("ken-all").then((KenAll) => {
// [['東京都', '千代田区', '大手町']];
KenAll.default("1000004").then((res) => console.log(res));
});script タグを使った読み込み
0.4.0以降のバージョンはhttps://unpkg.com/ken-all@{バージョン番号}/esm/index.jsで読み込めます。
読み込み後、KenAllという形で利用できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Ken All Sample</title>
</head>
<body>
<input id="post-code" maxlength="7">
<p id="result"></p>
<script type="module">
import KenAll from "https://unpkg.com/[email protected]/esm/index.js";
const searchBoxElem = document.querySelector('#post-code');
searchBoxElem.addEventListener('input', e => {
const postCode = e.currentTarget.value;
if (postCode.length === 7) {
const resultTextElem = document.querySelector('#result');
KenAll(postCode).then(res => {
if (res.length === 0) {
resultTextElem.textContent = '該当する住所はありません';
} else {
resultTextElem.textContent = res[0].join(' ');
}
});
}
}, false);
</script>
</body>
</html>元データ
株式会社アイビス様が提供している「郵便番号データ（加工済バージョン）」を再加工して利用しています。
http://zipcloud.ibsnet.co.jp/