NyaoTech

プロンプト

今回使用したプロンプトは以下の通りです。

貴方に課題を出します。以下のWebアプリを開発しなさい。

【日記Webアプリ】
◆機能
・アカウントの新規登録機能
・ログイン機能
・記録機能
・編集機能
・削除機能
◆要件定義
・アカウント新規登録画面
ユーザーは新規アカウント登録画面において、メールアドレスとパスワードが必須入力として登録させること。
メールアドレスは重複を認めず、重複していた場合は、その旨を表示すること。
パスワードは2回書かせ、2つの値が間違っている場合はその旨を表示し、一致していればハッシュ化した上で登録すること。
登録するとログイン画面に遷移すること。
アカウント新規登録画面から、ログイン画面へ遷移できるボタンを配置しておくこと。
・ログイン画面
ユーザーは登録したメールアドレスとパスワードを入力することで、ログインすることができる。
メールアドレスまたはパスワードが間違っている場合、その旨を表示すること。
メールアドレス、パスワードの入力は必須項目。
ログイン画面からアカウント新規登録画面へ遷移できるボタンが配置されていること。
ログイン状態は保持すること。
ログインが成功した場合、トップ画面へ遷移すること。
・トップ画面(日記一覧)
未ログイン状態でアクセスした場合はログイン画面へ遷移すること。
ユーザーのこれまで記載した日記のタイトル、日付、最初の1〜2文を行としてデータを表示すること。
一度に表示できる件数は20件までとし、それ以上ある場合はスクロールをつけるなど工夫すること。
記事のタイトルをクリックすることで記事詳細画面へ遷移できること。
誰がログイン中か判断するためにログイン中のメールアドレスを表示すること。
ログアウトできるボタンが配置されていること。ログアウトボタンが押された場合、セッション等を削除しログイン画面に遷移すること。
日記を作成するボタンを配置すること。
日記を作成するボタンを押すと、タイトル、日付、その内容を記録することができる。
また、写真をつけることも可能。
・記事詳細画面
未ログイン状態でアクセスした場合はログイン画面へ遷移すること。
ユーザーがトップ画面で記事タイトルをクリックした際に、該当記事の内容を表示すること。
また記事以外に、編集ボタンを配置すること。
編集ボタンを押すと記事の内容をすべて編集できること。
削除ボタンを設けること。削除ボタンは該当記事に対して削除する機能を持ち、ボタンが押された場合、警告を表示すること。
◆セキュリティ対策
パスワードは平文ではなくハッシュ化すること
ユーザーからの入力値はサニタイジングやエンコードといった処理を施すこと。
SQLインジェクション対策のためにバインドする手法で行うこと。
上述以外にも想定されるセキュリティ対策を施すこと。
◆使用言語・技術
HTML, CSS , JS, PHP, MySQL
◆DB
必要なDBテーブルがある場合は、クエリも書くこと。

簡単に説明します。
まず、筆者の得意分野でないと、分からないので、今回はWebアプリケーションを開発してもらいます。

内容は「日記アプリ」です。

機能としては、必要最低限の内容として、まずログイン機能。
複数ユーザーが使うことを前提とします。

そして日記の一覧。
過去の日記を読み返したいですからね！

日記の記録、編集、削除。
これらができないと、非常に使いにくいものですからね！

基本的にはこれらがついていればOK！という感じなので、ここまではそんなに難しくはありません。

ただ、ちょっとめんどくさい機能も入れました。

まず、写真を追加できる点。
よくある機能ではありますが、拡張子のチェックや、それをサーバーにアップロードして管理しなくてはいけないので、ちょっとめんどくさい部分です。

今回は第1回なので、この程度で抑えてみました。
(第2回をやるかは知らん)

仕様通りに作られているかを確認するためにチェックリストを作成しました。

生成と環境構築

さて、先ほどのプロンプトを全5AIにコピペしていき生成させました。

もうこの時点で、AIの個性が出たので、ランキング形式で紹介します！

第1位：ClaudeAI

今回、開発するWebアプリは、複数画面あるので、ファイル数が多くなりがちです。さらに、写真を保存する機能があるため、ディレクトリ構成も考える必要があります。

