「郵便番号→住所情報」を取得するためのnpmパッケージを公開した
作った背景
よくある、「郵便番号を入力したら住所が自動入力されるフォーム」 のあれです。
デザインではしれっと、ボタンが置いてあったりするんですが、巷のライブラリ等使って片付けるには懸念がありました。
これからも使う可能性もあるし、どうせなら汎用的に作ってnpm で公開しよう！と決意しました。
懸念1: データを何処から取ってくるか？
色々漁ってはみたものの、個人の方が用意してホスティングしたデータだったり、
どこかの会社が無料で公開しているAPIがあるのみでした。
ありがたい！とは思いつつ、
諸事情で非公開されたら危ない
という不安がありました。流石にそれを案件には使えないなと。
また、日本郵政では、住所情報のcsvを公開はしていましたがAPIはありませんでした。
どうやら、これを使って自前でデータを作るしか無さそうです。。
ただ、全国版のcsvは10MB以上あるので、これをいっぺんに読み込むのではなく、
必要な分だけ読めるようにデータを分けなくてはいけません。
懸念２: UIや仕様に色々なパターンが想定される
これもライブラリを漁ってみたのですが、「このclassをこの要素につけて、、」
という感じで、お手軽ではあるのですが、それだとUIや仕様が限定されてしまい、
実装の自由度は低いなと感じました。
実際に、issueを見ると「これ、どうやって実装すればいいですか？」というものが沢山ありました。（開発側からすれば知らんけど、、）
なので、なるべく色々なパターンで使えるように、
データを取得するロジックだけ作って、View層とゴニョゴニョする処理は自分で書いてね
という仕様にしました。
成果物
結果的に、
1). csvデータからjsonファイルを生成する npm パッケージ
2). 1)で生成したjsonを使って郵便番号から住所を簡単に検索するための npm パッケージ
の２つに分けて公開しました。
データだけ必要な場合は、1)のみでもOK
2)を使ったほうが実装は楽です。
よかったら使ってみてください。
1) easy-ja-postal-code-generate-json
日本全国版の郵便番号データのcsvをjsonに変換するライブラリ
Github
2) easy-ja-postal-code-search-address
郵便番号から住所を簡単に検索するためのヘルパークラス
Github
examples
一般的なwebpack+htmlのものと、Next.jsでの２パターン作ってあります。
最後に
初めて npm packageを公開しましたが、色々ハマり所は多かったです。
あとは、実装そのものより、ドキュメントを書く方が大変でした。
普段何気なく使わしてもらっている、これらのソースはとても多くの時間がかかっているのだ、
と身をもって経験しました。感謝。
Discussion