「プログラミングは分からない。ChatGPTに頼めば、自分のアプリを作れるの？」
ChatGPTにはCodexという、プログラムを作る専用の場所があります。2026年11月8日に、ToDoアプリを1つ作ってみました。この記事は、そのときの手順と結果の記録です。ChatGPTとCodexの画面の操作は、わたしの指示でClaude Code（AI）が行い、できたものの確認も同じ日にブラウザで行っています。
- ToDoアプリ（追加・完了・削除・保存）が、Codexへの最初の指示だけで動きました。不具合を直してもらう依頼は0回で、強さは「低」のままでした
- 考えるのはChatGPTのChat、ファイルを作るのはCodexです。Chatで仕様書を作り、Codexに渡しました
- 実際の画面で確かめる作業は、人が行います。Codex自身も「実画面の目視確認は未完了」と報告しました
- スマホの実機では確かめていません（PCのブラウザの幅375pxまで）。実験は1回だけです。毎回同じ結果になるとは言えず、ほかのモデルや設定より優れていると示すものでもありません
上の画面が、Codexが最初に作った画面です（幅375px）。一覧の中身は、撮影のためにわたしが入れたデータです。
試した条件と、必要なもの
| 項目 | 内容 |
|---|---|
| 日付 | 2026年11月8日 |
| Chat | ChatGPT（Plus）の一時チャット。画面の思考量の表示はHigh |
| Codex | ChatGPTのデスクトップアプリ（Windows）のCodex |
| モデルと強さ | GPT-6.1 Sol・強さ「低」（入力欄の表示）。人が手動で選び、実験中は変えていない |
| 選んだ理由 | デフォルト設定での開発を試すため |
| 最初の実装 | 1回 |
| 機能追加 | 1回 |
| 修正の依頼 | 0回（不具合なし） |
| 操作と確認 | 画面の操作はClaude Code（AI）が行い、できたファイルはChromeで開いて確かめた。Codexの実行中の画面は撮っていない |
ここでいう「デフォルト設定」は、Codexの画面で「デフォルト（おすすめのモデルセット）」を選んだときの組み合わせです。つまみの2番目に出ました（11月8日の画面で確認）。全員の初期設定とは限りません。表示は、プランやアプリのバージョンで変わります。
必要だったものは4つです。ChatGPTのアカウント、デスクトップアプリ（Codexを開くのに使いました）、できたファイルを開くブラウザ、作業用の空のフォルダです。
公式ヘルプでは、Codexは無料版を含む全プランに含まれ、使える量はプランで違います（2026年11月8日に確認）。今回はPlusで試したので、無料版での動きは確かめていません。
ステップ1：ChatGPTで相談する
場所は、ChatGPTのChatです。次の文を貼って送ります。
プログラミング未経験の私が、ブラウザで動く小さなToDoアプリを作りたいです。使うのは自分ひとりで、スマホでも使いたいです。機能は、追加・完了の切り替え・削除・ブラウザを閉じても残ること、の4つだけにしたいです。この条件で、次の3つを箇条書きで短く教えてください。
1. 画面にあるべきもの
2. 初心者がつまずきやすい点
3. 今回は作らないもの
返ってきたのは、画面にあるべきもの（入力欄・追加ボタン・一覧・チェックボックス・削除ボタン）、つまずきやすい点、今回は作らないものの3つでした。つまずきやすい点は3つ挙がりました。保存にはlocalStorageというブラウザの機能を使うこと。ブラウザのデータを消すと消えること。PCとスマホで同じ内容が自動では共有されないこと。
最初の1回は、文を入力する途中で送信されてしまい、3つの項目が抜けたまま送られました。このことは、後半の「実際に起きた問題」に書きました。
ステップ2：仕様書を作ってもらう
同じ会話で、続けて頼みます。
ここまでの内容から、ToDoアプリの仕様書を作ってください。
– 機能は「追加・完了・削除・保存」の4つだけにする
– 画面は1つだけ
– 技術は、HTMLとCSSとJavaScriptの1つのファイル（index.html）。インストール不要で、ブラウザで開けば動くこと
– 最後に「今回は作らないもの」も箇条書きで書く
専門用語には、短い説明をつけてください。
約3,400字の仕様書が返ってきました。中身は、画面の5つの要素、機能4つの動き、使う技術、完成の条件8項目、作らないもの、の順です。ChatGPT自身の注意書きもあり、スマホでローカルのHTMLを開くと、保存が安定しない可能性があるそうです。スマホで使いたい人は、この点に注意が要ります。
返事の下にあるコピーのボタンで、仕様書をまるごとコピーできます。次のステップで貼ります。
ステップ3：Codexで作る
ChatGPTのデスクトップアプリを開きます。左上の「ChatGPT」のメニューから「Codex」を選びます。説明は「ビルド、デバッグ、リリース」です。
入力欄の上の「プロジェクトを選択」を押し、「新しいプロジェクト」を選びます。
「プロジェクトを作成」の画面で、好きな名前を入れます。「ソースフォルダー」の「追加」を押し、作業用の空のフォルダを選んで、「プロジェクトを作成」を押します。
すると「このフォルダーを信頼しますか？」と出ます。説明には、フォルダの中のファイルを読み取り、編集し、実行できる、とあります。今回は、自分で作った空のフォルダだけだったので「フォルダーを信頼する」を押しました。中身を知らないフォルダや、大事なファイルが入ったフォルダでは、押さないでください。
入力欄に、次の文を貼って送ります。【 】の所は、ステップ2の仕様書に置き換えます。
このフォルダに、ToDoアプリを作ってください。
仕様は次のとおりです。
【ここにステップ2の仕様書を貼る】
守ってほしいこと:
– ファイルは index.html の1つだけ
– 外部のライブラリやCDNは使わない
– 空の入力は追加しない
– 入力した文字は、HTMLとして解釈せず、文字のまま表示する
– 完成したら、ブラウザで確認する手順を3行で書く
今回は、ChatGPTが返した仕様書（約3,400字）をそのまま貼りました。モデルと強さは変えていません。
送ってから約55秒で、フォルダに index.html ができました。画面には「1m 28s 作業しました」と出て、そのあと完了の報告が届きました。変更されたのは index.html の1つだけです。
報告には「nodeによる構文・DOM模擬テストは成功」とあります。一方で、「確認用ブラウザの制限で実画面の目視確認は未完了」とも書かれていました。画面を見て確かめるのは、自分の仕事です。
作業のあとに「index.html を編集しました」というカードが出て、「変更内容を表示」で変わった中身を見られ、「元に戻す」で取り消せます。
ステップ4：動作確認する
index.html をダブルクリックして、ブラウザで開きます。次を順に確かめます。
- ☐ 入力欄と「追加」ボタンがある
- ☐ 何も入れずに「追加」を押しても、何も増えない
- ☐ 「牛乳を買う」を入れて「追加」を押すと一覧に出て、入力欄が空になる
- ☐ チェックを付けると、取り消し線が入る
- ☐ ブラウザを閉じて開き直しても、一覧と完了の状態が残っている
- ☐ 「削除」を押すと、その行だけが消える
- ☐
<b>テスト</b>のように記号を含む文字を入れても、太字にならず、そのまま文字で出る - ☐ ブラウザの幅を細くしても、横にはみ出さない
確認した結果です（Chromeで、2026年11月8日）。
| 確認したこと | 初回の結果 |
|---|---|
| 追加（空白だけの入力は増えない） | 動いた |
| 完了・未完了の切り替えと取り消し線 | 動いた |
| 削除（同じ文言が2つあっても、押した行だけ） | 動いた |
| 再読み込み後の復元 | 動いた（完了の状態も同じ） |
| 記号を含む入力（画像の読み込み指示を含む文字など） | 文字のまま表示された |
| 壊れた保存データ | エラーを表示して、次の追加から動いた |
| 375px幅の表示 | はみ出しなし |
同じ文言を2つ入れて2つ目を消す、保存データをわざと壊す、といった確認は、チェックリストの外で足したものです。初心者の方は、上の8項目で十分です。
ステップ5：機能を足す
動いたら、機能を1つだけ足してみます。同じCodexの会話で、「すべて・未完了・完了」の切り替えと、件数の表示を頼みました。頼む前に、今のファイルのコピーを別の名前で残しておくと、戻したいときに安心です。
今ある index.html を直して、次の2つを足してください。
1. 「すべて」「未完了」「完了」の3つのボタンで、一覧の表示を切り替える
2. 一覧の上に「未完了 ◯ 件 / 全部で ◯ 件」と表示する
今ある保存のデータは、そのまま引き継ぐこと。
変えたところを、最後に箇条書きで教えてください。
約50秒で終わり、ファイルは130行から156行になりました。28行が増え、2行が変わっています。最初のファイルで保存したデータは、そのまま表示されました。
切り替えのボタンと、「未完了◯件／全部で◯件」の表示が加わっています。「未完了」表示でチェックを付けるとその項目が一覧から消え、件数が減りました。絞り込み中に削除しても、押した行だけが消えました。エラーは出ませんでした。
実際に起きた問題と、できなかったこと
- Chatの入力欄で、AIが改行を含む文を入力すると、1行目の改行で送信されました。1行目だけが送られ、ChatGPTは「次の3つの具体的な項目が抜けているようです」と返しました。ChatGPTの入力欄はEnterで送信されます。貼り付けるか、Shift+Enterで改行すれば避けられます
- Codexは実際のブラウザでの確認をしていません。報告の「実画面の目視確認は未完了」は、そのとおりでした
- ChatGPTの仕様書は約3,400字と長めでした。余計な機能は足されませんでしたが、初心者が読み切るには長い量です
- Codexの報告に
npm run lintなどが「実行不可」と出ました。package.jsonがないためで、今回のアプリの不具合ではありません - スマホの実機では確かめていません。PCのブラウザの幅375pxで見ただけです。スマホで使うには、ファイルをスマホで開く方法か、公開する方法が別に要ります
- 実験は1回だけです。Codexの出力は毎回変わる可能性があり、成功率は言えません
直す必要のある不具合は出なかったので、Codexに「エラーを直して」と頼む場面は、今回は試していません。もし動かない項目があったら、動かなかった項目と、実際に見えたことを、そのまま伝えるのが近道だと思います（この頼み方は試していません）。
試して分かったこと
特別に強い設定にしなくても、小さなToDoアプリは動くところまで進みました。ただし1回だけの実験です。ほかのモデルや強さより良い、あるいは悪い、という比較ではありません。同じように試すときは、上の条件の表に合わせると、結果を比べやすくなります。
Chatで決めたことを文章にしてからCodexに渡すと、やりたいことが1回の指示で伝わりました。ただ、これは機能を4つに絞った小さなアプリで、1回だけの結果です。「アプリが簡単に作れる」とまでは言えません。
HTMLを安全に扱うよう指定したところ、記号を含む入力も文字のまま表示されました。指定せずに頼んだらどうなるかは、試していません。Codexが「テストした」と報告しても、実際の画面では自分で確かめてください。
まとめ
ChatGPTのChatで考え、Codexで作り、ブラウザで自分が確かめる。この3つで、ToDoアプリが動くところまで進みました。次に試すなら、できたファイルをコピーして、ステップ5の頼み方で別の機能を1つだけ足してみてください。
モデルや強さの選び方はChatGPT・Claudeはどのモデルを使えばいい？、CodexとClaude Codeの違いはClaude CodeとCodexの違いにまとめています。
よくある質問
- 無料版でも試せますか？
-
公式ヘルプでは、Codexは無料版を含む全プランに含まれ、使える量はプランで違います。今回はPlusで試したので、無料版で同じように動くかは確かめていません。
- 未経験でも作れますか？
-
今回は、コードを読まなくても、チェックリストで動作を確かめられました。ただ、今回の確認ではコードも読みました。外から入力された文字が実行されない作りかどうかは、見た目では分かりにくいので、「文字のまま表示する」と頼み、記号を含む文字を入れて試してください。
- スマホで使えますか？
-
今回は、PCのブラウザの幅375pxで確かめただけで、スマホの実機では試していません。スマホで使うには、ファイルをスマホに置いて開くか、公開する必要があります。ChatGPTの仕様書にも、保存が安定しない可能性が書かれていました。
次に読む記事
この記事でできるようになったことChatGPTのChatで仕様を決め、Codexに頼んで、小さなアプリを作る流れが分かる
やってみる空のフォルダを1つ作り、ステップ3の文をCodexに貼って、ToDoアプリを作らせてみる
次に「ChatGPTのモデルは、どれを選べばいい？」と思ったら
モデルの選び方を知るChatとCodexの使い分けと、考える量ほかの疑問なら
- Claude CodeとCodexの違いを知るどちらで始めるか迷っている人に
- Claude Codeを知るClaudeを使っていて、同じことを試したい人に
難しかった・違う悩みだった人は、START HERE の「困ったときは」から選べます。
参考（2026年11月8日に確認）