【Vue.js】YouTube Data APIをaxiosで取得し表示するサンプル（Firebase・Vue CLI v4.0.4）

環境メモ
⭐️Mac OS Mojave バージョン10.14
⭐️Firebase Hosting
⭐️Vue CLI v4.0.4

YouTube Data APIをaxiosで取得し表示するサンプル
Firebase HostingとVue CLI v4.0.4を使います。

↓↓実際に動かしてみた動画
https://twitter.com/nonnonkapibara/status/1185956946630692864
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">🎬Vue.js🎬<br>YouTubeの動画🎀APIリクエスト一覧表示🎀サンプル<br>作ってみたよぉ。<br>Vue CLI（v4.0.4） Vue.jsのaxiosでAPI通信🌏して、Firebase(FirebaseHosting) にデプロイ💡💡<br>ちゃんと動いたよぉ😍<a href="https://t.co/y7hw3zHRlI">https://t.co/y7hw3zHRlI</a><a href="https://twitter.com/hashtag/Vue?src=hash&amp;ref_src=twsrc%5Etfw">#Vue</a> <a href="https://twitter.com/hashtag/vuejs?src=hash&amp;ref_src=twsrc%5Etfw">#vuejs</a> <a href="https://twitter.com/hashtag/firebase?src=hash&amp;ref_src=twsrc%5Etfw">#firebase</a> <a href="https://t.co/C5zCM6n78R">pic.twitter.com/C5zCM6n78R</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1185956946630692864?ref_src=twsrc%5Etfw">October 20, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


先に、YouTube　APIを取得する。
詳細は下記に記載してます。

【Vue.js】Vue.jsで使う為のYouTube動画検索「YouTube Data API v3」のAPIキー取得
https://qiita.com/nonkapibara/items/591cdb2ab9aea7ea55b9


プロジェクトを作成する。詳細は、下記に記載しています。

【Vue.js】FirebaseプロジェクトでVue CLI v4.0.4を作成する（Firebase・Vue CLI v4.0.4）
https://qiita.com/nonkapibara/items/6146106c524b652f49db


## ファイル構成

<img width="389" alt="スクリーンショット 2019-10-21 0.51.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/4398f688-7809-eaa0-da4e-957928484ffc.png">

## ①App.vue
TOPページの上のリンクに「Search Video」を追加する
<img width="551" alt="スクリーンショット 2019-10-21 0.53.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/743a365d-4aff-a8b5-0c4a-56ebf7e04720.png">


```
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/video">Search Video</router-link>
    </div>
    <router-view/>
  </div>
</template>
```

<img width="692" alt="スクリーンショット 2019-10-21 0.56.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/89315215-e249-e5c7-aa20-9b9c40ac61ab.png">


## ②components　-  SearchVideo.vue

「YouTube Search list (Vue.js CLI)」のページ
<img width="814" alt="スクリーンショット 2019-10-21 0.59.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/ce31e43a-d52e-7ab7-5c04-541f997b72c1.png">


```
<template>
<div>
  <div><font size="6" color="#c71585">YouTube Search list (Vue.js CLI)</font></div>
  <br>
  <input size="40" v-model="keyword" placeholder="検索キーワードを入力">
  <button @click="search_video">検索</button>
  <table cellspacing="0" cellpadding="5" v-show="results">
    <tr>
      <th width="50">
        <font>No</font>
      </th>
      <th width="200">
        <font>Video</font>
      </th>
      <th width="700">
        <font>Contents</font>
      </th>
    </tr>

    <tr v-for="(movie, index) in results" v-bind:key="movie.id.videoId">
      <!-- No -->
      <td valign="top" width="50">{{ index + 1 }}</td>
      <!-- Video -->
      <td valign="top" width="300">
        <a v-bind:href="'https://www.youtube.com/watch?v=' + movie.id.videoId">
          <img width="300" height="200" v-bind:src="movie.snippet.thumbnails.medium.url">
        </a>
      </td>
     <!-- titleとdescription -->
      <td align="left" valign="top" width="700">
        <font size="5" color="#c71585"><b>{{ movie.snippet.title }}</b></font>
        <br>
        {{ movie.snippet.description}}</td>
    </tr>
  </table>
</div>
</template>

<script>
import axios from 'axios';

export default {
  name: "SearchVideo",
  data: function() {
    return {
      results: null,
      keyword: "nonkapibara",
      order: "viewCount", // リソースを再生回数の多い順に並べます。
      params: {
        q: "", // 検索クエリを指定します。
        part: "snippet",
        type: "video",
        maxResults: "20", // 最大検索数
        key: "★★★★★KEYをここに入れる★★★★★"
      }
    };
  },
  props: {
    msg: String
  },
  methods: {
    search_video: function() {
      this.params.q = this.keyword;
      var self = this;
      axios
        .get("https://www.googleapis.com/youtube/v3/search", {
          params: this.params
        })
        .then(function(res) {
          self.results = res.data.items;
        })
    }
  }
};
</script>

<style>

table {
  border-collapse: collapse;
  border: solid 2px #c71585;/*表全体を線で囲う*/
}
table th {
  color: #fff0f5;/*文字色*/
  background: #ff69b4;/*背景色*/
  border: dashed 1px #c71585;
}

table td {
  background: #fff0f5;
  border: dashed 1px #c71585;
}

</style>

```


## ③ router - index.js

```
  {
    path: '/video',
    name: 'video',
    component: () => import('../views/Video.vue')
  }
```
<img width="679" alt="スクリーンショット 2019-10-21 1.04.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/8546a4bc-315d-ebfb-f840-797ac3063aed.png">

## ④ views - Video.vue
<img width="616" alt="スクリーンショット 2019-10-21 1.07.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/5f689b23-54eb-d8d7-11c4-37d1c6f4589d.png">

```
<template>
  <div class="app">
    <SearchVideo/>
  </div>
</template>

<script>
import SearchVideo from '@/components/SearchVideo.vue'

export default {
  name: 'app',
  components: {
    SearchVideo
  }
}
</script>

```

完成！！