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

# はじめに
[Nuxt.js](https://ja.nuxtjs.org/)とは？
→Vue.js アプリケーションを構築するためのフレームワーク

[OpenWeatherMapApi](https://openweathermap.org/api)とは？
→無料で使える気象情報APIサービス

[Netlify](https://www.netlify.com/)とは？
→静的コンテンツのホスティングサービス

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


# Nuxt.jsで開発できる環境をつくる
#### ローカルの作業ディレクトリにnuxtアプリを作成する

```
npx create-nuxt-app 【アプリ名】
```
上記コマンドを打つと使うフレームワークやモジュールなどいくつかの項目について聞かれるので自分に適したように答えていきます
※ちなみに私は以下のように設定しました
<img width="682" alt="スクリーンショット 2019-12-03 3.30.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187558/a1d4f66a-0203-c28f-1642-0c96e0d5da17.png">

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

#### 作成したnuxtアプリを動かしてブラウザで確認する
```
npm run dev
```
コンソールにこんな感じのものが表示されます
<img width="377" alt="スクリーンショット 2019-12-03 3.31.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187558/dd787404-c9f8-acb9-377e-c2df2e4a747d.png">

http://localhost:3000/ を確認してみましょう！以下のようなNuxt.jsのデフォルトページが表示されていれば成功です
<img width="1075" alt="スクリーンショット 2019-12-03 3.34.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187558/30030c9a-972c-e3a8-3a9d-cdbd248fc198.png">


# OpenWeatherMapApiで気象情報を取得できるAPI KEYを発行する
#### OpenWeatherMapのwebサイトからアカウントを作成
https://home.openweathermap.org/users/sign_up
からemailアドレスなどを入力してロボットではないにチェックを入れアカウントを作成します
<img width="466" alt="スクリーンショット 2019-12-03 4.24.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187558/e00de096-8a6d-18d2-477c-fa48eed4a2eb.png">
︙
<img width="467" alt="スクリーンショット 2019-12-03 4.25.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187558/a258ecad-4ea3-42e5-0ca4-08fc9df9981c.png">

#### OpenWeatherMapのAPI KEYを確認
登録したメールアドレスにAPI KEYが記載されているメールが届きます
もしくはサイトのヘッダー下メニューの「API Keys」からkeyを確認できます
<img width="1110" alt="スクリーンショット 2019-12-03 4.28.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187558/d60e8443-7d2a-ade4-de68-ac76c10f531b.png">

# Nuxt.jsとOpenWeatherMapのAPI KEYを使って天気予報アプリを実装していく
#### axiosをinstallする
axiosはHTTPクライアントのライブラリでこれを使うとJSONの取得が簡単にでき、REST-APIを実行したいときなどに役立ちます
コンソールで下記コマンドを打ってinstallします

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

```json:package.json
{
  ...
  "dependencies": {
    "@nuxtjs/axios": "^5.8.0",
    ...
  },
  ...
}
```
※npm installには--no-saveや--save-devなどのoptionを設定できるので調べてみてください

#### トップページをつくる
アプリケーション名/pages/index.vueを以下のように書き変える

```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/ を確認するとこのような表示になります
<img width="421" alt="スクリーンショット 2019-12-04 2.12.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187558/f0131fb7-61bf-eca7-b12b-dd268202be9e.png">


#### リンク先(都道府県の詳細ページ)をつくる
↑のnuxt-linkで書いたリンク先のvueをつくっていく

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

```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などトップページからリンクにしている都道府県名】  にアクセスして表示を確認すると以下のようなデータが表示される
<img width="376" alt="スクリーンショット 2019-12-04 3.17.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187558/11d86ae0-eea5-b3fb-f60c-d15704f322fe.png">

↓の行で気象情報を提供している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に反映されているか確認してみる

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

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

```.env:.env
WEATHER_API_KEY = 【取得したopenweatherapiのapi key】
```

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

```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.【環境変数名】で環境変数に設定した値にアクセスできるのでそれを${}で囲って変数にして入れます

#### *ここまでで今回の開発工程はだいたい終わりです。共通Headerをcomponentに入れて呼び出してみたり天候情報を簡単に日本語化していたりはするので気になる人は[GitHub](https://github.com/ririson/foutlook)みてみてください！٩(๑´3｀๑)۶*


# Netlifyを使ってデプロイする
#### Netlifyのアカウントを作成する
##### 1. https://app.netlify.com/ にアクセスして自分のNetlifyアカウントを作成します

##### 2. github連携してwebサイトのデプロイ設定します
右上の「New site from Git」ボタンを押す
<img width="1314" alt="スクリーンショット 2019-12-08 17.56.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187558/2e44b4df-d6c8-f3f9-7369-c20159f89362.png">

連携するものを選ぶ(私の場合はGitHubなのでGiteHubを選択してすすめる)
<img width="1323" alt="スクリーンショット 2019-12-08 6.26.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187558/c0ceba2b-937f-ba0c-2c24-ca810d2e2d8a.png">

デプロイ対象のリポジトリを選ぶ
<img width="1322" alt="スクリーンショット 2019-12-08 6.26.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187558/252d72bb-5ba7-a4c2-8221-2c6af16f2ec7.png">

デプロイ対象のブランチとbuildコマンドと公開ディレクトリを設定する
<img width="1265" alt="スクリーンショット 2019-12-08 18.05.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187558/aa5fe340-48bc-91c7-32e7-bcf2141e90b6.png">

※私の場合は以下のように設定しました
・Build command →　nuxt generate
・Publish directory → dist

すると！こんな画面になります！



　　　　　　　(⌒◡⌒) { デプロイ中！！！！！！！！！！！！ }


<img width="1291" alt="スクリーンショット 2019-12-09 12.19.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187558/ff58e828-f2c9-3f04-378c-4a2c5f573318.png">

しばらく経つと「Site deploy in progress」という表示が代わりその上にURLが表示されるのでそこにアクセスすると作ったアプリがもう見れます！簡単...

ただし、このままではAPIを使ってデータを取得している部分がエラーになるはずです
なぜなら環境変数に入れたapi keyを読み込めていないからなので、Netlify側にapi keyを登録します

##### 3. Netlify側にapi keyを登録する

Site settingsページにアクセスし、「Build & deploy」→「Environment」の「Edit variables」ボタンを選択します
<img width="1316" alt="スクリーンショット 2019-12-08 17.29.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187558/435a11ef-eeb2-08d2-3d9c-3594c4724231.png">

その後keyにapi keyの名称、valueにapi keyを入力保存して完了！
あとはdeployしなおせば反映されます


ちなみに私が作ったのはこんな感じになりました！

[![Image from Gyazo](https://i.gyazo.com/2adc776bb8d03f72c75837f1a8ae824d.gif)](https://gyazo.com/2adc776bb8d03f72c75837f1a8ae824d)

公開したサイトとGitHubも興味ある方は見てみてください！

・実際に今回Netlifyで公開したサイト
https://tender-fermi-10e00c.netlify.com/
・該当のGitHubリポジトリ
https://github.com/ririson/foutlook

以上です！
初めて触ってみた〜という感じなので優しい目でみてください٩(๑´0`๑)۶