[{"data":1,"prerenderedAt":815},["ShallowReactive",2],{"content-ja-\u002Fexamples\u002Faddress-input":3},{"id":4,"title":5,"body":6,"description":808,"extension":809,"meta":810,"navigation":140,"path":811,"seo":812,"stem":813,"__hash__":814},"content_ja\u002Fexamples\u002Faddress-input.md","住所入力",{"type":7,"value":8,"toc":806},"minimark",[9,12,25,802],[10,11,5],"h1",{"id":5},[13,14,15,16,20,21,24],"p",{},"都道府県を選ぶと、配下の市区町村がプルダウンに読み込まれます。",[17,18,19],"code",{},"listPrefectures"," と ",[17,22,23],{},"listMunicipalitiesByPrefecture"," を使っています。町名・番地と建物名は見た目用のフィールドです（API には渡しません）。",[26,27,28,35,328],"example-pair",{},[29,30,32],"template",{"v-slot:demo":31},"",[33,34],"address-input-demo",{},[29,36,37],{"v-slot:html":31},[38,39,43],"pre",{"className":40,"code":41,"language":42,"meta":31,"style":31},"language-html shiki shiki-themes github-light github-dark","\u003Clabel for=\"prefecture\">都道府県\u003C\u002Flabel>\n\u003Cselect id=\"prefecture\">\n  \u003Coption value=\"\">選択してください\u003C\u002Foption>\n  \u003C!-- listPrefectures() の結果で option を埋める -->\n\u003C\u002Fselect>\n\n\u003Clabel for=\"municipality\">市区町村\u003C\u002Flabel>\n\u003Cselect id=\"municipality\" disabled>\n  \u003Coption value=\"\">選択してください\u003C\u002Foption>\n  \u003C!-- 都道府県変更時に listMunicipalitiesByPrefecture() で option を埋める -->\n\u003C\u002Fselect>\n\n\u003Clabel for=\"town\">町名・番地\u003C\u002Flabel>\n\u003Cinput id=\"town\" type=\"text\" placeholder=\"例: 丸の内1-1-1\" \u002F>\n\n\u003Clabel for=\"building\">建物名\u003C\u002Flabel>\n\u003Cinput id=\"building\" type=\"text\" placeholder=\"例: ○○ビル 3F\" \u002F>\n","html",[17,44,45,77,94,118,125,135,142,163,181,200,206,215,220,241,274,279,300],{"__ignoreMap":31},[46,47,50,54,58,62,65,69,72,74],"span",{"class":48,"line":49},"line",1,[46,51,53],{"class":52},"sVt8B","\u003C",[46,55,57],{"class":56},"s9eBZ","label",[46,59,61],{"class":60},"sScJk"," for",[46,63,64],{"class":52},"=",[46,66,68],{"class":67},"sZZnC","\"prefecture\"",[46,70,71],{"class":52},">都道府県\u003C\u002F",[46,73,57],{"class":56},[46,75,76],{"class":52},">\n",[46,78,80,82,85,88,90,92],{"class":48,"line":79},2,[46,81,53],{"class":52},[46,83,84],{"class":56},"select",[46,86,87],{"class":60}," id",[46,89,64],{"class":52},[46,91,68],{"class":67},[46,93,76],{"class":52},[46,95,97,100,103,106,108,111,114,116],{"class":48,"line":96},3,[46,98,99],{"class":52},"  \u003C",[46,101,102],{"class":56},"option",[46,104,105],{"class":60}," value",[46,107,64],{"class":52},[46,109,110],{"class":67},"\"\"",[46,112,113],{"class":52},">選択してください\u003C\u002F",[46,115,102],{"class":56},[46,117,76],{"class":52},[46,119,121],{"class":48,"line":120},4,[46,122,124],{"class":123},"sJ8bj","  \u003C!-- listPrefectures() の結果で option を埋める -->\n",[46,126,128,131,133],{"class":48,"line":127},5,[46,129,130],{"class":52},"\u003C\u002F",[46,132,84],{"class":56},[46,134,76],{"class":52},[46,136,138],{"class":48,"line":137},6,[46,139,141],{"emptyLinePlaceholder":140},true,"\n",[46,143,145,147,149,151,153,156,159,161],{"class":48,"line":144},7,[46,146,53],{"class":52},[46,148,57],{"class":56},[46,150,61],{"class":60},[46,152,64],{"class":52},[46,154,155],{"class":67},"\"municipality\"",[46,157,158],{"class":52},">市区町村\u003C\u002F",[46,160,57],{"class":56},[46,162,76],{"class":52},[46,164,166,168,170,172,174,176,179],{"class":48,"line":165},8,[46,167,53],{"class":52},[46,169,84],{"class":56},[46,171,87],{"class":60},[46,173,64],{"class":52},[46,175,155],{"class":67},[46,177,178],{"class":60}," disabled",[46,180,76],{"class":52},[46,182,184,186,188,190,192,194,196,198],{"class":48,"line":183},9,[46,185,99],{"class":52},[46,187,102],{"class":56},[46,189,105],{"class":60},[46,191,64],{"class":52},[46,193,110],{"class":67},[46,195,113],{"class":52},[46,197,102],{"class":56},[46,199,76],{"class":52},[46,201,203],{"class":48,"line":202},10,[46,204,205],{"class":123},"  \u003C!-- 都道府県変更時に listMunicipalitiesByPrefecture() で option を埋める -->\n",[46,207,209,211,213],{"class":48,"line":208},11,[46,210,130],{"class":52},[46,212,84],{"class":56},[46,214,76],{"class":52},[46,216,218],{"class":48,"line":217},12,[46,219,141],{"emptyLinePlaceholder":140},[46,221,223,225,227,229,231,234,237,239],{"class":48,"line":222},13,[46,224,53],{"class":52},[46,226,57],{"class":56},[46,228,61],{"class":60},[46,230,64],{"class":52},[46,232,233],{"class":67},"\"town\"",[46,235,236],{"class":52},">町名・番地\u003C\u002F",[46,238,57],{"class":56},[46,240,76],{"class":52},[46,242,244,246,249,251,253,255,258,260,263,266,268,271],{"class":48,"line":243},14,[46,245,53],{"class":52},[46,247,248],{"class":56},"input",[46,250,87],{"class":60},[46,252,64],{"class":52},[46,254,233],{"class":67},[46,256,257],{"class":60}," type",[46,259,64],{"class":52},[46,261,262],{"class":67},"\"text\"",[46,264,265],{"class":60}," placeholder",[46,267,64],{"class":52},[46,269,270],{"class":67},"\"例: 丸の内1-1-1\"",[46,272,273],{"class":52}," \u002F>\n",[46,275,277],{"class":48,"line":276},15,[46,278,141],{"emptyLinePlaceholder":140},[46,280,282,284,286,288,290,293,296,298],{"class":48,"line":281},16,[46,283,53],{"class":52},[46,285,57],{"class":56},[46,287,61],{"class":60},[46,289,64],{"class":52},[46,291,292],{"class":67},"\"building\"",[46,294,295],{"class":52},">建物名\u003C\u002F",[46,297,57],{"class":56},[46,299,76],{"class":52},[46,301,303,305,307,309,311,313,315,317,319,321,323,326],{"class":48,"line":302},17,[46,304,53],{"class":52},[46,306,248],{"class":56},[46,308,87],{"class":60},[46,310,64],{"class":52},[46,312,292],{"class":67},[46,314,257],{"class":60},[46,316,64],{"class":52},[46,318,262],{"class":67},[46,320,265],{"class":60},[46,322,64],{"class":52},[46,324,325],{"class":67},"\"例: ○○ビル 3F\"",[46,327,273],{"class":52},[29,329,330],{"v-slot:ts":31},[38,331,335],{"className":332,"code":333,"language":334,"meta":31,"style":31},"language-ts shiki shiki-themes github-light github-dark","import { createLocalGovClient } from \"@b4moss\u002Fjp-local-gov-id\";\nimport dataset from \"@b4moss\u002Fjp-local-gov-id-data\";\n\nconst client = await createLocalGovClient({ data: dataset });\n\nconst prefSelect = document.querySelector(\"#prefecture\");\nconst muniSelect = document.querySelector(\"#municipality\");\n\nfor (const pref of client.listPrefectures()) {\n  const option = document.createElement(\"option\");\n  option.value = pref.code;\n  option.textContent = pref.name;\n  prefSelect.append(option);\n}\n\nprefSelect.addEventListener(\"change\", async () => {\n  muniSelect.replaceChildren();\n  const placeholder = document.createElement(\"option\");\n  placeholder.value = \"\";\n  placeholder.textContent = \"選択してください\";\n  muniSelect.append(placeholder);\n\n  if (!prefSelect.value) {\n    muniSelect.disabled = true;\n    return;\n  }\n\n  const municipalities = await client.listMunicipalitiesByPrefecture(\n    prefSelect.value,\n  );\n  for (const muni of municipalities) {\n    const option = document.createElement(\"option\");\n    option.value = muni.code;\n    option.textContent = muni.name;\n    muniSelect.append(option);\n  }\n  muniSelect.disabled = false;\n});\n","ts",[17,336,337,355,369,373,394,398,422,442,446,470,492,502,512,523,528,532,560,571,590,603,616,626,631,645,658,666,672,677,696,702,708,726,746,757,768,778,783,796],{"__ignoreMap":31},[46,338,339,343,346,349,352],{"class":48,"line":49},[46,340,342],{"class":341},"szBVR","import",[46,344,345],{"class":52}," { createLocalGovClient } ",[46,347,348],{"class":341},"from",[46,350,351],{"class":67}," \"@b4moss\u002Fjp-local-gov-id\"",[46,353,354],{"class":52},";\n",[46,356,357,359,362,364,367],{"class":48,"line":79},[46,358,342],{"class":341},[46,360,361],{"class":52}," dataset ",[46,363,348],{"class":341},[46,365,366],{"class":67}," \"@b4moss\u002Fjp-local-gov-id-data\"",[46,368,354],{"class":52},[46,370,371],{"class":48,"line":96},[46,372,141],{"emptyLinePlaceholder":140},[46,374,375,378,382,385,388,391],{"class":48,"line":120},[46,376,377],{"class":341},"const",[46,379,381],{"class":380},"sj4cs"," client",[46,383,384],{"class":341}," =",[46,386,387],{"class":341}," await",[46,389,390],{"class":60}," createLocalGovClient",[46,392,393],{"class":52},"({ data: dataset });\n",[46,395,396],{"class":48,"line":127},[46,397,141],{"emptyLinePlaceholder":140},[46,399,400,402,405,407,410,413,416,419],{"class":48,"line":137},[46,401,377],{"class":341},[46,403,404],{"class":380}," prefSelect",[46,406,384],{"class":341},[46,408,409],{"class":52}," document.",[46,411,412],{"class":60},"querySelector",[46,414,415],{"class":52},"(",[46,417,418],{"class":67},"\"#prefecture\"",[46,420,421],{"class":52},");\n",[46,423,424,426,429,431,433,435,437,440],{"class":48,"line":144},[46,425,377],{"class":341},[46,427,428],{"class":380}," muniSelect",[46,430,384],{"class":341},[46,432,409],{"class":52},[46,434,412],{"class":60},[46,436,415],{"class":52},[46,438,439],{"class":67},"\"#municipality\"",[46,441,421],{"class":52},[46,443,444],{"class":48,"line":165},[46,445,141],{"emptyLinePlaceholder":140},[46,447,448,451,454,456,459,462,465,467],{"class":48,"line":183},[46,449,450],{"class":341},"for",[46,452,453],{"class":52}," (",[46,455,377],{"class":341},[46,457,458],{"class":380}," pref",[46,460,461],{"class":341}," of",[46,463,464],{"class":52}," client.",[46,466,19],{"class":60},[46,468,469],{"class":52},"()) {\n",[46,471,472,475,478,480,482,485,487,490],{"class":48,"line":202},[46,473,474],{"class":341},"  const",[46,476,477],{"class":380}," option",[46,479,384],{"class":341},[46,481,409],{"class":52},[46,483,484],{"class":60},"createElement",[46,486,415],{"class":52},[46,488,489],{"class":67},"\"option\"",[46,491,421],{"class":52},[46,493,494,497,499],{"class":48,"line":208},[46,495,496],{"class":52},"  option.value ",[46,498,64],{"class":341},[46,500,501],{"class":52}," pref.code;\n",[46,503,504,507,509],{"class":48,"line":217},[46,505,506],{"class":52},"  option.textContent ",[46,508,64],{"class":341},[46,510,511],{"class":52}," pref.name;\n",[46,513,514,517,520],{"class":48,"line":222},[46,515,516],{"class":52},"  prefSelect.",[46,518,519],{"class":60},"append",[46,521,522],{"class":52},"(option);\n",[46,524,525],{"class":48,"line":243},[46,526,527],{"class":52},"}\n",[46,529,530],{"class":48,"line":276},[46,531,141],{"emptyLinePlaceholder":140},[46,533,534,537,540,542,545,548,551,554,557],{"class":48,"line":281},[46,535,536],{"class":52},"prefSelect.",[46,538,539],{"class":60},"addEventListener",[46,541,415],{"class":52},[46,543,544],{"class":67},"\"change\"",[46,546,547],{"class":52},", ",[46,549,550],{"class":341},"async",[46,552,553],{"class":52}," () ",[46,555,556],{"class":341},"=>",[46,558,559],{"class":52}," {\n",[46,561,562,565,568],{"class":48,"line":302},[46,563,564],{"class":52},"  muniSelect.",[46,566,567],{"class":60},"replaceChildren",[46,569,570],{"class":52},"();\n",[46,572,574,576,578,580,582,584,586,588],{"class":48,"line":573},18,[46,575,474],{"class":341},[46,577,265],{"class":380},[46,579,384],{"class":341},[46,581,409],{"class":52},[46,583,484],{"class":60},[46,585,415],{"class":52},[46,587,489],{"class":67},[46,589,421],{"class":52},[46,591,593,596,598,601],{"class":48,"line":592},19,[46,594,595],{"class":52},"  placeholder.value ",[46,597,64],{"class":341},[46,599,600],{"class":67}," \"\"",[46,602,354],{"class":52},[46,604,606,609,611,614],{"class":48,"line":605},20,[46,607,608],{"class":52},"  placeholder.textContent ",[46,610,64],{"class":341},[46,612,613],{"class":67}," \"選択してください\"",[46,615,354],{"class":52},[46,617,619,621,623],{"class":48,"line":618},21,[46,620,564],{"class":52},[46,622,519],{"class":60},[46,624,625],{"class":52},"(placeholder);\n",[46,627,629],{"class":48,"line":628},22,[46,630,141],{"emptyLinePlaceholder":140},[46,632,634,637,639,642],{"class":48,"line":633},23,[46,635,636],{"class":341},"  if",[46,638,453],{"class":52},[46,640,641],{"class":341},"!",[46,643,644],{"class":52},"prefSelect.value) {\n",[46,646,648,651,653,656],{"class":48,"line":647},24,[46,649,650],{"class":52},"    muniSelect.disabled ",[46,652,64],{"class":341},[46,654,655],{"class":380}," true",[46,657,354],{"class":52},[46,659,661,664],{"class":48,"line":660},25,[46,662,663],{"class":341},"    return",[46,665,354],{"class":52},[46,667,669],{"class":48,"line":668},26,[46,670,671],{"class":52},"  }\n",[46,673,675],{"class":48,"line":674},27,[46,676,141],{"emptyLinePlaceholder":140},[46,678,680,682,685,687,689,691,693],{"class":48,"line":679},28,[46,681,474],{"class":341},[46,683,684],{"class":380}," municipalities",[46,686,384],{"class":341},[46,688,387],{"class":341},[46,690,464],{"class":52},[46,692,23],{"class":60},[46,694,695],{"class":52},"(\n",[46,697,699],{"class":48,"line":698},29,[46,700,701],{"class":52},"    prefSelect.value,\n",[46,703,705],{"class":48,"line":704},30,[46,706,707],{"class":52},"  );\n",[46,709,711,714,716,718,721,723],{"class":48,"line":710},31,[46,712,713],{"class":341},"  for",[46,715,453],{"class":52},[46,717,377],{"class":341},[46,719,720],{"class":380}," muni",[46,722,461],{"class":341},[46,724,725],{"class":52}," municipalities) {\n",[46,727,729,732,734,736,738,740,742,744],{"class":48,"line":728},32,[46,730,731],{"class":341},"    const",[46,733,477],{"class":380},[46,735,384],{"class":341},[46,737,409],{"class":52},[46,739,484],{"class":60},[46,741,415],{"class":52},[46,743,489],{"class":67},[46,745,421],{"class":52},[46,747,749,752,754],{"class":48,"line":748},33,[46,750,751],{"class":52},"    option.value ",[46,753,64],{"class":341},[46,755,756],{"class":52}," muni.code;\n",[46,758,760,763,765],{"class":48,"line":759},34,[46,761,762],{"class":52},"    option.textContent ",[46,764,64],{"class":341},[46,766,767],{"class":52}," muni.name;\n",[46,769,771,774,776],{"class":48,"line":770},35,[46,772,773],{"class":52},"    muniSelect.",[46,775,519],{"class":60},[46,777,522],{"class":52},[46,779,781],{"class":48,"line":780},36,[46,782,671],{"class":52},[46,784,786,789,791,794],{"class":48,"line":785},37,[46,787,788],{"class":52},"  muniSelect.disabled ",[46,790,64],{"class":341},[46,792,793],{"class":380}," false",[46,795,354],{"class":52},[46,797,799],{"class":48,"line":798},38,[46,800,801],{"class":52},"});\n",[803,804,805],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":31,"searchDepth":79,"depth":79,"links":807},[],"都道府県・市区町村のセレクトによる住所入力サンプル","md",{},"\u002Fexamples\u002Faddress-input",{"title":5,"description":808},"examples\u002Faddress-input","KR0UXhEGPDw-IRdpImUXyOUlq7-onAvtdps4rzpEAz4",1786532353795]