ReactとYouTubeAPIでクローンアプリを作成してみた

月に一度社内で開発合宿を行っています。（自由に好きなものを開発、勉強してOK！）
今回私はReact、YouTubeAPIを使いYouTubeのクローンアプリを作成しました。

作ったものを軽くご紹介しつつ、YouTubeAPIの使い方を簡単にご説明します。


<h2>完成版</h2>
![スクリーンショット 2020-08-15 18.49.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578913/fa5f32c5-b741-beb3-aa6b-a5754206b1f2.png)


<h2>できること</h2>
　・動画一覧表示
　・動画再生
　・概要欄表示
　・関連動画の表示
　・検索

<h2>YouTubeAPI登録方法</h2>
<h3>１）　Googleアカウントを用意</h3>
<h3>２）　プロジェクトを作成</h3>
　<a href="https://console.developers.google.com/apis/credentials?hl=ja"> Credentials page</a>からプロジェクトを作成します。
![スクリーンショット 2020-08-15 19.06.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578913/dcbe12e3-6ea9-ba6c-fcc4-62083c6edb05.png)

　プロジェクト名は任意の名前を付けます。
![スクリーンショット 2020-08-15 19.26.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578913/9a1ce6f3-8816-3e44-df59-58f3dffdca9e.png)

<h3>3）　APIを選択</h3>
　まず、「APIとサービスを有効化」をクリック
![スクリーンショット 2020-08-15 19.04.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578913/27c5d388-a6ea-2111-6366-5d3e831b413c.png)


　APIを選択し有効化します。（YouTube Data API　v３を使いました）
　![スクリーンショット 2020-08-15 19.03.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578913/6dbd6071-83af-c4c1-f980-f91514f19c06.png)

![スクリーンショット 2020-08-15 19.19.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578913/6d1922d3-d2f2-02e1-3a3d-3893299fcbe7.png)


<h3>4）　認証情報を作成</h3>
　「認証情報を作成」をクリック
![スクリーンショット 2020-08-15 19.06.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578913/340e50c7-cfc0-21de-a4da-632d54cfd019.png)

　使用するAPI(YouTube Data API v3)、
　APIを呼び出す場所(今回Reactで使うのでウェブブラウザ(Java Script) )、
　アクセスするデータの種類（一般公開データ）　を選択します。

![スクリーンショット 2020-08-15 19.31.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578913/4cfe108d-5283-0e6e-346a-adb624da7d77.png)

<h3>5）　APIキーをコピー</h3>
　最後にAPIキーが生成されるので、そちらをコピーして完了です。


<h2>YouTubeAPI設定方法</h2>
axiosを使いAPI通信を実装しました。
（axiosの導入方法は<a href="https://qiita.com/ksh-fthr/items/2daaaf3a15c4c11956e9">こちら</a>を参考にしました）


```react:index.js
import axios from 'axios'

const KEY = 'APIキー'

const youtube = axios.create({
  baseURL: 'https://www.googleapis.com/youtube/v3'
})

const fetchPopularData = async() => {
  return await youtube.get('/videos', {
    params: {
        part: 'snippet',
        maxResults: 40,
        key: KEY,
        regionCode: 'JP',
        type: 'video',
        chart: 'mostPopular'
    }
  })
}
```

baseURLは<a href="https://developers.google.com/youtube/v3/docs/videos/list?hl=ja">こちら</a>のHTTPリクエストを参照します。

今回は取得する情報毎に処理関数を分けたかったので、共通する箇所(〜v3まで)までをbaseURLとして変数に格納しました。

```react
const youtube = axios.create({
  baseURL: 'https://www.googleapis.com/youtube/v3'
})
```


取得する情報(params）は、上と<a href="https://developers.google.com/youtube/v3/docs/videos/list?hl=ja">同じページ</a>のパラメーターを参考にします。

```react
const fetchPopularData = async() => {
  return await youtube.get('/videos', {
    params: {
        part: 'snippet',
        maxResults: 40,
        key: KEY,
        regionCode: 'JP',
        type: 'video',
        chart: 'mostPopular'
    }
  })
}
```

<h2>まとめ</h2>
今回は主にAPI周りに触れましたが、その他以下のような実装方法を採用しました。

- APIで取得した情報は一度Storeに保存
- useContextやuseEffectを使い、ページ読み込み時にデータを再取得（古いデータを書換え）
- Header、VideoItem、SideItemなど、部品毎にComponentに分ける


APIを使うと簡単にそれなりのモノができてしまうので、本当に便利ですね。
他にも色々なAPIがあるので、また試してみたいと思います。