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