fetch API で郵便番号検索

実現したいこと

住所情報からAPIを利用して郵便番号を取得する

発生している問題・分からないこと

3つのinputから取得した値を空白スペースを与えて並べ、郵便番号検索のパラメータと結合させてurlをfetchに読み込ませましたが、エラーが出て前に進めません。
https://zipcoda.net/api?address=東京都港区芝公園　
直接ブラウザに検索すると値が取得できるのでパラメータに間違いはないと思います。

エラーメッセージ

error
1GET https://zipcoda.net/api?address= 500 (Internal Server Error)

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8</head>
9<body>
10    <form method="get" action="https://zipcloud.ibsnet.co.jp/api/search">
11        <fieldset>
12            <legend>住所検索</legend>
13            <ul>
14                <li>
15                    <label for="zipcode">郵便番号:</label>
16                    <input type="text" name="zipcode" id="zipcode"
17                        placeholder="xxx-xxxx">
18                </li>
19                <li>
20                    <label for="precode">都道府県</label>
21                    <input type="text" name="precode" id="precode"
22                    placeholder="都道府県">
23                </li>
24                <li>
25                    <label for="precode2">市区村町</label>
26                    <input type="text" name="precode2" id="precode2"
27                    placeholder="市区村町">
28                </li>
29                <li>
30                    <label for="address">住所:</label>
31                    <input type="text" name="address" id="address"
32                        placeholder="住所">
33                </li>
34                <li>
35                    <button type="button">郵便番号検索</button>
36                </li>
37                <li>
38                    <button type="button" id="button">住所で検索</button>
39                </li>
40            </ul>
41        </fieldset>
42    </form>
43    <script src="postalcode.js"></script>
44</body>
45</html>

javascript
1const precode = document.querySelector("#precode").value;
2const precode2 = document.querySelector("#precode2").value;
3const address = document.querySelector("#address").value;
4
5const button = document.querySelector("#button");
6
7const query = `${precode} ${precode2} ${address}`;
8const url = `https://zipcoda.net/api?address=${query}`;
9
10
11button.addEventListener("click", () => {
12    fetch(url)
13    .then((response) => {
14        console.log(response);
15        response.json();
16    })
17});

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

パラメータが間違っているのか、何度かコードを改めるとエラー内容が404と表示されることもあった。

補足

特になし

Lhankor_Mhy

2024/04/13 04:18

エラーメッセージをご提示ください。

行動規範の内容に同意します

回答3件

js前半の const precode = ～等の部分はどれもグローバルな定数の宣言＆初期化で、画面ロード時のscript解釈時に全て定数として決定し、以降は変更されません。
つまり、画面ロード時にすでにinputにテキストが入力されていない限りquery等は常に空文字列です。
※ブラウザによっては、テキストを入力済みのまま更新(Ctrl+F5以外)したら正常動作する場合もあるとおもいます

後半の button.addEventListener に渡される関数のみがclickイベントとして登録されるので
ボタンクリック時に使用されるurlは常に(queryが空文字列なので)固定の文字列になります。
結果、エラーメッセージに表示されている通り https://zipcoda.net/api?address= という固定文字列をfetchして500が返ってきているのでしょう。

投稿2024/04/13 04:14