Zenn
🎥

Vibe CodingでYoutubeのダウンロードアプリを作成してみた

に公開
AI
TypeScript
Bun
Cursor
Hono
tech

こんにちは。JavaScript/TypeScriptをほんの少しだけ触ったことがあるだけのただのニートです。

今回は、Vibe Codingで「YouTubeのダウンロードアプリ」をAI（Claude 3.7 sonnet）に全部やらせて作ってみたので、その体験談をまとめてみます。

きっかけ

YouTubeの動画をダウンロードしたいな～と思って、まずは既存のWebサービスやアプリを色々探してみたんですが、
・ソフトのインストールが必要だったり(こういうソフトは怪しいものが多い)
・Web上のやつはやたら遅かったり
・広告が多かったり
と、なかなか「これだ！」というものが見つからず。

じゃあAIに作らせてみようかな、というノリで始めてみました。

事前調査と技術選定

まずはPerplexity AIで「YouTubeのダウンロードができるライブラリ」を検索。
最初に出てきたのはytdlだったんですが、どうやらメンテされておらず、今のYouTubeでは使えないらしい。
代わりにフォークされたyt-dlpが現役で使えるとのこと。
ただし、これはPython製でコマンドラインから使うもの。
「じゃあJSから簡単に使えるラッパーはない？」と聞いたら@j3lte/ytdl-wrapperを教えてもらいました。

技術スタックはこんな感じになりました。

  • Hono（軽量なサーバーフレームワーク）
  • Bun（TypeScriptがネイティブで動くランタイム）
  • yt-dlp（ダウンロード本体）
  • @j3lte/ytdl-wrapper（yt-dlpのJSラッパー）
  • Cursor (Claude 3.7 sonnetに全部丸投げ)

正直、TypeScriptである必要もBunである必要もなかったかもしれないですが、AIがTSのほうが良いコードを書いてくれるし、Node.jsだとパッケージングしたときにサイズがでかくなりがちなので、Bunでも全然アリかなと。
（Bunはパッケージング周りがまだ弱いので、どっちを選んでも一長一短って感じです）

作ったもの

BunとHonoでローカルサーバーを立てて、デフォルトでlocalhost:4649にアクセスするとダウンロード画面が出てきます。(一応起動時に自動的にアクセスするようにしています)

初回起動時にyt-dlpやBunの実行ファイルをbatファイル経由で自動ダウンロードするようにしているので、PCにBunがインストールされていなくても動きます。
（環境によってはセキュリティソフトや権限の関係でbatファイルの自動実行がうまくいかない場合もあるかもしれません。しらんけど）

実際にやったこと

ざっくり手順はこんな感じです。

  • Perplexityで調べた内容をもとに、プロジェクト概要や使う技術をmdファイルにまとめる（.cursor/rules/project-info.md）
  • bun initや、biome、gitのセットアップ（この辺はAIにやらせてもいいけど、リクエスト数節約のため自分でやった）
  • 以降はAgentモードのClaude 3.7 sonnetに自然言語で指示してコーディング
  • 実際に起動してみて、想定外の動作やバグが出たらAIに修正を依頼
    • 修正方法を自分から提案すると、うまくいくことが多かった
    • ルールに軽くでもコーディング規約を書いておけばよかったかも（any型多用でbiomeのリンターエラーが多発した）
  • 最後にGitHubに公開

とにかく「自分では一切コードを書かず、全部AIにやらせる」という縛りでやってみました。Cursorなら、Docsにライブラリのreadmeのurlを投げるだけで、僕自身がライブラリの使い方を知らずとも、しっかりと動作するコードを生成してくれました。

テストはまだ不十分だし、想定していないバグも残ってると思いますが、とりあえずYouTubeから動画のダウンロードは普通にできてるので、一旦公開してみます。

実際に使っている様子

おわりに

AIに全部やらせてみた感想としては、今まで自分で書いてはAIにリファクタリングをさせていたり、一つのブロックの書き方を聞いていたのがバカバカしくなるぐらいスーパースピードでだいぶまともなコードを生成してくれるのがすごいと思いました。(無職には高い3000円だったけど本職なら安すぎるぐらいの500 premium requestだったかも)

作業を始めようと思ったタイミングでいろいろあって2週間ほどかかりましたが、実作業時間自体はperplexityで調べ始めたところから6~7時間ぐらいで終わったと思います。

ただ、完全にAI任せだと細かい設計やコーディング規約がブレやすいので、最低限のルールはcursor rulesに書いておいたり、自分で決めておいたほうが良さそうです。

あと話は変わりますが、Twitterのアカウント、切り替えが少し面倒だけど専用アカウント作ったほうがいいかなって思いました。

ニート脱却したいな～ では。

Githubのリポジトリ

https://github.com/miyabitti256/youtube-downloader

著作権と免責事項について

このアプリケーションは、あくまで個人利用を想定して作成したものです。YouTube動画のダウンロードについては、必ずYouTubeの利用規約を守ってください。著作権で保護されたコンテンツの無断ダウンロードや再配布は法律違反になる場合があります。

また、このツールの利用によって発生したいかなるトラブルや法的責任についても、開発者は一切責任を負いません。ご利用は自己責任でお願いします。

なお、使用している外部ライブラリの著作権は、それぞれの開発者の方々に帰属します。

Discussion