気象庁：お天気APIを使ってみた

こんにちは、いつも傘を忘れてしまう私なので
今回は気象庁のAPIを使ってお天気情報を取得するアプリを作成しました。
#使用した技術
・Windows10(PC)
・Vue3
・TypeScript
・HTML/CSS
・FireBase
・Bootstrap5
・気象庁API
・date-fns
・イラスト：ぴよたそ

#画面
かわいい寅さんが今日の天気を教えてくれます。
寅さんは基本あなたの事を呼び捨てにしてくるのでとても距離感が近いです。

上のメニューバーを押すと、メニューが開く仕様です。

kakeibo
todo

#出来る事
・FireBaseの登録データから名前を取得して寅さんが呼んでくれる
・FireBaseの登録データから住所を取得して今日の天気を表示
・下の部分で住所を変えると他の天気も見れる

#コードで説明
今回は気象庁のAPIを使って天気を取得しています。
前回も述べましたが私はAPIを呼ぶのが好きです。世の中には呼びたいAPIがたくさんありますね。

という事でまずは
(1)FireBaseからログイン中ユーザの住所(今回は東京都)を取得
(2)全国データを取得して、都道府県IDを取得
(3)登録している都道府県と同じ場所のコードを取得してweatherPlaceCodeという変数に代入

(2)から…↓

      const response1 = await axios.get(
        "http://www.jma.go.jp/bosai/common/const/area.json"
      );
      const allInfo = response1.data.offices;
      const keyNumber = Object.keys(allInfo);

      for (const key of keyNumber) {
        if (allInfo[key].name === userAddress.value) {
          weatherPlaceCode = String(key);
        }
      }

(3)続いてそのコードをURLに入れてお天気情報を取得します。

      const response2 = await axios.get(
  `https://www.jma.go.jp/bosai/forecast/data/forecast/${weatherPlaceCode}.json`
);

無事に東京のデータが返ってきたので必要な情報(お天気)を掘り出します。

  weather.value = response2.data[0].timeSeries[0].areas[0].weathers[1];

これで寅さんもお天気をユーザに伝える事が出来ました。
良かったね！

#ちなみに
寅さんの挨拶も時間によって変わります。

   /**
     * 時間によって、寅さんの挨拶を変える.
     */
    const whatNowTime = () => {
      //現在時刻を取得
      const now = new Date();
      //時間と分を取得
      const nowHours = now.getHours();
      const nowMinutes = now.getMinutes();
      //時間を繋げて3-4桁の数字に
      let nowTime = 0;
      if (String(nowMinutes).length === 1) {
        nowTime = Number(String(nowHours) + "0" + String(nowMinutes));
      } else {
        nowTime = Number(String(nowHours) + String(nowMinutes));
      }
      //4:00-10:59 おはよう、11:00-17:59 こんにちは、それ以外こんばんは
      if (Number(nowTime) >= 400 && Number(nowTime) < 1100) {
        sayHallo.value = "おはよう";
      } else if (Number(nowTime) >= 1100 && Number(nowTime) < 1800) {
        sayHallo.value = "こんにちは";
      } else {
        sayHallo.value = "こんばんは";
      }
    };

時間のところはいちいち文字列だの数字だのにしてしまったのでそれは必要なかったかな…と反省です。

#まとめ
今回は気象庁APIを使ってお天気情報を取得しました。
APIを使うだけで色々な情報が取得できるので非常にありがたいですね…
これでもう雨に濡れずに済みそうです。

ここまでご覧頂きありがとうございました。