こちらのイベントのバイブコーディングにおけるガイド資料です。
バイブコーディングとは
「AIに話しかけるだけでアプリが作れる」新しいコーディングスタイルです。
どういうこと？
- 今まで：プログラミング言語を勉強して、コードを自分で書く
- バイブコーディング：「こんなアプリ作って」とAIに頼むだけ
具体例：
「写真を撮ったら自動で日記を作るアプリが欲しい」と言うと、AIが勝手にコードを全部書いてくれる。あなたはコードを見る必要もない。
誰が始めた？
テスラで自動運転を作っていた有名なエンジニアが、今年2月に「これ面白い！」とTwitterで言い出して、みんなが真似し始めた。
良いところ：
- プログラミングできない人でもアプリが作れる
- めちゃくちゃ早い（数時間で完成）
- アイデアだけあればOK
問題点：
- AIが書いたコードにバグがあっても気づかない
- セキュリティの穴があるかも
- 壊れた時に直せない
バイブコーディングのテーマ
会社で活用できるシステムを作りましょう！
- 会議室予約システム
- 社員名簿システム
- ノウハウ管理システム
- 進捗管理システム
- などなど
イベントでのバイブコーディングの進め方
グループワークとなりますので、チーム内で以下のような分担を決めてから進めることをお勧めします。
- 要件を明確化する人
- バイブコーディングを実行する人
- GUIの具体化、フィードバックする人
- 発表する人
ツール活用のガイドライン
今回のバイブコーディングでは活用するツールは特に限定していません。とはいえ、どのツールを使ったらいいのか迷われることもあると思いますので、以降では、それぞれのツールに対して以下のプロンプトで指示してみます。時に記述がない場合にはWeb版での動作確認となります。Web版とデスクトップ版とで挙動が異なる場合があります。
- ChatGPT
- Claude Desktop
- Claude Code
- Cursor
- Gemini
- Grok
- Perplexity
「大学の授業で使える出席管理システムを作ってください。
条件：
- 学生30人のクラス
- 週1回、15週の授業
- 欠席が3回を超えた学生を自動でハイライト
- HTMLファイル1つで動作するもの」
ここでいくつか留意点があります。
- アプリというからにはデータの参照、更新ができるべき
- データの永続化が必要となります
- 生成AIツールから独立して動作すべき
- ブラウザで動くものにしたいと思います
結果として上のプロンプトでHTMLファイル1つで動作するものと指定しているわけです。生成されたコードをHTMLファイル(index.htmlなど)として保存することで、ブラウザで動作するアプリとして利用できるようになります。
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版デスクトップで試しています。
ただし、初回ではデータは永続化されませんでした。
永続化するようにお願いします。
動くものにはなりましたが、データの永続化はされていませんでした。もう少し調整が必要です。
迷った時には
ChatGPTを使いましょう。以下のプロンプトを指示してみてください。
会社で使う会議室予約システムを作ってください
条件：
- 会議室は5つ、大(10人)が1つ、中(5人)が2つ、小(2人)が3つ
- 予約の際には日時、会議室の選択と名前の入力が必要
- 予約状況を確認できるように
- HTMLファイル1つで動作するもの
生成されたHTMLをコピーして、メモ帳などでHTMLファイルとして保存します。そのファイルをブラウザで表示しましょう。
まとめ
実際に使えるアプリにするにはデータの永続化が不可欠です。明確に指示をしなくても、作ろうとしているアプリでデータの保存が必要な場合には、基本的にはすべてのツールでlocalStorageを使用したデータの永続化をサポートしてくれました。Claude Desktopのアーティファクト上ではデータは保存されないので、別途HTMLファイルに保存する必要があることにご注意ください。
今回作成されたアプリの品質に関しては、ChatGPT、Claude Desktop、Claude Code、Cursorが優れていると感じました。イベントで活用するのであればChatGPTのCanvas機能がおすすめです。
バイブコーディングにおけるプロンプトのベストプラクティスに関してはこちらもご覧ください。
DMM 生成AI 学び放題では、初心者から上級者まで、安心して進められる「学習コース」を用意しています。開発・営業・マーケ… あなたにピッタリな学習ステップで、日々成長を実感できるような、体系化されたカリキュラムをご活用ください！