【reactJS】OpenWeatherMapAPIで天気の「予報」を取得する方法
この記事はギークハウス新宿界隈 Advent Calendar 2018の21日目の記事になる予定です。（僕の記事が3つ目！！図々しさ！）
アドカレに載せた記事たちです。よかったらどうぞ
ボードゲーム”カタン”の初期配置についての考察と戦術論 - 自由研究をします。
最近の進捗とか今住んでいるギークハウスというシェアハウスの紹介 - 自由研究をします。
最近reactでスマートミラーの画面上の部分を作っている日々って感じの生活を送っているのですが、やはり鏡の上から伝えたいことの一つとして「気象情報」が挙げられます。
そのため、reactで作るコンポーネントはもっぱらopenWeatherMapのAPIを叩いて今の天気情報やら(「窓の外を見てみればいいじゃないか」という普段外に出ているアウトドアなマッチョの意見もあるかと思われますが週のうち数日外出すればマシなような僕みたいな引きこもりにとって、コンクリートジャングル生活の中でわざわざ窓を開けて外を確認しようにもビルの狭間なのでよくわからず外に出る気にもならないのでやはり天気把握機能は必要なのです）気温などの表示をさせる感じになっています。
APIからでてくる天気情報ですが、正しい値が取れているのかを確認するのが一番僕にとってネックでした。だって外にいちいち確認なんてできないですからね！ スマホで検索して確認していました。
現在の天気でなく未来の天気、「予報」を取得する
現在の気象情報でなく、今日明日明後日の天気予報を取得したいな〜〜〜と思って（今考えたら明らかにそのJSONデータを取得する先で引き出せるわけがないのですが）何も考えずにいつも叩いていたのを呼び出しても案の定、現在の天気、その日の最低気温、最高気温、気温雲量湿度風向風量くらいしか出てこないんですね。
そのときに触っていたのがこれです。「現在の気象データ」が呼び出せます
おかしいと思ったんですよ！！！ いつも叩いている「現在の気象情報」のAPIのJSONデータの中身って
明らかに数日分の気象データがはいってるって感じじゃないじゃないですか！！！！
おいおいおいおいお〜〜〜い！！！（銀魂のあのノリに影響されるキツイ女オタクのモノマネ）
こうすればいいですよ
これが公式のリファレンスです。
http://api.openweathermap.org/data/2.5/forecast?id=天気予報を取得した場所の都市IDをここに&APPID=ここにAPIキーを入力
これが正しいやつです。5日間の天気情報が3時間毎に取得できます。
サンプルのJSONが表示されます。参考にどうぞ、2017年のモスクワのデータみたいです。
まとめ
なんかopenWeatherMapで現在の気象データの取得についての記事はWeb上でよく見かけるのに天気予報になると一気に情報量が減り、結局ボクも公式のリファレンスを読んで見つけた（最初から公式を読め）って感じで少し詰まっていたのでこの記事を書きました。
そういえばreactでHTTPリクエストする方法ですが、コンポーネント内でjQueryを呼び出したり(正直スマートだと思えないので好きでないです）XmlHttpRequestオブジェクトを利用する方法（以前はこれをしていました）などが有りますが、最近はaxiosというライブラリを使ってスマートにAPIからデータを持ってきています。
コード上の見た目でもわかりやすく使いやすいので、また今度記事として書いてみたいと思います。早く知りたい人はググってください。
それでは
ばいばい
[ この記事はブログ投稿者の憶測や考えによりつくられています。
よって書いてある内容に誤りや言い間違いがあるかもしれません。もし修正したほうがいい場所や「こういった言い方のほうが”ソレっぽい”よ」などがありましたら後に記載してあります、リンク先のツイッターアカウントに教えてくださると嬉しいです:) ]
