UNPKG

5.08 kBMarkdownView Raw
1<div align="center">
2<h1>Ken All</h1>
3</div>
4
5Ken All は、郵便番号で住所を検索できる npm パッケージです。
6
7[![npm version](https://badge.fury.io/js/ken-all.svg)](https://badge.fury.io/js/ken-all)
8[![CircleCI](https://circleci.com/gh/numb86/ken-all.svg?style=svg)](https://circleci.com/gh/numb86/ken-all)
9[![MIT license](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE)
10[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)
11
12```js
13import KenAll from 'ken-all';
14
15// [['東京都', '千代田区', '大手町']];
16KenAll('1000004').then(res => console.log(res));
17```
18
19# 導入方法
20
21```
22$ npm install ken-all
23```
24
25もしくは
26
27```
28$ yarn add ken-all
29```
30
31# 使い方
32
33`import`した`KenAll`に、7桁半角数字の**文字列**を渡します。
34
35```js
36import KenAll from 'ken-all';
37
38// [['東京都', '千代田区', '大手町']];
39KenAll('1000004').then(res => console.log(res));
40```
41
42返り値は、以下の値を持つ`promise`オブジェクトです。
43
44```js
45[
46 ['都道府県', '市区町村', '町域'],
47 ['都道府県', '市区町村', '町域'],
48 // ...
49]
50```
51
52```js
53// [["愛知県", "弥富市", ""], ["三重県", "桑名郡木曽岬町", ""]]
54KenAll('4980000').then(res => console.log(res));
55```
56
57該当する住所がない場合は、空の配列を返します。
58
59```js
60// []
61KenAll('9009999').then(res => console.log(res));
62```
63
64型定義ファイルも同梱しているので、TypeScript アプリでも利用することが出来ます。
65
66# サンプル
67
68＊以下のサンプルは、シンプルにするために複数の住所が返ってきたケースを考慮していません
69
70## React
71
72```js
73// React のバージョン 16.10.2 で確認
74import React, {useState} from 'react';
75import ReactDOM from 'react-dom';
76import KenAll from 'ken-all';
77
78const App = () => {
79 const [postCode, setPostCode] = useState('');
80 const [address, setAddress] = useState('');
81
82 return (
83 <>
84 <input
85 type="text"
86 value={postCode}
87 onChange={e => {
88 const inputValue = e.currentTarget.value;
89 setPostCode(inputValue);
90 if (inputValue.length === 7) {
91 KenAll(inputValue).then(res => {
92 if (res.length === 0) {
93 setAddress('該当する住所はありません');
94 } else {
95 setAddress(res[0].join(' '));
96 }
97 });
98 }
99 }}
100 maxLength={7}
101 />
102 <p>{address}</p>
103 </>
104 );
105};
106
107ReactDOM.render(<App />, document.querySelector('#app'));
108```
109
110## Vue
111
112エントリポイント。
113
114```js
115// Vue のバージョン 2.6.10 で確認
116import Vue from 'vue';
117
118import App from './components/App.vue';
119
120document.addEventListener('DOMContentLoaded', () => {
121 new Vue({
122 render: h => h(App),
123 }).$mount('#app');
124});
125```
126
127コンポーネント。
128
129```js
130<template>
131 <div>
132 <input
133 v-model="postCode"
134 maxlength="7"
135 @keyup="onChange"
136 />
137 <p>{{ this.address }}</p>
138 </div>
139</template>
140
141<script>
142import KenAll from 'ken-all';
143
144export default {
145 data() {
146 return {
147 postCode: '',
148 address: '',
149 };
150 },
151 methods: {
152 onChange() {
153 if (this.postCode.length === 7) {
154 KenAll(this.postCode).then(res => {
155 if (res.length === 0) {
156 this.address = '該当する住所はありません';
157 } else {
158 this.address = res[0].join(' ');
159 }
160 });
161 }
162 },
163 },
164};
165</script>
166```
167
168## Node.js
169
170```js
171// Node.js のバージョン 12.10.0 で確認
172const KenAll = require('ken-all').default;
173
174// [ [ '東京都', '千代田区', '永田町' ] ]
175KenAll('1000014').then(res => console.log(res));
176```
177
178## script タグを使った読み込み
179
180`0.2.0`以降のバージョンは`https://unpkg.com/ken-all@{バージョン番号}/umd/index.js`で読み込めます。
181読み込み後、`KenAll.default`という形で利用できます。
182
183```html
184<!DOCTYPE html>
185<html lang="ja">
186<head>
187 <meta charset="UTF-8">
188 <title>Ken All Sample</title>
189</head>
190<body>
191 <input id="post-code" maxlength="7">
192 <p id="result"></p>
193
194 <script src="https://unpkg.com/ken-all@0.2.0/umd/index.js"></script>
195 <script>
196 const searchBoxElem = document.querySelector('#post-code');
197
198 searchBoxElem.addEventListener('input', e => {
199 const postCode = e.currentTarget.value;
200
201 if (postCode.length === 7) {
202 const resultTextElem = document.querySelector('#result');
203 KenAll.default(postCode).then(res => {
204 if (res.length === 0) {
205 resultTextElem.textContent = '該当する住所はありません';
206 } else {
207 resultTextElem.textContent = res[0].join(' ');
208 }
209 });
210 }
211 }, false);
212 </script>
213</body>
214</html>
215```
216
217# 元データ
218
219株式会社アイビス様が提供している「郵便番号データ（加工済バージョン）」を再加工して利用しています。
220http://zipcloud.ibsnet.co.jp/