最近では「AIコーディング」が当たり前になり、エンジニアだけでなく非エンジニアの方でも「アプリ作れるんじゃない？」という声もちらほら聞くようになってきました。
でも本当にプログラミング未経験者が、AIを使ってWebアプリを作れるのか？
そんな素朴な疑問から、今回の検証を思いつきました。
そこで今回は、VSCodeの拡張機能として提供されている話題のOSS AIエージェント「cline」を使って、完全にプログラミング未経験の非エンジニアが、1時間でどこまでWebアプリを作れるのかを実際に試してみました。
まず、clineの使い方を簡単に説明します。
私「ここ（clineのプロンプト入力フォーム）に日本語でやりたいことを入力すると、AIが勝手にアプリを作ってくれるよ！1時間でやってみて！」
妻「えーアプリって何作ればいいんだろう、、」
私「じゃあ定番のTODOアプリ作ってみて！」
環境構築は事前に済んでいて、Reactアプリの初期画面が表示されている状態からスタートです。
アバウトな要求ですが、TODOリストの形はそれなりに出来上がりました。しかし何か問題がありそうです。
妻「すごい、何か出来上がったんだけど！追加してみよ、、ん？？打った文字どこかいった？」
CSSで文字色が白に設定されているのが原因みたいです。この後どのようなプロンプトで改修を試みるのでしょうか？
:root {
/* 略 */
color: rgba(255, 255, 255, 0.87);
/* 略 */
}
プロンプト2
打った文字はどこいった？
こののプロンプトでは、改修してくれなさそうです。。
妻「えー何も変わってないじゃん」
プロンプト3
todoリストに追加したが文字が見えない
このプロンプトでようやく問題が伝わり、文字色が修正されました！
ここまでわずか10分ほど。なかなかいいペース！
妻「出来上がったけど、これで終わりでいい？」
私「もう少し見た目とか機能を改善してみよ！」
プロンプト4
todoリストをクリアしたら自動で消してほしい
TODOのDELETEボタンの機能を行全体に持たせたいという意図だったみたいですが、clineは「一括削除機能」を追加。
妻「まあ思ってたのと違うけどいいやー」
プロンプト5
もっと中心に持ってきて
→ このプロンプトで、見た目は何も変わりません。。
妻「何も変わってない！この人（cline）働いてない！」
プロンプト6
全然変わってないよ
→ すると急に変更されました。
妻「真ん中いったじゃん！」
私「怒ったら動いたw」
プロンプト7
タイトルのtodolistの文字が薄くて見えない、背景に好きな画像を入れられるようにしてほしい
→ 背景が設定されましたが、デザインが崩壊…
妻「変になっちゃったーー、まあいいや」
プロンプト8
ハローキティの画像を追加して可愛くして
→ 全然ハローキティではない猫が追加された。
私「これどうなるんだw」
妻「全然ハローキティーじゃないじゃんwww ピンクにはなったけどw」
プロンプト9
背景を消して白にして
→ すっきり元に戻りました！
妻「なんかいい感じになったね」
この後フォントを変えようと試行錯誤しますが、なかなかいい感じになりません。
プロンプト10
フォントを可愛くモコモコ系にして、リストを完了した時の効果音をつけてほしい、ハローキティーの画像をサンリオから拾ってきて
→ 効果音は追加されたけど、それ以外変化なし。
プロンプト11
フォント何も変わってないけど？
→ 無視されたw
プロンプト12
全てのフォント明朝体にして
→ 一部明朝体になった。
プロンプト13
Todo Appの文字を消去する、その後中心に配置し直して
→ 何も変わらない。。
プロンプト14
Todo Appの文字を消去する、その後中心に配置し直して
→ 変化なし
そして──
我慢の限界が来たようで、、
プロンプト15
もう一回やり直し！！！！！！
→ すべて初期状態にリセット！！
妻「えええーーー全部戻った、、、」
プロンプト16
もっと可愛くしてピンク系で
→ 成功！満足のデザインに。
妻「すごい！！いい感じになった！」
私「めっちゃいい感じになったw」
1時間で完成したアプリはこちら！
今回、全くのプログラミング未経験者が、AIアシスタント「cline」を使ってWebアプリを作るという実験をしてみました。
今後、自然言語でアプリケーションが作れるようになればより誰もが自分のアイデアを形にできる時代になるのではないかと期待が膨らみます。
1時間という短い時間でしたが、「何も知らない状態」からここまで形にできたのは、素晴らしい成果だと思います。「私でもアプリ作れるんだ！」という実感を持てたことが一番の収穫でした。
Be the first to comment