そのため、コピペしたりダウンロードするファイル数がたくさん発生するのですが、なんとzipファイルでまとめてくれました！

また、他のAIにはなかったREADEMEファイルが生成されていました。そのため、そのままGitHub上で公開することも容易いということです。

第2位：Grok

ここからは、生成されたプログラムをコピペして自分でプログラムファイルを作っていく必要が出てきます。
Grokでは、セットアップ手順と所要時間が掛かれていました。ただ、セットアップ手順では「XAMPP」や「権限777」など、ソフトウェア名やlinuxの知識がないと分かりにくい内容でした。

ただ、手順書があるのとないのとでは大きく違うので、良かったと思います。

第3位：ChatGPT

ここから先は手順書もありません。
具体的な指示がないので、生成されたところで「？」。

ただ、ChatGPTはディレクトリ構成というものが生成されていました。(Claudeも生成されていました)
これのおかげでなんとなくは分かります。

面白い(?)のが、2つほど生成されていないプログラムファイルがあるんですよね...

logout.php
style.css
拡張子と名前からして、一つはログアウト機能用のプログラム、一つはデザイン用のプログラム。

今回デザインは特に指定していないので、いいとして、この時点でログアウト機能は実装されていない説が濃厚になってきました（笑）

第4位：Copilot

プログラムは生成されました。
使用技術やどんな機能があるのかなどの説明がほとんどで、手順書やディレクトリ構成は不明となっていました。
まぁ、やり方を教えろとは言っていないので、他のAIと違って、ある意味、指示通りなのかもしれません。

第5位：Gemeni

まず、ファイル数が圧倒的に少なく、導入方法以前の問題でした（笑）

また、手順書やディレクトリ構成は不明で、疑問が残る形になりました。。。

おそらく会話形式での開発に主軸を置いているのかもしれません。

試遊・テスト

ということで、遊んでみたいと思います。
見るべき項目が多いので、うまくいかなかったところだけをピックアップします。

堅牢性

生成AIが開発したWebアプリケーションの堅牢性を知るには、脆弱性を知る必要があります。
ということで、今回は、Skipfishという、セキュリティテストツールを用いてそれぞれのWebアプリを検査してみました。
結果は次の通りになりました。数字は脆弱性の数を示します。

サービス	重大	中	軽微
ChatGPT	11	5	15
Copilot	0	1	29
Gemini	0	0	9
Claude	0	0	15
Grok	0	0	13

この結果を見ると、ChatGPTが生成したプログラムだけが唯一重大な脆弱性が存在しその数が11個もあります。

Geminiが最も少ないですが、ほとんどできていないアプリです。これだけでは比較ができないので、プログラムの行数をもとに比較してみることにしました。

サービス	行数	脆弱性の数	100行当たりの脆弱性数
ChatGPT	198	31	15.6
Copilot	428	30	7.0
Gemini	90	9	10.0
Claude	1073	15	1.4
Grok	376	13	3.5

となりました。
つまり、Claudeが最も堅牢性が高く、次いでGrok、Copilot、Gemini、ChatGPTという結果になりました。

総合まとめ

サービス	導入のしやすさ	実装力	堅牢性
ChatGPT	3位	3位	5位
Gemini	5位	5位	4位
Copilot	4位	4位	3位
Claude	1位	2位	1位
Grok	2位	1位	2位

という結果になりました。

導入のしやすさはあくまでも私の感想なので、あくまでも参考程度ということにはなりますが、実装力と堅牢性においては、かなり確実な評価となっていると考えられます。

ChatGPTやCopilotはほぼ同じ水準であると考えられ、まだまだ確実なものとは言えないでしょう。
Geminiは一回での開発はできなくても会話形式で一緒に作り上げることによって、もしかしたら、より良いものができるかもしれません。
Claudeは噂通り、1-2-1位とどの観点からも好成績で、プログラミングに強いAIと言われるだけあると思います。
Grokは意外にも2-1-2位と好成績を叩き出しました。イーロン・マスク氏が「プログラミングは事実上終焉を迎える」というだけはある結果だったのではないでしょうか。

皆さんはこの結果を見てどう思いましたか？

以上、ここまでご覧いただきありがとうございました。