都道府県 Picker を公開しました ── 日本地図から選べるカスタム要素

日本地図から都道府県・エリアを選べる UI 部品を公開しました。<yn-prefecture-picker> という 1 つのタグで使えます。

デモは ui.ynetlabo.net にあります。ページの中で実際に動いているので、まず触ってみてください。

左が「関東」「九州」を選んだところ、右が関東を拡大して東京を選んだところです。エリアを押すと拡大し、そこから県を選ぶ 2 段階になっています。

---

できること

地図から選ぶ	47 都道府県の実測の形。地図ライブラリもタイルサーバも使わず、通信も発生しません
エリアでも県でも	「関東」のようなエリア単位でも、県単位でも選べます
単数・複数	どちらにも切り替えられます
一覧でも選べる	地図とリストをその場で切り替えられます
表記ゆれに強い検索	「とうきょう」「トーキョー」「tokyo」「toukyou」「東京」のどれでも届きます
フォームにそのまま置ける	<select> と同じ高さ（38px）の枠。form の中に置けば送信されます
スマホ対応	画面が狭いときは下から出るシートになります
ライト / ダーク	OS の設定に追従します。明示指定もできます

---

入れる

npm install @ynetlabo/ui-core

読み込むのは CSS 1 本と module 1 行です。import した時点でタグが使えるようになります。

<link rel="stylesheet" href="node_modules/@ynetlabo/ui-tokens/dist/tokens.css">

<script type="module">
  import "@ynetlabo/ui-core";
</script>

<yn-prefecture-picker name="pref" code-format="jis"></yn-prefecture-picker>

name を付けて form の中に置けば、ふつうの入力欄と同じように送信されます。

---

値を受け取る

選択が変わると change が飛びます。値は event.detail.value に入ります。

const picker = document.querySelector("yn-prefecture-picker");

picker.addEventListener("change", (e) => {
  console.log(e.detail.value);   // "13"
});

やり取りする値の形は code-format で選べます。

code-format	都道府県を選んだとき	エリアを選んだとき
jis（既定）	"13"	"kanto"
jisNumber	13	"kanto"
ynetlabo	"13-TOK"	"3-KTO"
iso	"JP-13"	"kanto"
name	"東京都"	"関東"
shortName	"東京"	"関東"

multiple を付けると、値はこの表現の配列になります。

---

パラメータ

よく使うものだけ挙げます。全部はコンポーネントのページにあります。

名前	値	既定	説明
selection-level	prefecture / area	prefecture	県で選ぶか、エリアで選ぶか
multiple	真偽	偽	複数選択にする
code-format	上の表	jis	やり取りする値の形
grouping	region9 / region8 / region11 / kana / none	region9	区切りかた
layout	map / list	map	最初に出す表示
mode	dropdown / inline	dropdown	押して開くか、常に出すか
footer	auto / none / count など	auto	件数・クリア・完了を出すか
searchable	真偽	真	検索欄を出す
display	name / shortName	name	「東京都」と出すか「東京」と出すか

真偽値は、属性を書けば真、="false" と書けば偽です。searchable は既定が真なので、消したいときに searchable="false" と書きます。

grouping の region9 は ynetlabo API の地方区分そのままです。region11 にすると中部が細かく分かれ、三重が東海に移ります。

---

画面に埋め込む

選ぶこと自体が主役の画面では、ダイアログを挟まず常に出したままにできます。mode="inline" です。

<yn-prefecture-picker
  mode="inline"
  selection-level="area"
  multiple
  code-format="ynetlabo"
  footer="count"
  style="--prefecture-picker-map-max-height: 300px">
</yn-prefecture-picker>

• 高さに上限のある枠に入れるときは、--prefecture-picker-map-max-height で地図を縮めます
• 親側に「クリア」「決定」があるなら、footer="none" で部品側のボタンを消せます

---

フレームワークから使うときは

カスタム要素には値の入口が 2 つあります。HTML に書く属性と、JavaScript から代入するプロパティです。素の HTML なら属性だけで足りますが、Vue や React はプロパティで値を渡します。

Vue の場合はこの 2 つが要ります。

// nuxt.config.ts / vite.config.ts
// yn- で始まるタグを Vue のコンポーネントと誤認させない
vue: { compilerOptions: { isCustomElement: (tag) => tag.startsWith("yn-") } }

<!-- 配列を渡すので、属性ではなくプロパティに束縛する -->
<yn-prefecture-picker
  mode="inline"
  selection-level="area"
  multiple
  :value.prop="areas"
  @change="areas = $event.detail.value"
/>

属性は文字列しか運べないので、配列を渡すときは .prop が必要です。

---

パッケージ

3 つに分かれています。@ynetlabo/ui-core を入れれば残り 2 つも一緒に入ります。MIT です。

パッケージ	中身
@ynetlabo/ui-core	部品の本体。ランタイム依存はありません
@ynetlabo/ui-tokens	色・寸法・モーションの定義
@ynetlabo/ui-data	都道府県マスタと日本地図の形状

対応しているのは今のところプレーン Web だけです。Vue / Flutter / SwiftUI 版はこれから用意します。0.x のあいだは指定のしかたが変わることがあります。

• デモとドキュメント：ui.ynetlabo.net
• リポジトリ：github.com/yuuint/ui-labo