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) ); }); |
コメント