Zenn
🤖

AIを主軸にアプリ開発した話

2024/10/27に公開
AI
Web
個人開発
アプリ開発
趣味
tech

前置き

(ChatGPT3.5が出てちょっとした時にやって以来だったので、最近のツール使ってやってみたかったので今更感には目を瞑って下さいmm)
AIをフル活用してアプリの開発からデプロイまでを実験的に行ってみました。
無料枠のみで行なっています。(ゲームも開発もなるべく無料でやりたい勢です。)
1.5日くらいで作ったものなので作りが甘い部分やまだまだガバガバな部分が多いです。
そこはご了承ください🙇

結論

  • 開発効率爆上がり！
    (こんなに楽をして良いのだろうか...と思ってしまうほどには)
  • 機能の大枠から詳細、UIと大体なんでも作成できて嬉しい！
  • 色々なAIツールを触ってみて、特性を掴むのが大切なのかなと思いました。

今回利用したAIサービス

ご存知の通り、各AIツールには得意・不得意があります。
今回の企画で複数ツール使いながら開発することでより感じることができ、得意な分野を任せることでより良い開発体験をすることができました！

1. ChatGPT

他ツールの無料回数制限が来た時の心強い最後の砦。
汎用性が高いのでエラー内容丸投げなど、機能やUI生成とは別用途で主に活躍してもらいました。

2. Claude Sonnet 3.5

裏側のロジックなどのアプリの機能面の生成を主に担当してもらいました。
(回数制限がすぐ来ちゃうので質問を投げる時は少し慎重になっちゃいますよね😓)
また、Marpでのスライド作成でも活躍してもらいました。
(アーティファクトでプレビュー見れるの大助かりです！)

3. Vercel V0

主にUI作成に大きく貢献してもらいました！
Shadcn/ui、TailwindCSSをベースにコンポーネントからページ全体、デザインまでUI周りを作成してもらいました！
個人的な感覚ですが、UIの生成に関しては扱いやすさ、精度的にも他のツールより高精度な気がします。
(割と雑に投げても良い精度のものを出してくれる)

4. Perplexity

AIはすごい！！
それでもやはり時々、怪しい回答があります...
そんな時はこの子です！
リアルタイムでスクレイピングし、エビデンスを示してくれ、怪しい回答の真偽をはかるのに役立ちます🔍
(エラーの検索などでも活躍してもらいました。)

今回採用した技術スタック

1. Nextjs

後述しますが、Vercelのホスティングサービスを利用するため、相性が良いこともあり、こちらを採用。

2. React

Nextjsと相性が良いため採用。
Svelteなどでもよかったですが、自分が慣れているのとウェブにも文献が多いことからAIとも相性が良さそうだったので。

3. Prisma (ORM)

Vercelのアドオン(Postgres)が公式リファレンスを出していること、記述量が少なく楽に開発ができるため採用。

4. NextAuth

こちらで自前で認証を実装したくない、ユーザーの認証情報を持ちたくないという意思、前に使ったことから採用。
全て紹介するとキリがなくなっちゃうので他は割愛...

実際に開発したもの

良ければアクセスしてみて下さい🙇
(URL: https://worth-it-psi.vercel.app/)

今回の一番の驚き

今回の企画をやる上で一番個人的に驚きだったのはVercelのV0でした。
皆さんはCSSだったりと、スタイル周りは得意・お好きですか？
僕はUIを使ったり、見るのは好きですが、自分でいじるのは苦手です😓

そんな中、V0を用いることでモーションもついたオシャレ(主観)なUIができたことにワクワクでした！
イメージを文章にして伝えることである程度汲み取り、UIを作成してくれます。
その他にもイメージ画像などを入れてもその画像に似たUIが生成できたり、コンポーネント別に出力することなどもでき、僕的にはかなりすごいなという感想でした。
(個人的にはローディング画面がお気に入りですw)

使っていく中での感じた注意点

世間的にも言われていますがただ作らせて切りするだけは流石にきつそうです。
(プロンプトを使いこなせるとまた変わってくるかも知れませんが...)

やはりある程度、使用する技術に対しての知見や使用経験は必要だと感じました。
実際にNextAuthを使用する際に、かなり沼りました...
割と新しく、破壊的変更が入ったことがあることもあり前の情報だったりをもとに出力されることが多く、結局公式のリファレンスを参照しにいき、解決しました😓
僕はやりがちなのですが、何でもかんでも聞く。
実際に調べにいく方が早いこともあります。ここは気をつけたいです。
便利すぎて僕はよくやっちゃいます。
(別の解決策や僕の使い方が甘いのかもしれませんが。)

ずっと同じスレッドで会話をしていくうちに間違った方向に進み、変にバイアスがかかる時があります。
その時は新しくスレッドを立てて利用した方が良い回答を得られることが今回は多かったです。

  • 無料のみやる場合
    なるべく一回の質問で複数の回答が得れるようにすることや、なるべく複数個解決できるように質問する。調べてある程度わかることはなるべく質問しないなどに気をつけないと高精度のツールはすぐ使えなくなるので気をつけたいポイントですね...

まとめ

  • AIを用いて開発効率アップ！
  • AIにも適材適所がある
  • 各ツールの特性をつかむ
  • 自身の知識も大事

やっぱり技術って面白いですね。
よければ、先日のAmazonプライム感謝祭で買ってよかったものを投稿してみて下さい🙇
(いいなと思ったもの買います...)

おまけ (今回のプロンプトと生成の一部)

Vercel V0がある程度適当だったり、だいぶ抽象的にプロンプト投げても(自分主観で)イカしたUIつくってくれてワクワクしました。



Discussion