【Vue/Nuxt】-コンポーネント編- 天気APIを使って一通りフロントを実装してみる - Qiita
前提条件 【Vue/Nuxt】-Vuex編- 天気APIを使って一通りフロントを実装してみる 上記記事にて天気APIのデータを取得済み 見える側を作っていく！ 前回の続き ForcastCard というコンポーネントを作ってみました。 イメージはこんな感じ。 <template> <section class="weather"> <h1 class="weather__title">{{ weather.title }}</h1> <ForcastCard v-for="(forecast, i) in weather.forecasts" :forecast="forecast" :key="`weather__forcasts-key-${i}`"/> </section> </template> <script> import ForcastCard from '~/compone
【Vue/Nuxt】-Vuex編- 天気APIを使って一通りフロントを実装してみる - Qiita
はじめに 天気APIを例に、自分が理解しにくかったVuex・テスト（jest）をメインに解説したいと思います。 単体の記事（Vuexだけとか）は良いものがたくさんあるので、一通り実装すると、こんなコードになるよー。というサンプル感を意識しました👍 環境 nuxt : 2.0.0 @vue/test-utils: 1.0.0-beta.26 vue-jest : 3.0.0 vuex-map-fields : 1.3.1 lodash : 4.17.11 axios : 0.18.0 目指すところ livedoorのお天気WebサービスAPI「Weather Hacks」を使って天気を取得 （http://weather.livedoor.com/weather_hacks/webservice ） 取得したデータをストア（Vuex）で管理 「今日」「晴れのち雨」「画像」部分をコンポーネン
【Vue/Nuxt】-テスト編（ストア）- 天気APIを使って一通りフロントを実装してみる - Qiita
前提条件 【Vue/Nuxt】-Vuex編- 天気APIを使って一通りフロントを実装してみる 上記記事にて天気APIのデータを取得済み 【Vue/Nuxt】-コンポーネント編- 天気APIを使って一通りフロントを実装してみる 上記記事にてコンポーネント、画面完成 【Vue/Nuxt】-テスト編（コンポーネント）- 天気APIを使って一通りフロントを実装してみる 上記記事にてコンポーネントのテスト完成 ストアのテストを書いてみる 前回 コンポーネントテストを書いた時 にprops-template.jsを用意したように payloadStub にモックのJSONを書いてあげます。 import { createLocalVue } from '@vue/test-utils'; import Vuex from 'vuex'; import { cloneDeep } from 'lodas
天気情報を取得する - Qiita
天気情報を取得できるAPIはたくさんありますが、 今回は、OpenWeatherMap - actual and forecast weatherという無料サービスを使って、天気情報をjsonで取得します。 都市名で取得する http://api.openweathermap.org/data/2.5/weather?q="都市名","国" //例 http://api.openweathermap.org/data/2.5/weather?q=Tokyo,jp http://api.openweathermap.org/data/2.5/weather?lat="緯度"&lon="経度" //例 http://api.openweathermap.org/data/2.5/weather?lat=35&lon=140 { "base": "cmc stations", "clouds":
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
