README

Ken All

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/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/

Usage no npm install needed!