v0 VS bolt VS Claude VS Lovable VS Codev VS Lazy AI
チャットでUIとロジック実装してくれる系のサービスってv0が筆頭やと思うんですけども、それ系のサービスがv0以外にもちらほらあったんで、「同じプロンプトでそれぞれのアウトプットでバトルさせようぜ」って記事です。
バトル内容
お題
ToDoリスト
プロンプト
ToDoリストアプリを作ってください。
要件は以下の通りです。
- データの読み書きはlocalStorageで行なう
- ユーザーはタスクを追加できる
- タスクの追加する際に、日時とタイトルとディスクリプションを必須項目にする
- ユーザーは追加したタスクを編集できる
- ユーザーは追加したタスクを削除できる
上記に加えて、あなたがタスクに追加で保存した方がよいと考えた値や、実装した方がよいと考えた機能を実装してください。
UXの設計やUIの方向性も、あなたにおまかせします。
審査方法
プロンプトに対する最初のアウトプットに対して、以下の項目で審査するやで。
- 要件を実装しているか
- プロンプトに無い追加機能の数や質
- UXの設計
点数を付けてくとめんどいから、〇△×で評価を付けるやで。
コードレビューもした方がええかと思ったけど、めんどいからやめ。
UIの質の評価もしようかと思ったけど、どれも無難にこなしてくれるやろからやめ。
アウトプットによっては審査項目とか言及する項目が変わるかも。
審査員
おれ
選手一覧
v0
アウトプット
審査
| 要件 | 追加機能 | UX |
|---|---|---|
| 〇 | △ | △ |
タスクの追加、編集、削除はできるから機能的には問題なし。
あとプロンプトに入れ忘れてたけど、タスクの完了と未完了のステータスを切り替えるボタンも追加してくれててありがてぇ。
v0が追加してくれた機能は以下。
- ライトモードとダークモードの切替
- タスクの重要度選択
- タスクのステータス切替
- タスクのタイトルフィールドに対する検索
- 期限と重要度でのソート
- 重要度によるタスクの色分け
ステータス切替の追加と被るけど「巷のToDoリストアプリでそういえばそういうのあるよね」ってやつを追加してくれてていいね。
よくない点というか改善点は以下。
- ライトモードとダークモードの切替が機能しない
- タスク入力の各種のフォームにラベルが無い
なので日時選択と重要度選択はパッと見でなんの項目かわからん - ディスクリプションの改行がタスク一覧では反映されない
- タスクのステータスの切替チェックボックスにラベルが無い
なので押してみないと何のチェックボックスか理解できん - タスクを登録した後にタスクを登録できたか分からん
「登録できたで！」ってアラート出すか、追加したタスクのところまで画面をスクロールするといいと思う - タスクを登録済みのユーザーからすると、冒頭にタスク入力フォームを表示するよりタスク一覧を表示した方がいいと思う
「登録はもうやったからタスク見してくれや」って思うやろから
たとえばスマホならページアクセス時かつタスク登録済みの場合、タスク一覧を冒頭に持ってくるとか、PCなら2カラムでフォームと一覧を横に並べるとか
「ライトモードとダークモードの切替が機能してないで」って言ったら、v0はごめんって言った後にコードを直してくれたんやけども、ダークモード固定になっちゃった。
あと、スマホで表示時かつタスク登録済み時はフォームと一覧の位置を逆にして、PC表示時は2カラムにしてって言ったら、一応やってくれた。
スマホ表示時でタスク登録済みやとフォームが消えてもうて、「タスクを追加」ボタンを押さなフォームが出てこんくなった。
具体的な要望を出したつもりやけども要望通りの実装してくれんね～なんでやろ。
bolt
アウトプット
審査
| 要件 | 追加機能 | UX |
|---|---|---|
| △ | △ | △ |
v0と同じく機能的には概ね実装できてるけど、タスクの更新ができんので要件△。
あとは追加機能として、v0と同じくステータスとか重要度とかソートを足してくれてる。
ただ、これもv0と同じくライトモードとダークモードの切替が機能してへん。
それとタスク登録フォームがデフォルトで非表示なんで、はじめて使うユーザーとかタスクが完了したらステータスを完了するんじゃなくて削除して整頓する、かつ削除しきったユーザーにとっては、v0と比べると手間が増えて体験がよろしくない。
ステータスを完了するにしてもワンボタンで更新できるv0に対して、タスクごとのペンアイコンを押して編集フォームを表示せな変更できんし、そもそも前述の通り更新できん。
あとはタスク検索フォームの表示が崩れてるね。
ただ、更新が機能せんのとタスク検索フォームの表示崩れは、追加のチャットで直りました。
なのでboltも普通に使える代物やと思う。
Claude
アウトプット
審査
| 要件 | 追加機能 | UX |
|---|---|---|
| × | △ | △ |
タスクの追加ができないので×。
追加のチャットで「タスク追加できへんから直して～」って言ったら「OKやで！」って言いながらコードを更新しだしたんやけども、直らんかった＆以下のGIFみたいにフォームに入力する度にフォームからフォーカスが外れるようになった。
追加機能に関しては先の2つ同様に、ステータスとか優先度の設定とかソートとか追加してくれとる。
これらが全部機能するんやったら追加機能の項目は〇やけど、タスクの追加ができんから追加機能の検証ができんので△。
UXに関してはbolt同様にフォームが初期表示されてないんで△。
タスクの追加できんからユーザー体験もクソも無いしUXは×とも言えるか。
Lovable
アウトプット
審査
| 要件 | 追加機能 | UX |
|---|---|---|
| 〇 | 〇 | 〇 |
要件満たしてるし〇。
追加機能はこれまでと同じく、検索とかステータスとか優先順位が追加されてて、いずれも機能しとるんで〇。
そんでもって先の3つと大きく異なるのが、タスクの作成なり更新なり削除すると、画面右下にトーストが出てくるで！
「やっとここまでやってくれるやつ現れたわ❤」と感動したんでUXは〇や！！
v0と同じくフォームにラベル無いし、boltとかClaudeと同様にフォームは初期表示されてへんけども、そこに目を瞑れるぐらいにトースト表示はええことや。
あと「こやつ分かっとるやんけ」ポイントとして、進行中や完了のステータスの変更は一覧の表示部分でできるところや。
boltを引き合いに出すと、boltでステータスの更新するには以下の手順を踏む必要あった。
- ペンアイコンを押下
- セレクトボックスでステータスを変更
- 更新ボタンを押下
かたやLovableでのステータスの更新手順は以下や。
- セレクトボックスでステータスを変更
タスクごとで変更頻度が最も高そうな要素がステータスやと考えられるし、その項目だけは一覧から更新できるようにしとる。
boltと比較してステータス更新の工程数が少ないのはいいことや。
ちなみに一覧でステータスの更新ができる点はv0と同じやけども、v0は着手中にあたるステータスを識別できんかったので、着手中を識別できるようにv0にお願いしたら以下のようにできるようになった。
セレクトボックスに比べて押すだけでステータスの更新ができるんは楽やけども、相変わらずラベルが無いんで初見時はステータスの更新がどっからできるか分からん。
あと初手アウトプットで審査するんで、UXの項目は変わらずv0が△でLovableは〇や。
v0はフォームを初期表示に含めてる点で抜きん出てるんやけど、初期表示ゆえの不便さがあって、かつそれを解決できてないのが惜しいね。
Codev
アウトプット
審査
| 要件 | 追加機能 | UX |
|---|---|---|
| 〇 | 〇 | 〇 |
全部〇や！
アウトプットの諸々の質はLovableと並ぶと思う。
Lovableに比べて劣ってんのはトーストが無いことぐらいやね。
代わりにLovableっていうか他より優れてんのは、レスポンシブの対応やな。
PCで表示するとCodevのみ複数カラムで表示してくれるんで、タスクをたくさん積んでもうたときにタスクの総数を把握しやすいんはCodevや。
あとLovableと同じように一覧の段階でステータスの更新できるんやが、Lovableより優れてる点として、タスク編集モーダルでもステータスの更新ができるところや。
例えばタスクの内容の編集とステータスの変更を同じタイミングで行ないたい場合は、一覧からしかステータスの更新ができんLovableに比べてCodevの方が楽やね。
Lazy AI
アウトプット
デプロイするには課金しなきゃならんっぽかったのでGIFだけ。
審査
| 要件 | 追加機能 | UX |
|---|---|---|
| × | × | × |
機能せんかったわ。
なんか色々めんどくなったんで、他も×にしちゃう。
ごめんLazy AI。
なぜか最初にナマケモノ？をデカデカと表示しとるけど、こいつは可愛くてよきやで。
結果
v0、Lovable、Codevがいいね！
そん中でもLovableだけトーストを表示してくれたことにわいは感動した。
よって第一回チャットAIチキチキToDoリストアプリ開発選手権優勝は、Lovableや！！！！！！！！！
Discussion