JavascriptでAPIを叩いて天気を取得してみる
自身も初心者なので、書き方は超初心者向けに簡単に書いてます
この記事を書いた背景としてはJSONのデータを取ってきても
うまく必要な箇所を抜き出す際に、色々調べ時間がかかってしまったので、
自分なりに忘れないようにする為書きました
作成したスクリプト
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("エラーが出ました");
})
})
今回のまとめ
console.log(testData);
//json()で変換したJSONデータの中身の確認
ここで、実行してもらえればわかりますが、中身が↓のようになります。
{
"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を叩いてデータを扱う人にもわかりやすいと
思います。