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

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

完成版

![スクリーンショット 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)

できること

　・動画一覧表示　・動画再生　・概要欄表示　・関連動画の表示　・検索

YouTubeAPI登録方法

１）　Googleアカウントを用意

２）　プロジェクトを作成

　 Credentials pageからプロジェクトを作成します。 ![スクリーンショット 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)

　プロジェクト名は任意の名前を付けます。

3）　APIを選択

　まず、「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３を使いました）
　

4）　認証情報を作成

　「認証情報を作成」をクリック ![スクリーンショット 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) )、
　アクセスするデータの種類（一般公開データ）　を選択します。

5）　APIキーをコピー

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

YouTubeAPI設定方法

axiosを使いAPI通信を実装しました。（axiosの導入方法はこちらを参考にしました）

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はこちらのHTTPリクエストを参照します。

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

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

取得する情報(params）は、上と同じページのパラメーターを参考にします。

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

まとめ

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

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

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

完成版

できること

YouTubeAPI登録方法

１） Googleアカウントを用意

２） プロジェクトを作成

3） APIを選択

4） 認証情報を作成