YouTubeAPIを使用するハンズオン (TypeScript)

今回やること

• google cloudからAPI KEYを作成
• 公式サイトからサクッとAPIリクエストのURLを取得する
• 自身の環境でAPIを叩く

具体を下で解説していきます。
公式サイトの「最初の準備」のドキュメントも貼っておきます。
https://developers.google.com/youtube/v3/getting-started?hl=ja#before-you-start

google cloudからAPI KEYを作成

YouTubeDataAPIはAPI_KEY使用してリクエストします。
OAuth 2.0で認証する方法もありますが、今回はAPI KEYにします。
API KEY(=認証情報)を取得していきます。

google cloudのアカウントを作成し、画面上部の検索から「APIとサービス」を検索し選択します。

YouTube Data API v3を選択します

「認証情報の作成」を押下します。

基本そのままで完了を押下で大丈夫です。

完了を押すと遷移後の画面でAPI_KEYを取得できます。
このAPI_KEYは後からでも閲覧可能です。

公式サイトからサクッとAPIリクエストのURLを取得する

今回は人気の動画を取得していこうと思います。
YouTube Data APIのサイトからAPIリクエスト用のURLを取得します。
サイトは以下です。
https://developers.google.com/youtube/v3/docs?hl=ja

左のサイドメニューから動画を選択し、「list (most popular videos)」を押下すると右のインプットに必要なプロパティがセットされます。
これでURLが作成された状態です。

executeするとレスポンスが返ってきます。

画面を拡大するとHTTP等でURLが取得できるのでコピーします。

TypeScriptでリクエストしてみる

import axios from "axios"

const API_KEY = 'xxxxxxxx'
const BASE_URL = `https://youtube.googleapis.com/youtube/v3/videos`

const getVideos = async () => {
  const res = await axios.get(BASE_URL, {
    params: {
      part:'snippet,contentDetails,statistics',
      chart: 'mostPopular',
      regionCode: 'JP',
      key: API_KEY
    }
  })
  console.log(res);
  
}

getVideos()

こんな感じでいけます。

最後に

google cloudのライブラリとして認証を通せるのを今回初めて知れました。
UIでサクッと認証作れるので非常に楽でした。

参考になれば幸いです。