Warning: Undefined array key "steps" in /home/bubudoufu/bubudoufu.com/public_html/wp-content/plugins/amp/src/ReaderThemeSupportFeatures.php on line 501
気象庁のJSONを用いて簡易的な天気予報サイトを作ってみる - プログラミングを学習中の私が、アウトプットするためのサイト
サイトアイコン プログラミングを学習中の私が、アウトプットするためのサイト

気象庁のJSONを用いて簡易的な天気予報サイトを作ってみる

このページではソースコードの一部分を簡単な解説をしています。


完成品はコチラから
完成品のソースコードはgithubにあります

スポンサーリンク

概要

外部からデーターを取得し、そのデーターをjavascriptでDOM操作してhtmlに反映させる練習の為に簡易的な天気予報サイトをつくってみました。日本地図の都道府県名をクリックすると気象庁のサイトから天気予報のJSONファイルを javascriptで取得して、HTMLに反映させ表示します。日本地図はJmap jQuery pluginと言うプラグインを使用しています。

天気予報を取得する

async/await構文でfetchメソッドを使い4行目の

から天気予報の情報を取得しています。 ${code} にはエリアのコードを入れます。エリアのコードはコチラから参照できます。
http://www.jma.go.jp/bosai/common/const/area.json

取得したものをjsonメソッドでjsonデータに変換してます。

日本地図がクリックされた時の処理

日本地図はJmap jQuery pluginを使用しています。

都道府県が選択されると7行目のonSelectが実行されます。第2引数のdataには都道府県情報が格納されたオブジェクトが入っていて、その中のnameプロパティには都道府県名が入っているので、それを利用し変数codelistのリストの中からエリアコード取得してgetWeather関数の引数へ渡しています。

まとめ

外部データを使ったりプラグインを使うことで簡易的ではありますが天気予報サイトが少ないコード記述で作れました。

最後までお読みいただきありがとうございました。
完成品はコチラから
完成品のソースコードはgithubにあります

モバイルバージョンを終了