ポストくんAPIを使ってみた

ポストくんで郵便番号検索してみました。

プログラミング初心者の僕には、ハードルが高かった🤣🤣🤣
何とかできたけどね
ちなみに合ってるかはわかりません。

「イメージフォーム」

scriptはこんな感じ⬇️⬇️⬇️⬇️⬇️😜😜😜

<script setup>
const inputPostCode = ref('')
const inputAddress = ref({ prefecture: '', city: '', suburb: '', block1: '' })
const getPostCode = async (postCode) => {
    const regexp = new RegExp('[0-9]{7}')
    const result = postCode.match(regexp)
    if (!postCode) return postCodeFormClear()
    if (!postCode || postCode.length !== 7 || !result) return
    // ポスト君API
    await useFetch(`${postCode}.json`, {
        baseURL: 'https://postcode.teraren.com/postcodes',
    }).then(res => {
        const data = res.data.value
        const error = res.error.value
        if (error) {
            console.log(`${postCode}は存在しない郵便番号です\n(${error})`)
            return
        } else {
            inputAddress.value = data
            inputAddress.value.block1 = ''
        }
    })
}
const postCodeFormClear = () => {
    inputAddress.value = { prefecture: '', city: '', suburb: '', block1: '' }
};
</script>

templateはこんな感じです(最近pugを使ってます)

<template lang='pug'>
.address
    p 現在住所 
        div
            label 郵便番号 
                input(type="text" @keydown.enter="getPostCode(inputPostCode)" v-model.trim="inputPostCode")
            label 都道府県 {{ inputAddress.prefecture_kana }}
                input(type="text" v-model="inputAddress.prefecture")
            label 地区町村 {{ inputAddress.city_kana }}
                input(type="text" v-model="inputAddress.city")
            label 町名 {{ inputAddress.suburb_kana }}
                input(type="text" v-model="inputAddress.suburb")
            label 番地 
                input(type="text" v-model="inputAddress.block1")
            div
                p {{ inputAddress.prefecture + inputAddress.city + inputAddress.suburb + inputAddress.block1 }}
</template>

初心者なりに頑張った結果です。

説明⬇️⬇️⬇️⬇️
(script)

// リアクティブな変数を定義しました。
// 初期値は空に設定！！
const inputPostCode = ref('')
const inputAddress = ref({ 
    prefecture: '',
    city: '', 
    suburb: '',
    block1: '' 
})

(template)

input(
    type="text"
    // 郵便番号を入力する所は、Enterでイベントを発生 
    @keydown.enter="getPostCode(inputPostCode)" 
    // valueとinputをbindする
    v-model.trim="inputPostCode")
// 他はvalueとinputをbindだけにします
// ポストくんが間違っていても入力できるように😜
input(type="text" v-model="inputAddress.prefecture")
input(type="text" v-model="inputAddress.city")
input(type="text" v-model="inputAddress.suburb")
input(type="text" v-model="inputAddress.block1")

次に ⬇️⬇️⬇️⬇️

//getPostCodeに（引数に郵便番号をいれる）
@keydown.enter="getPostCode(inputPostCode)" 

(script)
ここから3日かかった🤣
なぜなら...html,css,javascriptがど素人だからです。

// getPostCodeを定義する
// Enter押された時に呼ばれる関数
// APIを呼び出すのでasyncをつける
// 引数を受け取る（郵便番号）
const getPostCode = async (postCode) => {
    // 1.Enterが押されました
    // 2.正規表現の設定(数字で七桁)
    const regexp = new RegExp('[0-9]{7}')
    // 3.郵便番号にマッチさせる
    const result = postCode.match(regexp)
    // 4.falsyの時にfromをからにする関数
    // falsyとtruthyがまだよくわからない
    // やりたい事は、空の時に関数をよびだす
    if (!postCode) return postCodeFormClear()
    // 5.からの時と7桁じゃない時と数値じゃないときはreturnして処理させない
    if (!postCode || postCode.length !== 7 || !result) return
    // 全てが一致したら⬇️⬇️⬇️⬇️
    // ポスト君APIここでやっと登場です。
    // apiを使うときはawaitが必要!!
    // 7.useFetchを使う、第一引数にAPIのURL、第二引数に色々な設定ができる
    await useFetch(`${postCode}.json`, {
        // ⬆️に第ニ引数に続きを,引数をここで使います(郵便番号)
        // 色々な設定ができる所にベースになるURLを設定しました。
        baseURL: 'https://postcode.teraren.com/postcodes',
    // ⬇️⬇️⬇️ここもなかなか理解するのに大変だった(いまだにわかってないけど)
    // ここまでが処理するところだと思う
    // -----------------------------------
    }).then(res => {
        // 処理結果をここで受け取る
        // 引数で受け取る(名前は何でも良い)
        // 8.結果をdataに代入する(引数.data.value)結果データが取れる
        const data = res.data.value
        // 9.エラーをerroに代入する(引数.error.value)エラーデータが取れる
        const error = res.error.value
        // 10.エラーだった時の処理(郵便番号が存在しない時に404?が返ってくる)
        if (error) {
            11. とりあえずコンソールに
            console.log(`${postCode}は存在しない郵便番号です\n(${error})`)
            12. そして処理ストップさせる
            return
        // 13. エラーが無いとき
        } else {
            // 🎏14.inpuAddressに郵便番号データを入れる
            inputAddress.value = data
            // 15.ここを設定しないとundfindになるので空を入れる
            // APIのデータとは関係ないので
            inputAddress.value.block1 = ''
        }
    })
}

(templat)

// 🎏14.inpuAddressに郵便番号データが入っているの表示させる
label 都道府県 {{ inputAddress.prefecture_kana }}
    input(type="text" v-model="inputAddress.prefecture")
label 地区町村 {{ inputAddress.city_kana }}
    input(type="text" v-model="inputAddress.city")
label 町名 {{ inputAddress.suburb_kana }}
    input(type="text" v-model="inputAddress.suburb")
label 番地 
    // APIと関係ないデータ
    input(type="text" v-model="inputAddress.block1")
div
    p {{ inputAddress.prefecture + inputAddress.city + inputAddress.suburb + inputAddress.block1 }}

最後にクリア関数

const postCodeFormClear = () => {
    // inpuAddressを空にする
    inputAddress.value = { prefecture: '', city: '', suburb: '', block1: '' }
};

なんとか完成です。

もし間違ってるところが有れば教えてください
中1の夏休みはプログラミング勉強をがんばります。