Codexプロンプトの型を掴む

Codexを効果的に活用するためには、適切なプロンプトを作成するスキルが不可欠です。本レッスンでは、すぐに活用できる具体的なプロンプト例を通じて、その「型」を習得することを目指します。

プロンプトの丸暗記ではなく、目的、利用者、入力、出力、条件、作業範囲、変更しないこと、完成条件といった要素をどのようにCodexに伝えるか、その構造を理解することが重要です。これらのプロンプトはあくまで出発点です。あなたの作りたいものに合わせて、アプリ名、入力項目、条件、出力内容、注意点などを変更し、柔軟に応用してください。

1. まず仕様を整理してもらうプロンプト

まだ漠然としたアイデア段階で、具体的なコードを書く前に、CodexにWebアプリの仕様を整理してもらうためのプロンプトです。目的、利用者、入力、出力、機能の優先順位などを明確にすることで、次のステップに進むための土台を築きます。

以下の内容をもとに、小さなWebアプリの仕様を整理してください。
まだコードは書かないでください。

目的：〇〇を楽にしたい

利用者：〇〇

入力する情報：〇〇

出力したい結果：〇〇

最初に作りたい機能：〇〇

後回しにしたい機能：〇〇

初心者にもわかるように、

1. アプリの目的

2. 必要な画面

3. 入力項目

4. 必要な機能

5. 作らない機能

6. 完成条件

に分けて整理してください。

2. 最小構成を提案してもらうプロンプト

大きなツールを一度に開発するのではなく、まずは最小限の機能でスタートしたい場合に有効なプロンプトです。Codexに「最小構成」という制約を与えることで、初心者が理解しやすく、開発しやすいシンプルな機能セットを提案させることができます。

〇〇というツールを作りたいです。
ただし、最初から大きく作らず、初心者が理解しやすい最小構成で始めたいです。
目的は〇〇です。
利用者は〇〇です。
最初に必要な機能だけに絞ってください。
以下を整理してください。

1. 最初に作るべき最小機能

2. 後回しにする機能

3. 必要な入力項目

4. 画面に表示する内容

5. 動作確認の方法

6. 注意点

まだコードは書かないでください。

3. 新規で小さなWebアプリを作るプロンプト

特定の目的に特化した、シンプルなWebアプリのコード生成を依頼するプロンプトです。ログイン機能やデータベース連携など、複雑な要素を「作らない」と明確に指定することで、初心者にも理解しやすいHTML、CSS、JavaScriptのみで構成されたコードを得やすくなります。

目的は、〇〇をするための小さなWebアプリを作ることです。
利用者は、自分一人です。
入力項目は、〇〇、〇〇、〇〇です。
ボタンを押すと、入力内容をもとに〇〇を表示してください。
最初は、ログイン機能、データベース保存、本番公開、外部API連携は作らないでください。
HTML、CSS、JavaScriptで、初心者にも理解しやすいシンプルな構成にしてください。
作成後に、

1. 作成したファイル一覧

2. 各ファイルの役割

3. 使い方

4. 動作確認手順

5. 今後追加できる機能

を説明してください。

4. メモアプリを作るプロンプト

練習用の具体的なメモアプリ作成を通じて、Codexによるコード生成を体験するためのプロンプトです。必要な機能と作らない機能を具体的に列挙し、保存方法（localStorage）まで指定することで、Codexがより的確なコードを生成できるように導きます。

練習用のメモアプリを作ってください。
目的は、思いついたことを短く記録できるようにすることです。
利用者は自分一人です。
必要な機能は以下です。

1. メモ本文を入力できる

2. 保存ボタンでメモを保存できる

3. 保存したメモを一覧表示できる

4. 各メモを削除できる

5. 画面を更新してもメモが残る

最初は、検索、タグ、ログイン、クラウド保存、データベース連携は作らないでください。
localStorageを使ったシンプルな保存で構いません。
HTML、CSS、JavaScriptで作ってください。
初心者向けに、各ファイルの役割と動作確認手順も説明してください。

5. チェックリストアプリを作るプロンプト

業務で役立つシンプルなチェックリストアプリの作成を依頼するプロンプトです。初期チェック項目や、チェック状態の永続化（画面更新後も残る）といった具体的な要件を盛り込むことで、実用的なコード生成を促します。

業務用チェックリストアプリを作ってください。
目的は、作業前の確認漏れを防ぐことです。
利用者は自分一人です。
最初のチェック項目は以下です。

1. 資料を確認した

2. 宛先を確認した

3. 添付ファイルを確認した

4. 内容に誤字脱字がないか確認した

5. 送信後の記録を残した

必要な機能は以下です。

1. チェック項目を表示する

2. チェックを入れられる

3. 未完了数を表示する

4. すべて完了したらメッセージを表示する

5. 画面を更新してもチェック状態が残る

最初は、項目追加、ログイン、共有機能は作らないでください。
HTML、CSS、JavaScriptで初心者向けに作ってください。

6. CSV整理ツールを作るプロンプト

ファイル処理を伴う実用的なツールの作成を依頼するプロンプトです。CSVの列構造を具体的に示し、特定の条件での抽出と表示を要求することで、Codexがデータ処理ロジックを含むコードを生成できるようにします。個人情報を使わない前提も指定し、安全な開発を促します。

CSV整理ツールを作ってください。
目的は、問い合わせ一覧CSVから未対応の問い合わせだけを確認できるようにすることです。
利用者は自分一人です。
CSVの列は以下です。
顧客名、メールアドレス、問い合わせ内容、対応状況、登録日
CSVファイルを選択すると、対応状況が「未対応」の行だけを画面に一覧表示してください。
抽出結果の上に、未対応件数も表示してください。
最初は、CSV出力、ログイン機能、データベース保存、本番公開は作らないでください。
本物の個人情報は使わず、サンプルデータで動作確認する前提です。
HTML、CSS、JavaScriptで作ってください。
作成後に、使い方と動作確認手順を説明してください。

まとめ

本レッスンで紹介したプロンプト例は、Codexを効果的に活用するための「型」を示しています。これらの型を理解し、あなたの具体的な要件に合わせてプロンプトをカスタマイズすることで、さまざまな小さなツールやアプリケーションを効率的に開発できるようになります。ぜひ、これらのプロンプトを参考に、Codexとの対話を通じてアイデアを形にする練習を重ねてください。