More than 5 years have passed since last update.

RUNTEQAdvent Calendar 2019

@ririson_jp

【初心者】Nuxt.js+OpenWeatherMapApi+Netlifyで天気予報アプリをつくってみた

Posted at 2019-12-09

はじめに

Nuxt.jsとは？
→Vue.js アプリケーションを構築するためのフレームワーク

OpenWeatherMapApiとは？
→無料で使える気象情報APIサービス

Netlifyとは？
→静的コンテンツのホスティングサービス

今回はこれらを使って簡単な天気予報アプリケーションを開発した
実はすべて初触りだが RUNTEQ Advent Calendar 2019 の9日枠を担当するということでせっかくなのでチェレンジしてみた！

Nuxt.jsで開発できる環境をつくる

ローカルの作業ディレクトリにnuxtアプリを作成する

npx create-nuxt-app 【アプリ名】

上記コマンドを打つと使うフレームワークやモジュールなどいくつかの項目について聞かれるので自分に適したように答えていきます
※ちなみに私は以下のように設定しました

Successfully created project 【アプリ名】と表示されたらNuxt.jsのプロジェクトを無事作成完了！

作成したnuxtアプリを動かしてブラウザで確認する

npm run dev

コンソールにこんな感じのものが表示されます

http://localhost:3000/ を確認してみましょう！以下のようなNuxt.jsのデフォルトページが表示されていれば成功です

OpenWeatherMapApiで気象情報を取得できるAPI KEYを発行する

OpenWeatherMapのwebサイトからアカウントを作成

https://home.openweathermap.org/users/sign_up
からemailアドレスなどを入力してロボットではないにチェックを入れアカウントを作成します

︙

OpenWeatherMapのAPI KEYを確認

登録したメールアドレスにAPI KEYが記載されているメールが届きます
もしくはサイトのヘッダー下メニューの「API Keys」からkeyを確認できます

Nuxt.jsとOpenWeatherMapのAPI KEYを使って天気予報アプリを実装していく

axiosをinstallする

axiosはHTTPクライアントのライブラリでこれを使うとJSONの取得が簡単にでき、REST-APIを実行したいときなどに役立ちます
コンソールで下記コマンドを打ってinstallします

npm install @nuxtjs/axios

npm installしたものはpackage.jsonのdependenciesにこのような感じで反映される

package.json

{
  ...
  "dependencies": {
    "@nuxtjs/axios": "^5.8.0",
    ...
  },
  ...
}

※npm installには--no-saveや--save-devなどのoptionを設定できるので調べてみてください

トップページをつくる

アプリケーション名/pages/index.vueを以下のように書き変える

/pages/index.vue

<template>
  <div>
    <Header></Header>
    <section id="city-lists" class="section">
      <div class="container">
        <h1>日本全国の天気</h1>
        <ul>
          <li><nuxt-link :to="`city/tokyo`">東京</nuxt-link></li>
          <li><nuxt-link :to="`city/osaka`">大阪</nuxt-link></li>
          <li><nuxt-link :to="`city/fukuoka`">福岡</nuxt-link></li>
        </ul>
      </div>
    </section>
  </div>
</template>

<script>
</script>

<style scoped>
</style>

ブラウザで http://localhost:3000/ を確認するとこのような表示になります

リンク先(都道府県の詳細ページ)をつくる

↑のnuxt-linkで書いたリンク先のvueをつくっていく

アプリケーション名/pages/city/_name.vueを作成して以下のように書く

/pages/city/_name.vue

<template>
	<div>
		<section id="city-lists" class="section">
      		<div class="container">
				<ul>
					<li>天気：{{item.weather[0].main}}</li>
					<li>
						<img :src="'https://openweathermap.org/img/w/'+item.weather[0].icon+'.png'" />
					</li>
					<li>温度：{{item.main.temp}}℃</li>
					<li>湿度：{{item.main.humidity}}％</li>
					<li>風速：{{item.wind.speed}}m</li>
				</ul>
      		</div>
		</section>
	</div>
</template>

<script>
export default {
    async asyncData({route, app, error}) {
        try {
            const item = await app.$axios.$get(`https://api.openweathermap.org/data/2.5/weather?q=${route.params.name},jp&units=metric&lang=ja&appid=【取得したopenweatherapiのapi key】`)
            return {
                item
            }
        } catch (err) {
            error({
                statusCode: err.response.status,
                message: err.response.data.message,
            });
        }
    }
}
</script>

<style scoped>
</style>

【取得したopenweatherapiのapi key】には前の工程で取得したopenweatherapiのapi keyを入れます
※api keyをここに入れた状態でgithubなどにあげないこと！後の工程で環境変数に登録します

ブラウザで http://localhost:3000/city/【tokyoなどトップページからリンクにしている都道府県名】にアクセスして表示を確認すると以下のようなデータが表示される

↓の行で気象情報を提供しているopenweatherapiにアクセスしてitemで中身を取り出して表示している

const item = await app.$axios.$get(`https://api.openweathermap.org/data/2.5/weather?q=${route.params.name},jp&units=metric&lang=ja&appid=【取得したopenweatherapiのapi key】`)

api keyを環境変数に入れる

apiをたたいて気象情報が取得できていることを確認したら忘れないうちにapi keyを環境変数に入れます

1. axiosをinstallしたときと同様、dotenvをnpm installする

dotenvは環境変数を参照するために使えるライブラリ

npm install @nuxtjs/dotenv

installしたらpackage.jsonに反映されているか確認してみる

package.json

{
  ...
  "dependencies": {
    "@nuxtjs/dotenv": "^1.4.1",
    ...
  },
  ...
}

2. アプリケーション名/に.envファイルを作成してapi keyを書く

.env

WEATHER_API_KEY = 【取得したopenweatherapiのapi key】

3. アプリケーション名/nuxt.config.jsに以下を追記

nuxt.config.js


require('dotenv').config();
const { WEATHER_API_KEY } = process.env;

export default {
  ...
  env: {
    WEATHER_API_KEY
  }
}

これで.envに書いたapi keyを【process.env.WEATHER_API_KEY】で呼び出せるようになった
※.gitignoreに.envが記述されていることを確認します！せっかく隠したのに.envをgithubにあげたら意味ないので...

4. 先程書いたAPIにアクセスしている部分のapi keyを環境変数名に書き換える

先程の

const item = await app.$axios.$get(`https://api.openweathermap.org/data/2.5/weather?q=${route.params.name},jp&units=metric&lang=ja&appid=【取得したopenweatherapiのapi key】`)

内の【取得したopenweatherapiのapi key】に記述していたapi key部分に以下のように環境変数名を入れて書き換えます(この記事ではWEATHER_API_KEYとしています)

const item = await app.$axios.$get(`https://api.openweathermap.org/data/2.5/weather?q=${route.params.name},jp&units=metric&lang=ja&appid=${process.env.WEATHER_API_KEY}`)

※process.env.【環境変数名】で環境変数に設定した値にアクセスできるのでそれを${}で囲って変数にして入れます