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

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

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

完成版

できること

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

YouTubeAPI登録方法

１）　Googleアカウントを用意

２）　プロジェクトを作成

　 Credentials pageからプロジェクトを作成します。

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

3）　APIを選択

　まず、「APIとサービスを有効化」をクリック

　APIを選択し有効化します。（YouTube Data API　v３を使いました）
　

4）　認証情報を作成

　「認証情報を作成」をクリック

　使用する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があるので、また試してみたいと思います。