天気

【JavaScript】気象庁から天気予報を取得してみる

気象庁が公開している天気予報のデータを利用して、JavaScriptをで天気情報を取得・表示します。下のプログラムを試してください、３日分の天気と風の情報が表示されます。このコードをもとにして解説していきます。 天気予報（気象庁データ） 都道府県を選択 サンプルコードを表示 サンプルコードを非表示 1. 天気予報の取得方法 まず、気象庁では、天気予報の情報を毎日5時・11時・17時の1日3回発表しているようです。（https://www.data.jma.go.jp/suishin/cgi-bin/catalogue/make_product_page.cgi?id=Jikeiret） その、天気予報はjson形式で取得が可能です。 https://www.jma.go.jp/bosai/forecast/data/forecast/{コード}.json {コード} にエリアコードを入れて、アクセスすると取得できます。（例：東京　 https://www.jma.go.jp/bosai/forecast/data/forecast/130000.json） また、エリアコード情報は、https://www.jma.go.jp/bosai/common/const/area.json から取得できます。 2. JavaScriptによる実装ポイント JavaScript部分では、APIからデータを取得し、DOMに情報を動的に反映させる実装がされています。このセクションでは、コードの各機能を詳細に解説していきます。 2.1 非同期通信と async/await の活用 Webアプリケーションでは、サーバーと通信してデータを非同期で取得する必要があります。fetch APIとasync/await構文を用いることで、読みやすく直感的な非同期処理を実現しています。 こでは、 await を使用して fetch のレスポンスが返ってくるのを待ち、その後JSONパースし、さらに populateAreaSelect() 関数を呼び出すことで、取得したデータから都道府県の選択肢を自動生成しています。 このような実装により、非同期通信の動作がシンプルに記述でき、エラーハンドリング（try/catch）でネットワークエラーやデータ形式の問題にも対処できるようにしています。 ここでは、まず select 要素から選択された値（気象庁のエリアコード）と、表示用の地域名を取得しています。もし値が空であれば、ユーザーに適切なメッセージを表示し、処理を終了します。 その後、テンプレートリテラルを利用してURLを組み立て、該当する天気予報データのJSONを取得。取得したデータは displayForecast() 関数へ渡され、結果としてHTMLが生成され、DOMに挿入される仕組みになっています。 2.2 JSONデータの理解と予報データの構造 気象庁が提供する天気予報データは、複数の階層からなるJSON形式になっています。このサンプルでは、特に次の要素が重要です。 2.3 予報情報の表示（displayForecast()関数） displayForecast() 関数は、取得したJSONデータを利用してユーザーに視覚的にわかりやすいテーブルを生成するための仕組みを提供します。 この関数では、まず取得したデータが配列であること、またデータが存在するかをチェックします。不正なデータであれば、エラーに近いメッセージを返すようにしてユーザーに知らせます。 その後、最初のタイムシリーズの情報から、各エリアごとに天気予報情報を抽出。日付は formatForecastDate() 関数によりフォーマットされ、テーブルの形式で整然と出力されます。 こうした実装は、抽出したデータ量や構造が変更されても、柔軟に対応できるよう設計されており、メンテナンス性の高さが評価されるポイントです。 2.4 日付フォーマットの工夫 気象庁のデータに含まれる日付はISO形式などの標準的な形式で与えられる場合が多いですが、ユーザーにとって分かりやすい形式に変換する必要があります。 formatForecastDate() 関数は、Date オブジェクトとtoLocaleDateString メソッドを利用して、シンプル且つ日本語の曜日情報などを含めた形式に変換しています。 このようにすることで、たとえば「4/1 (火)」のような表示形式となり、ユーザーにとって直感的に理解しやすい情報となります。 まとめ 今回の記事では、気象庁が提供している天気予報データを取得し、HTML/CSS/JavaScriptで表示する一連のプロセスについて詳しく解説しました。以下のポイントが特に重要です。 このプロジェクトは、Web APIを利用する上での基礎から応用までの知識を実践的に学ぶための絶好の教材です。実際に手を動かして、コードを読み解き、機能拡張を試みることで、現代のWeb開発に必要なスキルセットが大いに向上するでしょう。 今回のコードはシンプルかつ拡張性が高く、非常に実践的だと思います。皆さんもぜひ、このサンプルをベースに、自分なりのカスタマイズや機能追加に挑戦してみてください。