🔰JavaScript実用部品工房💫第007講 JSONから気温と天気を表示する――取得したデータから必要な値だけを取り出します
【プロローグ】
ジェイ「マイスター、前回はConsoleに天気データが表示されました。いよいよ画面に気温を出せますね」
マイスター「うむ。Consoleの奥底に眠っているJSONから、宝物となるデータを拾い上げる作業だ」
ジェイ「JSONって、中身が階層になっていて少し複雑に見えました」
マイスター「JavaScript Object Notationの略で、要はデータを整理して入れておく箱のようなものだ。今日はその箱を開けて、必要な値だけをピンポイントで取り出すぞ」
前講では、Open-MeteoのAPIを呼び出し、大阪の天気データ（JSON）をConsoleへ表示しました。今回はそのJSONデータの中から、現在の気温、天気の状態、風速を取り出し、画面（HTML）へ表示します。
【今回作るもの】
取得した天気データから必要な値を取り出し、画面へ表示します。
・JSONの構造を読み解く
・HTMLにデータを入れる器（要素）を用意する
・天気コードを「晴れ」などの言葉に変換する関数を作る
・取得したデータを画面へセットする関数を作る
【JSONの構造を確認する】
前回Consoleに表示されたデータ構造を復習します。
JavaScript
{
current: {
time: "2026-09-05T18:00",
temperature_2m: 32.5,
weather_code: 0,
wind_speed_10m: 12.3
}
}
APIから返されたオブジェクトの中にcurrentという項目があり、その中に現在の気象データがまとまっています。JavaScriptで気温を取り出すには、ドット（.）でつないで次のように書きます。
JavaScript
const currentTemp = weatherData.current.temperature_2m;
【HTMLに表示場所を用意する】
取得したデータを入れる場所をHTMLに作ります。index.htmlの<div id="weather-result">の中身を次のように変更します。
HTML
<div id="weather-result" hidden>
<h2 id="result-city"></h2>
<p id="result-summary"></p>
<dl>
<dt>気温</dt>
<dd id="result-temperature"></dd>
<dt>風速</dt>
<dd id="result-wind-speed"></dd>
</dl>
</div>
見出し（dt）とデータ（dd）のリストを作成し、データを差し込むためのidを付けました。これに合わせて、script.jsのHTML部品を取得する部分にも以下を追加します。
JavaScript
const resultTemperature =
document.querySelector("#result-temperature");
const resultWindSpeed =
document.querySelector("#result-wind-speed");
【天気コードを言葉に変換する部品】
Open-Meteoは、天気の状態を「WMO天気コード」という数値で返します。たとえば、0は快晴、1〜3は晴れや曇り、61は雨などです。画面に「天気: 0」と表示しても伝わらないため、数値を言葉に変換する関数を作ります。
JavaScript
function getWeatherDescription(code) {
if (code === 0) return "快晴";
if (code === 1 || code === 2 || code === 3) return "晴れまたは曇り";
if (code >= 51 && code <= 67) return "雨";
if (code >= 71 && code <= 77) return "雪";
return "その他の天気";
}
引数で受け取ったcodeの数値に応じて、対応する文字列を返します。本来はさらに細かい分類がありますが、今回は学習用として大まかにまとめました。
【表示を担当する部品を修正する】
前講で作った表示用の関数を書き換え、天気データを画面にセットするようにします。
JavaScript
function showWeatherResult(location, weatherData) {
const current = weatherData.current;
const description = getWeatherDescription(current.weather_code);
resultCity.textContent = location.name;
resultSummary.textContent = `現在の天気は「${description}」です。`;
resultTemperature.textContent = `${current.temperature_2m} ℃`;
resultWindSpeed.textContent = `${current.wind_speed_10m} km/h`;
weatherResult.hidden = false;
}
引数として、地点情報のlocationだけでなく、取得したweatherDataも受け取ります。weatherData.currentを変数に一時保存し、それぞれのHTML要素のtextContentへ値を代入しています。
【検索フォームから呼び出す】
フォームの送信イベントハンドラーの中も少し修正します。前回のshowFetchSuccessを呼び出していた部分を、新しく作ったshowWeatherResultに変更します。
JavaScript
const weatherData =
await fetchWeather(FIXED_LOCATION);
console.log(
"取得した天気データ:",
weatherData
);
showMessage(
`${FIXED_LOCATION.name}の天気データを取得しました。`
);
// ここを変更する
showWeatherResult(FIXED_LOCATION, weatherData);
【script.jsの完成コード】
追加・変更した部分を含めたscript.jsの全体像です。
JavaScript
const FIXED_LOCATION = {
name: "大阪",
latitude: 34.6937,
longitude: 135.5023
};
const searchForm =
document.querySelector("#weather-search-form");
const cityInput =
document.querySelector("#city-input");
const message =
document.querySelector("#message");
const weatherResult =
document.querySelector("#weather-result");
const resultCity =
document.querySelector("#result-city");
const resultSummary =
document.querySelector("#result-summary");
const resultTemperature =
document.querySelector("#result-temperature");
const resultWindSpeed =
document.querySelector("#result-wind-speed");
cityInput.value = FIXED_LOCATION.name;
function createWeatherUrl(location) {
const baseUrl =
"https://api.open-meteo.com/v1/forecast";
const parameters = new URLSearchParams({
latitude: location.latitude,
longitude: location.longitude,
current:
"temperature_2m,weather_code,wind_speed_10m",
timezone: "Asia/Tokyo"
});
return `${baseUrl}?${parameters.toString()}`;
}
async function fetchWeather(location) {
const url = createWeatherUrl(location);
const response = await fetch(url);
if (!response.ok) {
throw new Error(
`天気データを取得できませんでした。HTTP ${response.status}`
);
}
const weatherData = await response.json();
return weatherData;
}
function getWeatherDescription(code) {
if (code === 0) return "快晴";
if (code === 1 || code === 2 || code === 3) return "晴れまたは曇り";
if (code >= 51 && code <= 67) return "雨";
if (code >= 71 && code <= 77) return "雪";
return "その他の天気";
}
function showMessage(text) {
message.textContent = text;
}
function hideWeatherResult() {
weatherResult.hidden = true;
}
function showWeatherResult(location, weatherData) {
const current = weatherData.current;
const description = getWeatherDescription(current.weather_code);
resultCity.textContent = location.name;
resultSummary.textContent = `現在の天気は「${description}」です。`;
resultTemperature.textContent = `${current.temperature_2m} ℃`;
resultWindSpeed.textContent = `${current.wind_speed_10m} km/h`;
weatherResult.hidden = false;
}
searchForm.addEventListener("submit", async (event) => {
event.preventDefault();
showMessage(
`${FIXED_LOCATION.name}の天気データを取得しています。`
);
hideWeatherResult();
try {
const weatherData =
await fetchWeather(FIXED_LOCATION);
console.log(
"取得した天気データ:",
weatherData
);
showMessage(
`${FIXED_LOCATION.name}の天気データを取得しました。`
);
showWeatherResult(FIXED_LOCATION, weatherData);
} catch (error) {
console.error(error);
showMessage(
`${FIXED_LOCATION.name}の天気データを取得できませんでした。`
);
}
});
【実行して確認する】
ファイルを保存し、ブラウザーでindex.htmlを開きます。「天気を取得する」ボタンを押すと、通信が完了した後に画面へ大阪の天気が表示されます。「現在の天気は「快晴」です。」などの文章とともに、気温や風速が数値と単位付きで表示されれば成功です。無機質なJSONデータが、アプリケーションらしい表示に変わりました。
【演習】
WMO天気コードの変換処理（getWeatherDescription）に、雷雨の判定を追加してください。WMO天気コードが 95 以上 99 以下の場合は、「雷雨」という文字列を返すようにします。
【演習の解答】
getWeatherDescription関数の条件分岐に、次の一行を追加します。
JavaScript
function getWeatherDescription(code) {
if (code === 0) return "快晴";
if (code === 1 || code === 2 || code === 3) return "晴れまたは曇り";
if (code >= 51 && code <= 67) return "雨";
if (code >= 71 && code <= 77) return "雪";
if (code >= 95 && code <= 99) return "雷雨"; // これを追加
return "その他の天気";
}
APIのドキュメントを読み解きながら条件を増やしていくことで、より精度の高い天気アプリに育てることができます。
【次回予告】
ついに天気データを画面へ表示することができました。しかし、今は大阪のデータしか見られません。次回は固定地点をやめ、利用者が入力欄に打ち込んだ都市名（東京、札幌、那覇など）を検索して、好きな場所の天気を調べられるようにアプリを拡張します。
