個人開発した時に使ったAI
トリガミです。人間性が弱者男性すぎて真っ先に切られるタイプのエンジニアです。
最近、Youtubeのクリップ動画を投稿するアプリ(合法)を作ったので、その際のAI活用を振り返ります。
作ったアプリはこちら。よければ使ってください。
3日くらい前にリリースしたのですが、利用者が僕一人しかいないせいで、実質競馬アプリみたいになってます。お情けでいいので使ってください。
使った技術
特に捻った箇所はないです。2024秋現在、個人開発で開発速度を出す場合、だいたいこうなると思います。
使用したai
Github Copilot
Vercel v0
GPT 4o/4o mini
画像系 canva / pixai / stable diffusion
アプリの技術スタック
TypeScript
Next.js(approuter)
Tailwind
prisma
supabase
vercel
その他、youtubeの切り取りアプリという仕様上、動画関係でちらほら細かい技術を使っています。
Github Copilot
そろそろ市民権を得てきた気がしますGithub Copilot。今回の開発では、特にオフにすることもなく、最初から最後までお世話になりました。
今更説明する必要もなさそうですが、開発時にVSCode常に予測コードを書いてくれます。その他、対話形式でコードの提案を聞き出すこともできます(対話の方は今回はほぼ使ってないですが)
強い味方ではありますが、不満がないわけではありません。例えば、Next/Linkを書かせようとすると、必ずLink要素の中にa要素を書いてきます。その書き方はNext12までのものです。時代を考えろ時代を。
あと、app router特有の書き方はまだまだ信頼できません。AIモデルの学習時期を考えたらしゃーないのですが。
他にも、後述するreact-youtube まわりでは、存在しないプロパティを執拗に勧めてきました。react-youtubeには型がない箇所も多いので、全然エラーも吐いてくれず。2時間くらい溶かした。
総じて、頼りになるけど信用できない相棒ポジに収まっています。終盤で真の相棒になるタイプのやつです。早く終盤来い。
Vercel v0
デザイン周りで特にお世話になりました。最初にtailwindのテーマと対象ユーザー層を与えた上で、いい感じにページを書いて、と指示すると、本当にいい感じに出力してくれます。科学の力ってすげー。
↓この404ページとか、ほぼaiのデザインそのまんまです。手抜きしたいところは手抜きできていいですね。
一方で、少しでもロジックが混ざると全然信用できなくなりますし、コンポーネントを大きくしたときも不安定になります。アクセシビリティ的にも最適ではないですし、現段階ではあくまでも補助の位置付けです。
でも、これまで時間溶かしてFigmaと睨めっこしていたところをかなり時短できました。あまり使い慣れていないこともあり、プロンプトが稚拙だった気もしますが、うまく乗りこなせば頼りになりそう。
v0に全面的に乗っかる場合は、古き良きpresenter/container構成にした上でpresenterのみ書かせるのが正解なのかもしれません。ただ、app routerのファイル構成との相性が微妙な気もするので、うーむ。
あと、日本語圏であることを考慮してくれないのも辛い。日本語は英語らと違い、文字入力には変換が伴うのですが、aiにはこれが分からんらしいのです。
ChatGPT (4o)
みんな大好きOpenAI。最新モデルはo1ですが、あまりコーディング面で差異を感じられなかったので、バランス重視の4oを使いました。
サービスの利用規約やプライバシーポリシーを書く際に大変お世話になりました。GPTに見出しを書かせる→内容を雑に書く→GPTに添削させるという手順を取りましたが、ストレスなくやれていたと思います。
利用規約⇩
コーディングについては、youtube のapiを使う時に何度かやりとりしました。このapiは公式仕様書がすこし微妙なので、足りない知識をGPTに補ってもらった格好です。
所感
学習時期を考えると当然ですが、やっぱり最近の技術に弱いことがネックです。とはいえ、app router周りは時間の問題でしょう。
僕はv0はあまり触ってこなかったのですが、思ったより強い奴で驚きました。同時に怖くもなりましたけどね。
よく、AIを乗りこなせない人はAIに食われる、と言いますが、このペースでAIが進化するなら、大抵の人間はプロダクト開発の負債側になりそうな気配がありますね。自分のような底辺弱者は底辺サイドから脱出できなくなるのかな。やだなぁ。