GeminiとClaudeにアプリ書かせて比較
Youtubeの動画情報、画面で見ると大まかな情報しか取れないけどAPI経由で取るともっと詳細な情報が取れるのではないか？（動画アップロード日時が秒単位で見れるとか、そういうの）
と思い、どうせならそれをwebアプリにしてみようとも思い立った。
これくらいのことはAIで余裕でできるだろうという目算があったのでそうすることにしたが、どうせならということで2種のAIを比較してみることにした。Gemini vs Claude。
なんでこの2つにしたかというと、単に今一番使いたいAI2選がこれだからである。GeminiはまあGoogleなんで検索との親和性が高そうで「調べて何かをする」というタスクにおいては一番強そうあるいは強くなりそうと思っており、Claudeはなんかよく知らんけど現段階ではコーディング能力が高そうなのと、あと会社で使っているので知っておいたほうが良かろうと思っている。
さっそく
「YouTube動画のurlを入力するボックスがあって入れるとその動画のapi叩いてて得られる詳細なメタ情報を表示するようなWEBサイトを作りたい、一番簡単な方法は何か」
Geminiとの会話要約
Gemini「YouTube Data API v3を使うのがよくて、実装の方法としては
A. Google Apps Script + HTML
B. Vanilla JavaScript + Fetch (APIキーを直接使う)
C. Node.js (Express) + EJS/Pug
の3つがある。Aはサーバーレスでできる。Bは非推奨」
自分「Aくわしく」
Gemini「（GAS側のJavaScriptコードとフロント用のHTMLを吐き出す」
自分「（APIキーを発行、GASアプリ作成、コードを丸コピペしてデプロイ）」
自分「これだと表示される情報が限られてしまうのでAPIレスポンスのJSON全体をそのまま表示してほしい」
Gemini「（修正版のjsとhtmlを吐き出す）」
自分「（丸コピペしてデプロイ）（想定通りのものが完成していたので、終了）」
Claudeとの会話要約
（Geminiで概ね方向性を把握してからやってるので、結構それに基づいた誘導をかけている）
Claude「oEmbed API、YouTube Data API v3がある。実装の方法としては完全フロントエンドのみ、バックエンドありの2つがある。コード例を出そうか？」
自分「お願いします」
Claude「（何も生成してない）できました！注意点として、本番環境ではバックエンドでAPIキーを管理した方が良い」
自分「何も生成してないやん」
Claude「すみませんでした！これです（生成）（フロントエンドのみのやつ）」
自分「このサイトを公開したい」
Claude「Netlify Drop、GitHub Pages、Vercelがある。APIキーを直接埋め込んでいるからAPIキーに制限をかけるかバックエンドを使うかする必要がある」
自分「一旦GitHub Pagesを使うやり方を詳しく」
Claude「（GitHub Pagesを使うやり方を解説してくれる）」
自分「これGAS使ってなんとかならないの？」
Claude「なります」
自分「方法を教えて」
Claude「こうです（GASを使うやり方だが、なぜかGASはバックエンドでしかなく、HTMLをどっか（GitHub Pages）とかに置く前提）」
自分「GASにhtml置けないの？」
Claude「置けます（やり方を提示）」
自分「（デプロイ）」
自分「これだと表示される情報が限られてしまうのでAPIレスポンスのJSON全体をそのまま表示してほしい」
Claude「（修正版を吐き出す）（何故か勝手にダークモードデザインに書き換える）」
自分「（デプロイして、できてたので終了）」
所感
Geminiをほぼ初めて使ったが、思ったより賢い。このアプリにおいておそらく最適解であろうGASを使ったやり方を一発で提示してきたし会話に無駄がなかった。
一方Claudeが思ったよりだいぶ頭が悪くて心配になってきた。上の会話要約からも伝わると思うが、かなり誘導をかけないと最適解を出してくれないのがだいぶヤバく、節々で会話に無駄が多い。JSONを表示してくれというだけの要望に対してデザイン変更をぶちかましてくるのもだいぶ意味がわからない。使っててほんとに良いのかと思うレベル。
一旦は私用ではGeminiを使っていこうかなと思った。
Discussion