20221005課題の解答例

JavaScript
2022.10.07

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/* 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
/*
 * 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) );
 
});

コメント