Javascript、API、JSONデータ抜き出しに関する備忘録

# JavascriptでAPIを叩いて天気を取得してみる
>自身も初心者なので、書き方は超初心者向けに簡単に書いてます
この記事を書いた背景としてはJSONのデータを取ってきても
うまく必要な箇所を抜き出す際に、色々調べ時間がかかってしまったので、
自分なりに忘れないようにする為書きました
    
## 作成したスクリプト
```js
    document.addEventListener("DOMContentLoaded", async function () {

        const res = await fetch("https://weather.tsukumijima.net/api/forecast/city/400040")
            .then(async function (data) {
                // console.log(data); //確認用
                const testData = await data.json();
                console.log(testData);
                //json()で変換したJSONデータの中身の確認

                console.log(testData.copyright);
                // copyright配列のデータ表示

                console.log(testData.description);
                // copyright配列のデータ表示

                console.log(testData.forecasts[0]);
                // copyright配列のデータ表示　配列[0]番目

                console.log(testData.forecasts[1]);
                // copyright配列のデータ表示　配列[1]番目

                console.log(testData.forecasts[2]);
                // copyright配列のデータ表示　配列[2]番目
            })
            .catch(function (error) {
                //エラーが出た時の処理
                console.log("エラーが出ました");
            })
    })
```

## 今回のまとめ

```js
    console.log(testData);
    //json()で変換したJSONデータの中身の確認
```
ここで、実行してもらえればわかりますが、中身が↓のようになります。

```jsonc
{
    "publicTime": "2024-10-09T17:00:00+09:00",
    "publicTimeFormatted": "2024/10/09 17:00:00",
    "publishingOffice": "福岡管区気象台",
    "title": "福岡県 久留米 の天気",
    "link": "https://www.jma.go.jp/bosai/forecast/#area_type=offices&area_code=400000",
    "description": {
        "publicTime": "2024-10-09T16:35:00+09:00",
        "publicTimeFormatted": "2024/10/09 16:35:00",
        "headlineText": "",
        "bodyText": "　福岡県は、高気圧に覆われておおむね晴れとなっています。\n\n　９日は、高気圧に覆われておおむね晴れとなりますが、気圧の谷の影響により曇りとなる所があるでしょう。\n\n　１０日は、高気圧に覆われて晴れとなる所もありますが、気圧の谷や湿った空気の影響により、おおむね曇りで雨が降る所があるでしょう。",
        "text": "　福岡県は、高気圧に覆われておおむね晴れとなっています。\n\n　９日は、高気圧に覆われておおむね晴れとなりますが、気圧の谷の影響により曇りとなる所があるでしょう。\n\n　１０日は、高気圧に覆われて晴れとなる所もありますが、気圧の谷や湿った空気の影響により、おおむね曇りで雨が降る所があるでしょう。"
    },
    "forecasts": [
        {
            "date": "2024-10-09",
            "dateLabel": "今日",
            "telop": "晴時々曇",
            "detail": {
                "weather": "晴れ　夜のはじめ頃　くもり",
                "wind": "北の風　海上　では　北東の風　やや強く",
                "wave": "１メートル"
            },
            "temperature": {
                "min": {
                    "celsius": null,
                    "fahrenheit": null
                },
                "max": {
                    "celsius": null,
                    "fahrenheit": null
                }
            },
            "chanceOfRain": {
                "T00_06": "--%",
                "T06_12": "--%",
                "T12_18": "--%",
                "T18_24": "0%"
            },
            "image": {
                "title": "晴時々曇",
                "url": "https://www.jma.go.jp/bosai/forecast/img/101.svg",
                "width": 80,
                "height": 60
            }
        },
        {
            "date": "2024-10-10",
            "dateLabel": "明日",
            "telop": "晴時々曇",
            "detail": {
                "weather": "晴れ　時々　くもり",
                "wind": "北の風",
                "wave": "０．５メートル"
            },
            "temperature": {
                "min": {
                    "celsius": "17",
                    "fahrenheit": "62.6"
                },
                "max": {
                    "celsius": "27",
                    "fahrenheit": "80.6"
                }
            },
            "chanceOfRain": {
                "T00_06": "10%",
                "T06_12": "10%",
                "T12_18": "0%",
                "T18_24": "0%"
            },
            "image": {
                "title": "晴時々曇",
                "url": "https://www.jma.go.jp/bosai/forecast/img/101.svg",
                "width": 80,
                "height": 60
            }
        },
        {
            "date": "2024-10-11",
            "dateLabel": "明後日",
            "telop": "晴時々曇",
            "detail": {
                "weather": "晴れ　時々　くもり",
                "wind": "北東の風　後　北の風",
                "wave": "０．５メートル"
            },
            "temperature": {
                "min": {
                    "celsius": "18",
                    "fahrenheit": "64.4"
                },
                "max": {
                    "celsius": "26",
                    "fahrenheit": "78.8"
                }
            },
            "chanceOfRain": {
                "T00_06": "10%",
                "T06_12": "10%",
                "T12_18": "10%",
                "T18_24": "10%"
            },
            "image": {
                "title": "晴時々曇",
                "url": "https://www.jma.go.jp/bosai/forecast/img/101.svg",
                "width": 80,
                "height": 60
            }
        }
    ],
    "location": {
        "area": "九州",
        "prefecture": "福岡県",
        "district": "筑後地方",
        "city": "久留米"
    },
    "copyright": {
        "title": "(C) 天気予報 API（livedoor 天気互換）",
        "link": "https://weather.tsukumijima.net/",
        "image": {
            "title": "天気予報 API（livedoor 天気互換）",
            "link": "https://weather.tsukumijima.net/",
            "url": "https://weather.tsukumijima.net/logo.png",
            "width": 120,
            "height": 120
        },
        "provider": [
            {
                "link": "https://www.jma.go.jp/jma/",
                "name": "気象庁 Japan Meteorological Agency",
                "note": "気象庁 HP にて配信されている天気予報を JSON データへ編集しています。"
            }
        ]
    }
}
```

ここで気にするべきは↓の配列名
* "publicTime"
* "publicTimeFormatted"
* "publishingOffice"
* "description"
* "forecasts" 
取り出すときは、（変換したJDONデータ.配列名）
今回でいうなら、data.publicTimeやdata.publicTimeFormattedやdata.forecasts
のような形式で取り出せます。

この中身がわからない場合は適宜console.log(data.forecasts)等で
確認すれば初めてAPIを叩いてデータを扱う人にもわかりやすいと
思います。