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 のバージョン 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 のバージョン 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 には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));
});
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/ken-all@0.4.0/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/
FAQs
Ken All は、郵便番号で住所を検索できる npm パッケージです。
The npm package ken-all receives a total of 1,508 weekly downloads. As such, ken-all popularity was classified as popular.
We found that ken-all demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket MCP now lets AI assistants review org alerts, investigate threats using the Socket threat feed, and inspect package files in addition to dependency scoring.
Product
Socket Firewall blocks malicious VS Code and Open VSX extensions before install, protecting developers from compromised editor marketplaces.
Research
More than 140 Mastra npm packages were compromised in a supply chain attack that used a typosquatted dependency to deliver a cross-platform infostealer during installation.