１０分でわかる：Vue.jsとaxios を利用した API の使用-初心者向け

##はじめに
皆さん、こんにちは！Webシステム開発エンジニアの蘭です！
今日は【Vue.jsとaxios を使って、APIからJson型データの取り扱い】について語りたいと思います。

※Vue.jsについて知りたい方こちらも見てください。
　　[１０分で基礎がわからるVue.js-入門](https://qiita.com/moyegogo1020/items/7cf9daaacc6bac1b3c33)

####やりたいこと：【APIで高機能なシングルページアプリケーション（SPA）を構築】
現在APIはWebアプリの開発にはデータのやり取りとして主な窓口となってます。そこで今回、高機能なシングルページアプリケーション（SPA）を構築したいと思い、フロントではVue.jsとaxiosを使用します。
>・シングルページアプリケーション（SPA）の構築-非同期
・APIでJson型データのやり取り
・Vueの単一ファイルコンポーネント（.vue）でhtml、css、Javascriptを単一ファイルで管理することで、後修正が便利。

####1.実行環境
>・vue.js
 ・axios

####2.やってみよう！
#####開発の際npmかyarnでvueとaxiosをインストールします。

```vue_npm_install.
npm install vue
```

```axios_npm_install.
npm install --save-dev axios
```

#####試しであれば、CDNで
・https://cdn.jsdelivr.net からVue.jsとaxiosを読み込みます。

```vue_cdn.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
```

```axios_cdn.
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
```

#####基本的な例
・以下の内容は[こちら](https://jp.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html)を引用

今回は[CoinDesk API](https://www.coindesk.com/api)を利用して Bitcoin の価格を表示します。
まずAPIの中身を見てみよう。

>`mount`ライフサイクルフックを利用し、`data`プロパティにaxiosで取得したJsonデータを格納します。

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="js,result" data-user="uramaya" data-slug-hash="pooJNOP" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue__axios_API">
  <span>See the Pen <a href="https://codepen.io/uramaya/pen/pooJNOP">
  Vue__axios_API</a> by Uramaya (<a href="https://codepen.io/uramaya">@uramaya</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

#####実例: データの操作
・API から取得したデータを表示

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="js,result" data-user="uramaya" data-slug-hash="WNNvomR" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue__axios_API２">
  <span>See the Pen <a href="https://codepen.io/uramaya/pen/WNNvomR">
  Vue__axios_API２</a> by Uramaya (<a href="https://codepen.io/uramaya">@uramaya</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

・API から取得したデータから必要な情報だけを表示
[filter](https://jp.vuejs.org/v2/guide/filters.html)を使用して小数点以下を2桁に整えます。
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="js,result" data-user="uramaya" data-slug-hash="WNNvoqp" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="WNNvoqp">
  <span>See the Pen <a href="https://codepen.io/uramaya/pen/WNNvoqp">
  WNNvoqp</a> by Uramaya (<a href="https://codepen.io/uramaya">@uramaya</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

・エラー処理
APIの取得にエラーが発生した場合、理由を把握します。
>よくあるエラー原因：
・API がダウンしている。
・リクエストが間違っている。
・API は予期した形式で情報を渡さなかった。

 axios コールでは、 catch を使用してエラー原因を取得します。

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="js,result" data-user="uramaya" data-slug-hash="VwwLPLZ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue__axios_API_Error">
  <span>See the Pen <a href="https://codepen.io/uramaya/pen/VwwLPLZ">
  Vue__axios_API_Error</a> by Uramaya (<a href="https://codepen.io/uramaya">@uramaya</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


#####axiosライブラリをもっと知る
現在REST APIでは以下の通信種類があります：
>・GET (参照)
・POST (登録)
・PUT (更新)
・DELETE (削除)

上記の例はGET (参照)ですが、登録や更新、削除の通信を行う場合は、以下の記事をご参考ください。
　　・[axiosライブラリを使ってリクエストする](https://qiita.com/reflet/items/d5658d5d69e8e1ccd489)


##おまけに
今回はaxiosを使いましたが、APIでJsonデータを取得する方法はaxiosだけではありません。他にVueではFetch APIというネイティブAPIがあります。
>Fetch API
・利点：外部リソースを読み込む必要がない。
・欠点： polyfill を使用する必要があり、全てのブラウザーでサポートされてるとは限りません。（特にIE）
[polyfill：JavaScriptのブラウザごとの互換性をポリフィル・Babelで解決する！](https://www.sejuku.net/blog/100946)

上記の原因でaxiosを好む方も多いようですね。

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="js,result" data-user="uramaya" data-slug-hash="ZEEGLWR" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue__axios_API_Fetch">
  <span>See the Pen <a href="https://codepen.io/uramaya/pen/ZEEGLWR">
  Vue__axios_API_Fetch</a> by Uramaya (<a href="https://codepen.io/uramaya">@uramaya</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

##まとめ
いかがでしょうか。
今回はVue.jsとaxiosの使用方法についての簡単な紹介をしました。
是非開発でも使ってみてください！:D