AIコーディングを使えば、プログラミング経験がなくても画面やコードの原案を作れます。ただし、AIへ「アプリを作って」と丸投げすると、動いているように見えても、データ消失、秘密情報の露出、修正不能なコードが残ることがあります。
初心者が最初に目指すべきものは、多機能なサービスではなく、個人情報を扱わない小さなアプリです。この記事では、題材選びから公開前の安全確認までを8ステップで説明します。専門用語を暗記するより、変更を小さく分け、毎回動作を確認する習慣を先に身につけましょう。
目次
結論：最初は「1画面・1目的・保存なし」で作る
最初の題材には、入力と結果が同じ画面にあり、ログインや決済を必要としないものが向いています。
- 文字数カウンター
- 見積もり概算計算機
- タスクの並べ替え
- 営業メールの下書き整理
- チェックリスト
顧客名、メールアドレス、住所、決済情報を保存するアプリは避けます。外部APIも最初は使わず、まずブラウザ内のダミーデータだけで動くものを完成させてください。
AIコーディングで人が担当すること
AIはコード作成、エラーの説明、テスト項目の提案を支援できます。一方、次の判断は人が行います。
- 誰のどの作業を短くするか
- 何を完成とするか
- 入力データを保存してよいか
- 費用や利用規約を受け入れられるか
- 出力結果が正しいか
- 公開後に誰が修正するか
AIが「問題ありません」と答えても、安全性や正確性が保証されたわけではありません。実際の画面、通信、保存先を人が確認します。
ステップ1：完成条件を3行で決める
作り始める前に、次の3行を書きます。
利用者：[誰が使うか]
目的：[何を短時間で終えたいか]
完成条件：[入力すると何が表示されれば合格か]例は「小規模事業者が、作業時間と単価を入力し、税抜きの概算金額を確認できる」です。ログイン、履歴保存、請求書発行は最初の完成条件に含めません。
ステップ2：画面を紙に描く
コードを書く前に、入力欄、実行ボタン、結果、エラー表示を紙に描きます。画面遷移は増やさず、1画面に収めます。
各入力欄について「必須か」「何を入力できるか」「空欄や不正値のとき何を表示するか」も決めてください。ここが曖昧だと、AIは見た目を作れても正しい動作を作れません。
ステップ3：AIへ実装計画だけを依頼する
いきなりコードを出させず、まず計画を確認します。
あなたは初心者を支援するWeb開発者です。次の小さなアプリについて、まだコードを書かずに実装計画を作ってください。
利用者：[利用者]
目的：[目的]
完成条件：[完成条件]
入力項目：[項目と入力条件]
結果：[表示内容]
制約：
- 1画面で完結
- ログイン、決済、外部API、個人情報保存は使わない
- 追加ライブラリは必要な場合だけ提案し、理由を説明
- ファイル構成、処理の流れ、確認項目を初心者向けに説明
- 不足情報は推測せず質問する計画に予定外の会員機能やデータベースがあれば削ります。必要なファイルと起動方法を説明できない提案も、そのまま採用しないでください。
ステップ4：最小の動作だけ実装する
最初の実装では、デザインより正常動作を優先します。AIへ次のように依頼します。
承認した計画のうち、入力→計算→結果表示の最小機能だけを実装してください。
変更するファイルを先に列挙し、各変更の目的を説明してください。
一度に追加する機能は1つにしてください。
完成後に、私が手動で確認する手順を番号付きで示してください。生成されたコードを保存する前に、どのファイルが変わるか確認します。既存ファイルを丸ごと置き換える提案が出た場合は、必要な箇所だけ変更するよう依頼します。
ステップ5：正常・異常・境界の3種類を試す
「動いた」は1回成功しただけでは判断できません。最低でも次を試します。
| 種類 | 入力例 | 確認内容 |
|---|---|---|
| 正常 | 2時間、単価3000円 | 6000円になる |
| 異常 | 文字、空欄 | 分かるエラーが出る |
| 境界 | 0、非常に大きな数 | 意図した制限になる |
結果は画面の見た目だけでなく、再読み込み後の状態、スマートフォン幅、キーボード操作でも確認します。エラーをAIへ渡すときは、秘密情報を削除し、発生手順、期待結果、実際の結果を添えます。
ステップ6：変更前へ戻せる状態を作る
AIへ修正を頼む前に、動いているファイルをコピーするか、Gitで変更履歴を残します。初心者ほど、正しく動いた時点を保存しておくことが重要です。
修正依頼は「全部直して」ではなく、1つの問題に限定します。
問題：空欄でも計算結果が表示される
期待：空欄の場合は結果を出さず、入力を促す
再現手順：ページを開き、何も入力せずボタンを押す
制約：この問題以外の見た目と処理は変更しない変更後は、問題箇所だけでなく、以前動いていた正常ケースも再確認します。
ステップ7：秘密情報と個人情報を点検する
公開前に、コードと設定ファイルを検索します。
- APIキー、パスワード、アクセストークンがない
- 顧客データや本物のメールアドレスがない
- テスト用の秘密情報が残っていない
.envなどの秘密ファイルが公開対象に含まれない- エラー画面に内部情報を出さない
APIキーをJavaScriptへ直接書くと、ブラウザを開いた利用者に見える可能性があります。外部APIが必要になった段階では、サーバー側で秘密情報を管理し、利用量制限と失効手順を用意します。判断できない場合は公開せず、経験者へ確認してください。
ステップ8：公開後の運用を決める
公開前に次を記録します。
- 公開URLと管理者
- 使用サービスと月額費用
- コードの保管場所
- バックアップ方法
- 障害時に非公開へ戻す方法
- 月1回の動作確認担当
無料枠でも、利用上限、独自ドメイン、商用利用、休止条件を確認します。作成ツールを選ぶ段階ではAIホームページ作成ツールの選び方、費用の全体像はAIホームページ作成にかかる費用も参考にしてください。
初心者がつまずく5つの失敗
機能を同時に追加する
原因を切り分けられなくなります。1変更ごとに保存、起動、確認を行います。
エラー文を読まずに再生成する
別の場所まで変更され、問題が増えます。エラー全文と発生手順を渡し、原因候補と最小修正を求めます。
見た目だけで完成と判断する
空欄、不正値、通信失敗、スマートフォン表示を試します。
AIへ秘密情報を貼る
APIキー、顧客情報、社内URLは入力しません。例示にはダミーデータを使います。
公開後の担当を決めない
サービス更新や障害に対応できません。担当者、確認日、停止手順を決めてから公開します。
公開前チェックリスト
- [ ] 1画面・1目的の最小機能になっている
- [ ] 完成条件を実際の操作で確認した
- [ ] 正常・異常・境界テストを行った
- [ ] スマートフォンとキーボードで操作できる
- [ ] APIキー、パスワード、個人情報がない
- [ ] 戻せる変更履歴またはバックアップがある
- [ ] 使用サービスの料金と商用利用条件を確認した
- [ ] 管理者、点検日、停止方法を記録した
まとめ
AIコーディング初心者に必要なのは、すべての文法を覚えることではありません。小さな完成条件を決め、計画を確認し、1機能ずつ実装し、毎回テストして戻せる状態を残すことです。
サイトの文章や構成から始める場合はAIでWebサイトを作るプロンプト、入力や計算を含むアプリ全体の設計はAIでWebアプリを作る方法を合わせて確認してください。
関連記事
