【Nuxt.js】axios導入編：かんたん・お手軽API通信

# 前置き

**API通信に便利なaxios！**
導入からデータ取得までの
簡単な流れを解説します🌟
(Firebase & Vuexやりたいのですが
1万字を越えたため整理中です🙇‍♀️💦)

**❓API
機能を共有できる仕組みです！**
例えばこんなことができます🎈
・amazonの商品データを引っ張ってきて
　売れ筋商品を把握する
・Google Mapsの地図を引っ張ってきて
　地図をカスタマイズする

自分で1から作らなくても、
既にあるものを利用できたら楽ですよね？🌟
それを叶えてくれるのがAPIです🤗

**❓axios**
HTTPクライアントライブラリです。
HTTP通信は
ブラウザとサーバーの
やり取りのことです！

ブラウザが
「これ表示してほしい！🙏」
ってサーバーにお願いして
表示してもらったり、
(GETメソッドのこと)

「このデータ預かっといて！🙏」
ってお願いしたら預かってもらったり。
(POSTメソッドのこと)

**axiosはjsonファイルでそれが可能です。
jsonファイルを取ってきたり
そこに追加したりできるもの**
と覚えておけばOKです♪

**❓APIとaxiosに何の関連が…**
APIがjsonファイルなんです。
つまりAPIデータを取ってきたり
そこに追加することが
axiosなら可能なんです❣️

というわけで
さっそく導入して
APIデータを取得しましょう♪

# Step1: axiosのインストール


axiosは最初からNuxtに入っているわけではないので
インストールが必要です🌟
https://ja.nuxtjs.org/guide/async-data/
https://axios.nuxtjs.org/


```bash:ターミナル
$ npm install --save @nuxtjs/axios
```

```nuxt.config.js
modules: [
  '@nuxtjs/axios',
],
axios: {}
```

```index.vue
<script>
import axios from 'axios'
</script>
```

# Step2: JSONplaceholderの確認

**❓JSONplaceholder**
お試しAPIです。
ダミーデータですが本格的にAPIを使う前に
動作確認ができるのでオススメです🌟
まずはここから始めましょう📚✨

https://jsonplaceholder.typicode.com/

各データはここに用意されています。

<img width="913" alt="スクリーンショット 2020-04-24 15.24.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/cbc5c80a-b4e6-8495-0493-d917f6dde058.png">

# step3: まずはそのまま取得

/postsのデータを取得してみましょう！
https://jsonplaceholder.typicode.com/posts

✅urlをクリックしてください💡
これがjsonファイルです👀

データの型が[{ }]となっていますね🧸💭
データを加工せずに取得だけしましょう。

【表示】
<img width="998" alt="スクリーンショット 2020-04-24 16.32.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/2058f6d5-7207-94c5-282b-62baab710cc4.png">

```index.vue
<template>
 <div class="page">
   <p>{{ posts }}</p>
 </div>
</template>

<script>
import axios from 'axios'

export default {
 data () {
   return {
     posts: [],
   }
 },
 mounted () {
   axios.get('https://jsonplaceholder.typicode.com/posts')
     .then((response) => this.posts = response)
 }
}
</script>
```

【解説】
mountedでgetしてきたresponseを
posts: [ ]に代入しています。
https://jsonplaceholder.typicode.com/posts
↑ここには表示されていませんが
取得した物にはこんな表示がありますね💡
**{ "data":  }**

# step4: 取得データの型を変更


step2で出てきた **{ "data":  }**
これはいらない部分です。
中身だけ表示させたいですね💡
更にv-forを使ってliで表示させたいです💡


【表示】
<img width="1092" alt="スクリーンショット 2020-04-22 16.17.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/929c2cea-252e-6952-0622-7a371c8b8828.png">

```index.vue
<template>
 <div class="page">
   <ul>
     <li v-for="post in posts" :key="post.id">
        {{ post }}
     </li>
   </ul>
 </div>
</template>

<script>
import axios from 'axios'

export default {
 data () {
   return {
     posts: [],
   }
 },
 mounted () {
   axios.get('https://jsonplaceholder.typicode.com/posts')
     .then((response) => this.posts = response.data)
 }
}
</script>
```

【解説】
・**{ "data":  }** をなくすために
　resoponse.dataに書き換える

✅あとはこの中の
　表示させたいdataだけを指定する
　{{ post.title}} とか🐠

【表示】
<img width="677" alt="スクリーンショット 2020-04-22 16.19.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/38ffa9cf-f452-fdbe-ddbe-611933eae986.png">

```index.vue
<template>
 <div class="page">
   <ul>
     <li v-for="post in posts" :key=post.id>
        {{ post.title }}
     </li>
   </ul>
 </div>
</template>

<script>
import axios from 'axios'

export default {
 data () {
   return {
     posts: [],
   }
 },
 mounted () {
   axios.get('https://jsonplaceholder.typicode.com/posts')
     .then((response) => this.posts = response.data)
 }
}
</script>
```

# step5: queryを使って取得

今度は/posts/1を取得してみましょう！
https://jsonplaceholder.typicode.com/posts/1

✅urlをクリックしてください💡
/postsに沢山あったオブジェクトが
1つになりましたね！
paramsによってidやtitleなどを
変えられるパターンです。
試しにurlの1を100までの
好きな数字に変えてみてください♪

**❓params, query**
基礎編をご覧ください😄
https://note.com/aliz/n/ndf76ebe9853b#Qdde8


【表示】
<img width="589" alt="スクリーンショット 2020-04-22 17.20.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/d94d58cb-1915-0f31-0584-ac4ffb4f9494.png">

```_id.vue
<template>
 <div class="page">
   <ul>
     <li v-for="post in posts" :key=post.id>
       {{ post.title }}
     </li>
   </ul>
 </div>
</template>

<script>
import axios from 'axios'

export default {
 data () {
   return {
     posts: [],
   }
 },
 mounted () {
   axios.get('https://jsonplaceholder.typicode.com/posts/' + this.$route.params.id)
     .then((response) => this.posts = response)
 }
}
</script>
```

【解説】
・index.vueではなく_id.vueに記載
　→JSONplaceholderで好きな数字を入力したように
　　自ファイルでもそれを可能にするため
・this.$route.params.idで
　ローカルで好きな数字を入力
　→それに合わせて取得urlが変化
　　https://jsonplaceholder.typicode.com/posts/{好きな数字}
・response.dataにする必要なし
　→jsonのオブジェクトが1つのため不要

# 非同期でやるには？

asyncDataを使います！
が、長くなるのでまた別記事か
続きを出そうかと思っております🌟

# 次回
Firebase & Vuex😀
公開予定日は5/1(金)です。
🌟が、5/2(土)から
**noteにて有料販売とさせていただきます！**
前置きでも書いたように
1万字を越えるボリューム…
とっっても濃い内容なので
ぜひご覧ください❤️

**記事が公開したときにわかる様、
twitter, noteのフォローをお願いします😀**
🍒twitter
https://twitter.com/aLizlab
🍒note
https://note.com/aliz