【個人開発】1ヶ月でYoutubeから需要のある動画だけを検索できるツールを開発しました！【Next.js, Youtube Data API】

# はじめに
Youtubeから需要のある動画のみを取得できるアプリケーションを作ったので、開発背景や気づき、今後の展望等色々書いていこうと思います。

![Add a subheading.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3279945/0b80c708-f3c3-44bd-b8c3-32f075c37ec7.png)


# 開発背景
自分の所属しているコミュニティの代表の方がYoutubeでReactやNext.jsを用いたハンズオン動画を定期的に投稿されており、Youtubeから需要のある動画を検索できるツールが欲しいとのことで少し調べたところ、Youtube Data API V3で最低限の部分は比較的すぐに作れそうだと思い開発に至りました。すでに似たようなツールはあるのですが、月額5万くらいするみたいです。

:::note info
そもそも需要のある動画とは？
Youtubeではチャンネル登録者数の3倍以上の再生数を持つ動画は需要のある動画と言われています。
:::

ちなみにコミュニティのYoutubeチャンネルはこちらです

https://www.youtube.com/@Sicut_study

# 機能一覧
### 需要のある動画を検索できる
検索するとチャンネル登録者数の3倍以上の再生数を持つ動画のみが表示されます。これにより需要のある動画を探すことができます。

![スクリーンショット 2025-04-27 0.13.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3279945/bb0b8256-e987-449c-809b-bd9c34125eb3.png)


### 並べ替え機能
需要のある動画の中から目的にあった動画を効率的に探せるよう倍率(再生数/登録者数)やいいね順などで動画をソートできます。

![スクリーンショット 2025-04-27 9.48.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3279945/098fc1ea-f19a-434f-bfb3-7615b4e04821.png)

### CSVダウンロードできる機能
画像にも少し写ってますがCSVでダウンロードできます。動画の情報を保存しておいて後で見返したい時に使えると思います。ダウンロードすると以下のような形式のファイルを取得できます。

![スクリーンショット 2025-04-27 13.36.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3279945/95b3f177-7cb9-49ed-8ef8-1d6f06e74a84.png)


### その他
ちなみにこのような調査は隙間時間にやることが多いそうなので、スマホサイズにも対応してあります。またYoutube apiの仕様上一度に検索できる動画の数は決まっているので「もっと見る」で追加検索できるようにもしています。
<div style="display: flex; justify-content: space-around;">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3279945/3dd42ab7-785f-4541-aea1-d85811cf6a21.png"  width="49%">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3279945/d1aa8b88-c39e-4660-bb4f-78d266481e06.png"  width="49%">
</div>


# 使った技術
なるべく早く形にしたかったので、route hundlerでapiも作れるNext.jsをメインに開発しました。youtubeのapiは初めて使ったのですが、ドキュメントが整ってるのとググれば使い方がたくさん出てくるので使いやすいと思いました。今回は使ってませんがreact-youtubeというライブラリを使えばいい感じに動画を表示できるみたいです。
- next.js
- daisyui
- motion
- papaparse
- vercel
- github actions
- youtube data api v3

# 実装で工夫した箇所
YoutubeのAPIはデフォルトで1日に10000ユニットと叩ける量が決まっており、1回の検索につき100ユニット、1つの動画とチャンネル情報を取得するごとにそれぞれ1ユニット消費します。最初に自分が行っていた実装では検索キーワードから全ての動画を取得した後に、動画を1つ1つループしながら動画idとチャンネルのidを渡してリクエストを送っていたので、1回の検索につき最大200のユニットを消費する状態になっていました。(1回の検索で取得できる動画の最大値が50件なので100(検索)+50(動画情報)+50(チャンネル情報)=200)
これだと1日に最大50回しか検索できない状態だったので少し調べたところ、リクエストの際は取得した動画のidとチャンネルidをまとめて送れることがわかったのでこれらをあらかじめ取得してまとめてリクエストを送ることで、1回の検索につき固定で102のユニットのみ消費されるようにすることができました。(100(検索)+1(動画情報をまとめて取得)+1(チャンネル情報をまとめて取得)=102)
これで1日あたり100回近く検索できるようになり、元の実装の半分ほどのユニット消費に抑えることができました。


# 気づき
### ドメイン知識大事
今回は少額の報酬をいただき実際にフィードバックをもらいながら開発を行ったのですが、やはりアプリを使うタイミングや必要な機能、欲しい情報や競合等を把握していないと使ってもらえるものを作るのは難しいと感じました。今回は詳しい方からフィードバックをもらえる環境があったので良かったですが、作ろうとしている物のドメインキャッチアップは必須だと感じました。

### 作り続ける
自分は割とまとまった時間で一気に作業するタイプなのですが、今回は定期的にフィードバックをいただいていたのもあり1日最低1コミットを目安に改善し続けるのを意識しました。素早くリリースすることで素早く反応をもらえて改善できるで毎日少しでも進捗を出すのが大事だと思いました。


# 今後の展望
コミュニティの方に実際に使ってもらい、ちゃんと作ればマネタイズもできそうとのことだったので今後はそこを目指して作っていきたいです。また字幕テキストの取得や動画の手動フィルタリング等実装できてない部分がまだあるのでその辺りの機能追加も行っていきます。ちなみにYoutube Data APIの利用枠はGoogleに上限申請できるみたいなので開発と並行して申請予定です。

# おわりに
実際に誰かに使ってもらってフィードバック得て開発するのは初めてだったのでとても良い経験になりました。今後は時間だけでなく価値を提供して対価を得られるエンジニアにもなっていきたいです。

# JISOUのメンバー募集中
プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？

気になる方はぜひHPからライン登録お願いします:point_down:

https://projisou.jp