WebDesign Dackel

日本の都道府県、地域を扱うちょっとしたライブラリ「jp-prefecture.js」

日本の都道府県、地域を扱うちょっとしたライブラリ「jp-prefecture.js」

Hatena0
Google+0
Pocket0
Feedly0

Webサイトを作っていると、都道府県を扱う時があるかと思います。僕はたまにあります。
少し前に、都道府県と地域が連動して動作するUIを実装した時に書いたコードをベースにしてライブラリ化しました。

GitHub

ドキュメント的な内容はGitHubに書いているので、ブログではどんな時に使えそうかという部分をご紹介したいと思います。

どんな時に使うの?

こんなときに使ってみると楽できそうです。

  • 関東にある都道府県を一覧したい
  • 東京都が属する地域は?
  • 福岡の英語表記は?
  • 鹿児島県のは読みがなは?
  • 長野県に隣接する県を一覧したい

インストールしてみる

GitHubのリポジトリにある、「Download ZIP」というボタンをクリックしてjp-prefecture-master.zipというダウンロードします。

jp-prefectureのGitHubリポジトリ

zipを解凍すると沢山ファイルが入っていますが、必要なのはjp-prefecture.min.jsだけです。

jQueryUnderscore.jsなど、他のライブラリには依存していないためHTMLにファイルを読み込むだけです。

<script type="text/javascript" src="jp-prefecture.min.js"></script>

ちなみにNode.jsでも使えるようにnpmに登録してみましたので、インストール後requireで使うことが出来るかと思います。

npm install jp-prefecture
require("jp-prefecture");

使い方

やりたいこと+実現する方法、という形式で進めてみようと思います。
ちなみにライブラリを読み込むとjpPrefectureというオブジェクトが使えるようになります。
ただ、自分で作っておいてなんですが、オブジェクトの名前が長くて入力するのが面倒なので以下の様に変数に入れておいた、という前提で書いていきます。

var jp = jpPrefecture;

関東にある都道府県を一覧したい

こんなときはprefFindByRegionメソッドを使います。

var results = jp.prefFindByRegion("関東");
console.log(results); //関東に属する都道府県の一覧が入ります

上記では配列の中にオブジェクトの一覧が入ってきますが、名前だけでいいんだよね〜となったら下記のようにしてみます。

var results = jp.prefFindByRegion("関東", "name");
console.log(results); //["茨城県", "栃木県", "群馬県", "埼玉県", "千葉県", "東京都", "神奈川県"]

2つ目の引数に"name"を指定しています。ここでオブジェクトのキーを指定すると、それに対応した値だけ引っ張ってくることができます。
ちなみに"name"以外にも下記のキーが指定できます。(都道府県の場合)

  • "id"
  • "name"
  • "short"
  • "kana"
  • "en"

東京都が属する地域は?

さっきの例とは逆のパターンです。regionFindByPrefメソッドを使います。

var result = jp.regionFindByPref("東京都");
console.log(result); //{id: 3, name: "関東", kana: "カントウ", en: "kanto", neighbor: Array[2]}

これも同じように2つ目の引数にキーを指定すると、その値だけを取得することができます。
今度は英語を取得してみます。

var result = jp.regionFindByPref("東京都", "en");
console.log(result); //kanto

福岡の英語表記は?

prefConvertメソッドを使うことで実現できます。

var result = jp.prefConvert("福岡", "en");
console.log(result); //fukuoka

1つ目の引数に都道府県を指定して、2つ目の引数に取得する情報を指定します。
ちなみに福岡はhukuokaでは無いので注意しましょう。(どこかで見たことがあります…)

地域の場合は、regionConvertメソッドを使います。使い方は同じです。

var result = jp.regionConvert("九州", "en");
console.log(result); //kyusyu

鹿児島県のは読みがなは?

さきほど使用したprefConvertメソッドを使います。

var result = jp.prefConvert("鹿児島県", "kana");
console.log(result); //カゴシマ

長野県に隣接する県を一覧したい

getPrefNeighborsメソッドを使います。これも2つ目の引数にキーを指定すると対応する値だけ取得できます。

var result = jp.getPrefNeighbors("長野県", "name");
console.log(result); //["群馬県", "埼玉県", "新潟県", "富山県", "山梨県", "岐阜県", "静岡県", "愛知県"]

英語で取得する時はこんな感じで、"en"を指定するだけです。

var result = jp.getPrefNeighbors("長野県", "en");
console.log(result); //["gunma", "saitama", "niigata", "toyama", "yamanashi", "gifu", "shizuoka", "aichi"]

また、2つの都道府県が隣接しているかを判定することも出来ます。

var result = jp.isPrefNeighbor("東京", "埼玉県");
console.log(result); //true

result = jp.isPrefNeighbor("nagano", "グンマ");
console.log(result); //true

result = jp.isPrefNeighbor("ホッカイドウ", "沖縄");
console.log(result); //false

地域、都道府県のデータについて

地域には八地方区分を使用しています。

日本の地域 – Wikipedia

都道府県はISOの地域コードに対応した順番でidがふってあります。

全国地方公共団体コード

ただ、上記ページでは番号に0埋めがされていますが、ライブラリには整数を使用しています。ここらへん、もしかしたら変更するかもです。

まとめ

内容的にはどうってことないライブラリですが、地域や都道府県を扱う必要があるときには是非使ってみてください。

GitHub

それと今回、恥ずかしながら初めてテストを書いたり、Node.jsに対応したライブラリ書いたり、npmに登録してみたりしたので、そこらへんはまた今度書いてみようかなと思います。