Help us understand the problem. What is going on with this article?

nuxt.jsでお天気アプリを作ってみた

More than 1 year has passed since last update.

Nuxt.jsを初めて触ってアプリを制作してみたので、学んだことをメモしていきたいと思います。

今回製作したお天気アプリ

さっそくですが、今回作成したアプリは下記になります。
https://relaxed-mcclintock-e42601.netlify.com/

※Nuxt.jsを試しに触ってみたいという気持ちで制作したので、見た目も機能もとても簡素です。

天気アプリのAPIを準備

スクリーンショット 2018-11-29 22.40.26.png

今回は天気アプリ作成にopenWeatherMapという無料のAPIを利用します。アプリ作成の下準備として、下記サイトからサインインしてAPIkeyを取得しておきます。
https://openweathermap.org/

Nuxt.jsをテンプレートをインストール

ここからは実際にNuxt.jsでのアプリ制作。まずは基本テンプレートを以下のvue-cliコマンドで生成。

$ vue init nuxt-community/starter-template my-vue-app

下記のようなフォルダ構成のテンプレートがインストールされます。

├── assets
├── components
├── layouts
├── middleware
├── pages
├── plugins
├── static
├── store
├── README.md
├── nuxt.config.js
└── package.json

アプリ制作に使うフォルダとファイルを追加

今回制作するのはpages内のみです。
pagesにcityディレクトリを作成しその中に_name.vueというファイルを追加。

pages
├── index.vue
├── city ── _name.vue 

index.vueの記述

index.vueの記述。こちらはとてもシンプルで、各都市のリンクをlist形式で記述。

<template>
<div>
  <h1>日本全国の天気</h1>
  <ul>
    <li><nuxt-link :to="`/city/sapporo`">札幌</nuxt-link></li>
    <li><nuxt-link :to="`city/tokyo`">東京</nuxt-link></li>
    <li><nuxt-link :to="`city/nagoya`">名古屋</nuxt-link></li>
    <li><nuxt-link :to="`city/osaka`">大阪</nuxt-link></li>
    <li><nuxt-link :to="`city/fukuoka`">福岡</nuxt-link></li>
  </ul>
</div>
</template>

Nuxt.jsはpagesディレクトリ内のVueファイルの木構造に沿って、自動的にvue-routerの設定を生成してくれるので便利です。

_name.vueの記述

次は_name.vueの記述。Nuxt.jsでは_name.vueのようなファイルを作った場合、 _(アンダーバー)以降の名前をプロパティ名と認識して、自動的に受け取った文字列をparamsへと代入するようになっています。

受け取った都市名の文字列をAPIのクエリパラメータに代入し、リクエストを送れば、動的に指定した場所の天気情報を取得することができます。

<template>
<div>
  <h1>{{item.name}}の天気情報</h1>
  <ul>
    <li>天気:{{item.weather[0].main}}</li>
    <li>温度:{{item.main.temp}}</li>
    <li>湿度:{{item.main.humidity}}</li>
    <li>風速:{{item.wind.speed}}m</li>
  </ul>
  <nuxt-link to="/">トップに戻る</nuxt-link>
</div>
</template>

<script>
export default{
  async asyncData({route, app}) {
    const item = await app.$axios.$get(`https://api.openweathermap.org/data/2.5/weather?q=${route.params.name},jp&units=metric&appid=取得したAPIkey`)
    return {
      item
    }
  }
}
</script>

あとは、取得したJSONデータから必要な情報を使って、表示したい情報をマークアップすれば簡単なお天気アプリの完成です。

まとめ

Nuxt.jsの入門ということで簡単なお天気アプリを作成してみました。

Nuxt.jsは開発環境を自分で整える必要がなく、制作に集中することが出来るので触ってみてとても便利だと感じました。

まだまだ豊富な機能の一部を使っただけですので、様々な種類のアプリ制作を通して理解を深めていければと思います。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away