問題意識
巷ではバイブコーディング(Vibe Coding)が流行っていますが、具体的にどのツールでどこまでできるのかは結構不明瞭だと個人的には思っています。そこで、手元のツールで簡単なアプリケーションをバイブコーディングでどれだけ簡単に作れるのかを確認してみます。
それぞれのツールに対して以下のプロンプトで指示してみます。時に記述がない場合にはWeb版での動作確認となります。Web版とデスクトップ版とで挙動が異なる場合があります。
「大学の授業で使える出席管理システムを作ってください。
条件：
- 学生30人のクラス
- 週1回、15週の授業
- 欠席が3回を超えた学生を自動でハイライト
- HTMLファイル1つで動作するもの」
ここでいくつか留意点があります。
- アプリというからにはデータの参照、更新ができるべき
- データの永続化が必要となります
- 生成AIツールから独立して動作すべき
- ブラウザで動くものにしたいと思います
結果として上のプロンプトでHTMLファイル1つで動作するものと指定しているわけです。生成されたコードをHTMLファイル(index.htmlなど)として保存することで、ブラウザで動作するアプリとして利用できるようになります。
手元にあるツールは以下のとおりです。
- ChatGPT
- Claude Desktop
- Claude Code
- Cursor
- Gemini
- Grok
- Perplexity
ChatGPT
OpenAI開発の会話型AI。GPT-4モデルを搭載し、テキスト生成、コード作成、画像生成（DALL-E）、データ分析などが可能。プラグインやカスタムGPTsで機能拡張できる。
Mac版デスクトップで試しています。キャンバスの存在をうっすらとしか知っていませんでしたが、この機能によってHTMLのアプリケーションを簡単に作れるようになっています。
結果が生成されると単一htmlという表示がされるはずです。これをクリックするとHTMLを確認することができます。
右上のプレビューをクリックすることで画面を確認することができます。
生成されたコードをファイルに保存すれば、それをダブルクリックすることでアプリを起動することができます。
永続化をどうしているのかを聞いてみます。
データは永続化されますか
はい。今回のHTML版の出席管理システムでは、入力した出欠データは ブラウザの localStorage に自動保存されます。
localStorageとは
localStorageは、Webブラウザが提供するデータ保存機能で、ウェブサイトがユーザーのブラウザにデータを永続的に保存できる仕組みです。
主な特徴
-
永続性
ブラウザを閉じてもデータが残る
明示的に削除するか、ブラウザのキャッシュをクリアするまで保持される
sessionStorage（タブを閉じると消える）とは異なる -
容量
通常5〜10MB程度（ブラウザにより異なる）
Cookieの4KBと比べて大容量 -
同一オリジンポリシー
同じドメイン・プロトコル・ポートからのみアクセス可能
他のサイトからはアクセスできない（セキュリティ）
要はHTMLファイルかつlocalStorageが使われていれば、普通のアプリ同様にデータの読み書きができるということです。
他のツールでも見ていきましょう。
Claude Desktop
Anthropic提供のデスクトップアプリケーション。ウェブ版と同じClaude AIをローカル環境で利用でき、ファイルの直接アップロードや長文の処理が得意。
お手軽にアプリを作るならこれと思っていましたが、アーティファクト上ではデータの永続化ができないことに気づきました。
Mac版デスクトップで試しています。アーティファクトはサクッと作ってくれます。
データの永続化に関して質問します。
アーティファクトでlocalstorage動きますか？
申し訳ございません、Claudeのアーティファクト環境ではlocalStorageは動作しません。アーティファクトはセキュリティ上の理由でサンドボックス環境で実行されており、ブラウザストレージAPIへのアクセスが制限されています。
アーティファクトはプロトタイピング目的でアプリを作るには適していますが、データの保存ができないのは悩ましいですね。なので、保存機能を使うにはHTMLファイルとして保存する必要があります。
HTMLファイルをダウンロードして使用（localStorage機能付き）
こうすることで、保存機能が動作するアプリが使えるようになります。
Claude Code
Anthropicのコマンドラインツール。ターミナルから直接Claudeにコーディングタスクを委任でき、エージェント型のコーディング支援を提供。開発者向けの自動化ツール。
バイブコーディングでは日常使いしてます。
さすがに出来上がるアプリの質は高いです。
データも永続化されます。
Cursor
AI搭載のコードエディタ。VSCodeベースで、コード補完、リファクタリング、バグ修正などをAIが支援。コンテキストを理解した上でのコード生成が特徴。
初めはPHPファイルを作ってしまったので、再度指示してHTMLを作ってもらいました。
永続化もしてくれてます。
Gemini
Google開発の大規模言語モデル。マルチモーダル対応で、テキスト、画像、音声、動画を理解。Google製品との統合が強みで、検索や生産性ツールと連携。
こちらもlocalStorageを使ってくれています。
画面は若干やぼったいです。
Grok
xAI（イーロン・マスク設立）のAI。X（旧Twitter）と統合され、リアルタイムの情報アクセスが可能。ユーモアのある応答と最新情報への対応が特徴。
こちらもlocalStorageを使ってくれています。
ただ、アプリは動いていません。行が表示されていない。
データをリセットしたら行が表示されましたが挙動がおかしい。
Perplexity
AI搭載の検索エンジン。質問に対して複数のウェブソースから情報を収集・要約し、出典付きで回答。従来の検索エンジンとAIチャットボットの中間的存在。
検索特化だと思ってましたが、HTMLを作ってくれました。Mac版デスクトップで試しています。
ただし、初回ではデータは永続化されませんでした。
永続化するようにお願いします。
動くものにはなりましたが、データの永続化はされていませんでした。もう少し調整が必要です。
まとめ
実際に使えるアプリにするにはデータの永続化が不可欠です。明確に指示をしなくても、作ろうとしているアプリでデータの保存が必要な場合には、基本的にはすべてのツールでlocalStorageを使用したデータの永続化をサポートしてくれました。Claude Desktopのアーティファクト上ではデータは保存されないので、別途HTMLファイルに保存する必要があることにご注意ください。
今回作成されたアプリの品質に関しては、ChatGPT、Claude Desktop、Claude Code、Cursorが優れていると感じました。
2025/9/18(木)に開催されるイベントでは、これらのツールを活用して業務で使用するアプリを開発していただきます。興味のある方は是非ご参加ください！
DMM 生成AI 学び放題では、初心者から上級者まで、安心して進められる「学習コース」を用意しています。開発・営業・マーケ… あなたにピッタリな学習ステップで、日々成長を実感できるような、体系化されたカリキュラムをご活用ください！