Vue.jsで天気APIを叩いてみる

こんにちは。椎原です。弊社ではAmazon IVSを使ってライブ配信のアプリを作っているのですが（2020/11）、今作っているのとは別に、APIを使ってサービスを展開できないか検討中です。

APIそのものは協力会社さんに作って貰っています。それを使ったアプリをフロントエンドで開発できないかと。Blade、Angular、Reactを検討してみたところ、学習コストが低いVue.jsが有力となりました。

で、私も本を読んだりして、勉強してみました。

簡単に、APIを叩けるものは……そうだ。天気情報サービスを使おうと思いましたのですよ。

ググってみるとよさげなサイトが。

コピペするだけかと思いきや、仕様で一都市しか出てこない。都市名URLに埋め込みなんです。セレクトボックスで選択できるようにするでしょ、フツー。

というわけで、作ってみたのが今回のアプリ。半分ぐらい改造しました。背景とか天気によって変えたかったのですが、HTMLとCSSの知識があんまりないので固定。まあ、実際のアプリ作成時は弊社にデザイナーさんがいるので大丈夫でしょう……。今回はVue.jsでAPI叩くのが目的です。

じゃあ、相違点を

都市名をセレクトボックスで選択できるようにした。
DOMという技術で変数が変わったらHTML側に反映されるようになるので、ライフサイクルフックをbeforeUpdateにした（updatedとどう違うのか理解してません）。そんなこと買った本には載ってなかったので、しばらく悩みました。
元サイトにCSSが無かったので、自作。

できたサンプルはこちらからどうぞ。

rrr.html

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="rrrstyle.css">
</head>
<body>
    <div id="app" style="text-align: center;">
      <h1 class="test">都市のお天気概況</h1>
      <select v-model="city">
        <option disabled value="">天気を見たい都市を指定してください</option>
        <option>Tokyo</option>
        <option>Osaka</option>
        <option>Fukuoka</option>
        <option>Okinawa</option>
     </select>
  
      <div class="weather_info">

        <p v-bind:class="{'test': isON}">{{ city }}</p>
        <p v-bind:class="{'test': isON}">{{ condition.main }}</p>
        <p v-bind:class="{'test': isON}">{{ temp | roundUp }}°C</p>

      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="rrrapp.js"></script>
  </body>

rrrapi.js

// var app = new Vue({
new Vue({
    el: '#app',
  data: {
    city: null,
    temp: null,
    condition: {
      main: null
    }, 
    isON: true
  },
  beforeUpdate: function(){     
    axios.get('https://api.openweathermap.org/data/2.5/weather', {
      params: { q: this.city, APPID: 'xxxxxxxxxxxxxxxxxxxxxxxx'}
    })
    .then(function(response){
      this.temp = response.data.main.temp- 273.15      
      this.condition = response.data.weather[0]
      }.bind(this))
    .catch(function(error){
      console.log(error)
    })
  },
  filters: {
    roundUp(value){
      return Math.ceil(value)
    }
  }
})

rrrstyle.css

body {
    background-image: url(kumori.jpg);
    background-size: cover;
}

.test{
    font-size: 36px;
    color: rgb(255, 250, 250);
}

Vue.jsで天気APIを叩いてみる

Vue.jsカテゴリの最新記事