Vueを使ってopanweatherMap APIから天気情報を取得したのでメモします
最終的に作ったもの
環境
```package.json "dependencies": { "core-js": "^3.6.5", "vue": "^2.6.11", "vue-axios": "^2.1.5" }, "devDependencies": { "@fortawesome/fontawesome-free": "^5.14.0", "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-service": "~4.5.0", "axios": "^0.19", "babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^6.2.2", "jquery": "^3.2", "node-sass": "^4.14.1", "sass": "^1.15.2", "vue-template-compiler": "^2.6.11" },<h3>テキストエディタ</h3>
phpstorm
<h3>ディレクトリ構成</h3>
src-component-Wather.vue
-App.vue
-main.js
<p>App.vueとmain.jsは特に変わったことはしておらず、コンポーネントを呼び出してるだけです。</p>
```vue:App.vue
<template>
<div id="app">
<Weather></Weather>
</div>
</template>
<script>
import Weather from "@/components/Weather";
export default {
components:{
Weather
},
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
さて本題のWeater.vueです。 （順番に解説していきます）
```vue:Weather.vue直近５日間の３時間毎天気予報
GoogleMapから地図の緯度と経度をコピー&ペーストしてください
凡例：千葉県松戸市緯度35.770874,経度139.896050
緯度
経度
天気情報取得
{{ city }}
{{post.dt|calc}}
{{post.main.temp}}℃
{{post.weather[0].main}}
{{post.main.temp}}℃
{{post.weather[0].main}}
該当しなかった
<h3>テンプレートの中の解説</h3>
<div class="lat-lon-position">
<label for="lat" >緯度</label>
<input id="lat" type="text" v-model="lat">
<label for="lon" >経度</label>
<input id="lon" type="text" v-model="lon">
</div>
<p v-if="lat && lon">
<button @click="weatherPoint()" class="weather-get-button">天気情報取得</button>
<p>テキストに入力した値をv-modelを使ってｊｓ側に渡しています。<br>
weatherPoint()のメソッドでは、受け取った緯度と経度をaxios.getの引数に指定しています</p>
<p>今回は緯度と経度を取得しましたが、郵便番号でも首都名でも取得可能です。<br>
ただ、一番精度がいいのは緯度と経度だと思います</p>
<h3>テンプレートの中の解説 その２</h3>
{{ city }}
{{post.dt|calc}}
{{post.main.temp}}℃
{{post.weather[0].main}}
{{post.main.temp}}℃
{{post.weather[0].main}}
該当しなかった
openweather.Map APIから取得したjsonファイルの中身をfor文で回して一つずつ表示させています。
またv-ifを使ってフォントオーサムで取得した画像を入れ替えて表示させています
メソッドとフィルターズの解説
``` methods: { weatherPoint:function(){ let url =this.baseurl + 'lat=' + this.lat + '&lon=' + this.lon + this.units + this.id; axios.get(url) .then(function (response) { this.city = response.data.city.name this.posts = response.data.list }.bind(this)) .catch(function (error) { console.log(error) }) } }, filters: { calc(value) { let dateTime = new Date((value) *1000); return dateTime.toLocaleString("ja"); } }//filters ```dataに設定した変数を結合させてaxios.getでjsonファイルを取得しています filtersを使用することでunixTimeStampで取得した世界標準時間を日本時間に変換しています
まとめ
無料の範囲内で天気APIを使ってデータ取得して表示させることができました。 Vueのみであれば上記の形で大丈夫ですが、Laravel等を使用する場合はaxios.getの部分をサーバー側（api.php)で処理しないとうまく動かないので注意してください。同様の要領で他のAPIからもaxiosを使ってjsonを取得できると思います。