20221005課題の解答例

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="main.js"></script>
    <title>気象庁の天気予報WebAPIでJSON情報を取得し整形して表示</title>
</head>
<body>
    <h2 id="area"></h2>
	<table>
        <tr id="date">
            <td class="title">日付</td>
            <td></td>
        </tr>
        <tr id="weather">
            <td>天気</td>
            <td></td>
        </tr>
        <tr id="tempMax">
            <td>最高気温</td>
            <td></td>
        </tr>
        <tr id="tempMin">
            <td>最低気温</td>
            <td></td>
        </tr>
    </table>
</body>
</html>

style.css

/* style.css */
@charset "utf-8";

*{
    margin: 0;
    padding: 0;
}

body{
    margin: 2em;
}

table{
    width: 100%;
    border-collapse: collapse;
}

table, td{
    background-color: powderblue;
}

td{
    padding: 0.5em 1em;
    border: solid 2px #fff;
}

.title{
    width: 6em;
}

main.js

/* 
 * main.js : 気象庁のサイトから天気予報情報を取得（JSON）
 */

// 茨城県の地点URL（例：東京都は130000.json）
const url = "https://www.jma.go.jp/bosai/forecast/data/forecast/080000.json";

// JSONお天気情報を整形して表示する
function formatTenkiJSON(weather){
	console.log(weather);

	// 地域
	document.getElementById("area").textContent = weather[1].tempAverage.areas[0].area.name + "の天気";

	// 日付情報を整形
	const date = new Date(weather[0].timeSeries[0].timeDefines[0]);
	const formatDate = date.getMonth() + 1 + "月" + date.getDate() + "日";
	document.getElementById("date").lastElementChild.textContent = formatDate;

	// 天気
	document.getElementById("weather").lastElementChild.textContent = weather[0].timeSeries[0].areas[0].weathers[0];

	// 最高気温
	const tempMax = Math.floor(weather[1].tempAverage.areas[0].max);

	if(tempMax === undefined || isNaN(tempMax) || tempMax === ""){	// データが存在しない場合
		document.getElementById("tempMax").lastElementChild.textContent = "-";
	}
	else{
		document.getElementById("tempMax").lastElementChild.textContent = tempMax + " ℃";
	}	

	// 最低気温
	const tempMin = Math.floor(weather[1].tempAverage.areas[0].min);

	if(tempMin === undefined || isNaN(tempMin || tempMin === "")){	// データが存在しない場合
		document.getElementById("tempMin").lastElementChild.textContent = "-";
	}
	else{
		document.getElementById("tempMin").lastElementChild.textContent = tempMin + " ℃";
	}	
}

// 起動時の処理
window.addEventListener("load", ()=>{

	// 気象庁の天気予報WebAPIからJSONデータを取得
	fetch(url)
		.then( response => response.json() )
		.then( weather => formatTenkiJSON(weather) );

});