ChatGPTで vibe coding：Canvas、Codex、ChatGPTからのアプリ開発

ChatGPTでの vibe coding には3つの方法があります。チャットで小さなアプリを頼み、canvasでプレビューする方法。実際のコードベースのタスクを、OpenAIのコーディングエージェントであるCodexに任せる方法。そして、MythexのようなAIアプリビルダーをつないで、ChatGPTからデータベース付きのフルアプリを構築、ホスティング、公開する方法です。1つ目は単一ページのツールに最速で、2つ目は開発者向け、3つ目はChatGPTを離れずに、ログインとデータのあるライブのアプリが手に入ります。

それぞれの仕組み、プロンプト、限界を紹介します。この言葉の背景を知りたい方は、vibe coding とはをお読みください。

方法1：ChatGPTのチャットとcanvas

手早いツールなら、頼むだけです。ChatGPTがコードを書き、canvasでは簡単なHTMLやReactのページを表示できるので、クリックして試し、変更を頼めます。

請求額、チップの割合（10、15、20のボタンと自由入力欄）、人数を入力する単一ページのチップ計算機を書いてください。入力に合わせて、チップと1人あたりの金額を更新して表示してください。スマホでもすっきり見えるようにしてください。

**向いているもの：**計算機、簡単なゲーム、ランディングページの下書き、学習。「コードを始めたばかりの人向けに、このファイルを説明して」と頼むと、早く学べます。

**限界：**バックエンドがありません。入力した内容がほかのユーザーのために保存されることはなく、ログインもなく、共有するにはコードをどこかにコピーして自分でホスティングする必要があります。「チームが見られるように保存して」と言った時点で、チャットでは足りなくなります。

コピペ式の vibe coding

多くの人は、ChatGPTにコードを頼み、それを自分のパソコンのファイルやホスティングサービスに貼り付けるところから始めます。小さな静的サイトならうまくいきますが、すぐに行き詰まります。変更のたびに正しいファイルを探し、正しい部分を貼り付け、置き換えたものに他のものが依存していないことを祈るからです。これを数回以上繰り返していると気づいたら、次の2つの方法に移りましょう。

方法2：実際のコードベース向けのCodex

CodexはOpenAIのソフトウェア作業用のエージェントです。普通の言葉でタスクを渡すと、リポジトリ上で、コードを読み、複数のファイルにまたがって変更し、コマンドやテストを実行し、結果をレビュー用に返します。OpenAIはこれをChatGPT、コマンドラインツール、エディタ拡張として提供しています。どのプランに含まれるか、現在の上限は、OpenAIのサイトでご確認ください。

タスク形式のプロンプトが最も向いています。

このリポジトリの注文ページに、CSVエクスポートボタンを追加してください。現在絞り込まれている注文を、日付、顧客、合計、状態の列でエクスポートします。エクスポート関数のテストを追加して、テストスイートを実行してください。

**向いているもの：**既存のプロジェクトを持ち、タスクをまるごとエージェントに任せたい開発者や技術系の創業者。あなたの技術構成や規約に合わせて動きます。

**引き続き自分で行うこと：**アプリを動かす場所、データベース、シークレット、デプロイ、ドメイン。Codexはコードを変更するもので、ホスティングではありません。

CodexとMythexを組み合わせる

CodexはMCPサーバーにも接続でき、Mythexのものも使えます。Codexのカスタム MCPサーバーとしてhttps://mcp.mythex.ai/mcpを追加し、Mythexでアクセスを承認すると、Codexがクラウドのサンドボックスで Mythexのプロジェクトを操作でき、プレビュー、データベース、公開はMythexが担当します。手順は、記事Claude、Cursor、CodexからMythexアプリを作るで解説しています。

方法3：MythexでChatGPTからフルアプリを作る

ChatGPTの会話から離れずに、最終的に本物のホスティングされたアプリを手に入れたいなら、Mythexをつなぎます。MythexはChatGPTの中でアプリとして動きます。ChatGPTは、MCP（アシスタントが外部でホスティングされたツールを使えるようにするオープンなプロトコル）を通じてMythexのツールと通信します（MCPとは）。

接続すると、ChatGPTはMythexのプロジェクトを作成し、プライベートなクラウドのサンドボックスでコードを書き、ライブプレビューを開始し、データベースとファイルストレージを追加し、アプリを公開URLに公開できます。結果にはリンクが付いて返ってくるので、Mythexでプロジェクトを開き、プレビューを確認できます。

接続の手順

1. Mythexでアカウント設定を開き、MCPアドレスをコピーします。
2. ChatGPTのアプリまたはコネクタの設定で、そのアドレスを使ってMythexを追加します。ChatGPTのメニューは時々変わるので、名称が違う場合はOpenAIのアプリ追加のヘルプページに従ってください。
3. Mythexのページが開きます。サインインしてアクセスを許可を選びます。貼り付けるキーはありません。
4. 会話を始めて、依頼の中でMythexに言及します。

接続はどのMythexプランでもできます。サンドボックスのツール（構築、プレビュー、公開）にはMythex Pro（月額$25）が必要で、サンドボックスの時間とホスティングはMythexのクレジットから使われます。ChatGPTの利用は、OpenAIのプランの範囲内です。

最初に試すプロンプト

Mythexを使って、就職活動の応募管理アプリを作ってください。会社、職種、リンク、応募日、状態（応募済み、面接、内定、不採用）、メモを入力して応募を追加します。状態ごとのボードでカードをドラッグでき、週ごとの応募数を示すシンプルなグラフも付けてください。すべてデータベースに保存し、ログインで保護してください。プレビューを開始して、リンクを教えてください。

そのあとは、1メッセージにつき1つの変更です。

Mythexのプロジェクトで、各応募にリマインダーの日付を追加し、リマインダーが今日か期限切れのカードをハイライトしてください。

公開して、ライブのURLを送ってください。

**向いているもの：**すでにChatGPTで計画し、考える習慣があり、ホスティングを学ばずに、データが残るライブの成果物が欲しい人。普通のMythexのプロジェクトなので、いつでもMythexのチャットで続きができます。

作るものに合う方法は？

ChatGPTで効くプロンプトの習慣

• 使ってほしいツールの名前を出す。「Mythexを使って…」と書けば、一般的な回答ではなく、あなたのプロジェクトへの依頼だと伝わります。
• **1メッセージにつき1つの変更。**編集を長く並べると、副作用も長くなります。
• 大きな手順の前に計画を頼む。「何かを変更する前に、変更する内容を挙げて、私のOKを待って。」
• **エラーはそのまま貼る。**エラーの全文は、どんな説明より価値があります。
• 何が変わったか聞く。「直近3つの変更を普通の言葉でまとめて」と頼めば、コードを読んでいなくても状況を見失いません。

ほかのプロンプトは、vibe coding プロンプト集にあります。

安全に使うために

• 本物のパスワードやAPIキーを、ChatGPTの会話に貼らないでください。アプリにキーが必要なら、プロジェクトのシークレットに保存しましょう。Mythexのツールが報告するのはシークレットの名前だけで、値は決して報告しません。
• 公開する前に、ユーザー同士のデータが見えないこと、ブラウザで動くコードにキーが入っていないことを確認してください。vibe coding は安全？ガイドに、貼り付けて使えるプロンプト付きで確認項目を載せています。

Claudeも使っていますか？姉妹編のClaudeとClaude Codeでの vibe codingをご覧ください。モデルごとの比較は、アプリ開発におけるChatGPT vs Claude vs Geminiをご覧ください。

よくある質問