付録1
想定学習時間: 15分
このレッスンでは、AIを活用してコードの理解を深めたり、開発作業を効率化したりするための具体的なプロンプト（指示文）の書き方を学びます。コードの説明からエラー修正、機能追加、デザイン調整、そして作業のやり直しまで、様々な開発フェーズで役立つプロンプトのパターンを習得しましょう。
未知のコードや、しばらく触れていなかったコードの理解を深める際に役立ちます。AIにコードの全体像や重要な部分を分かりやすく説明してもらうための指示のポイントを把握しましょう。
プロンプト例:
以下のコードについて、初心者にもわかるように説明してください。
特に、
1. このコード全体が何をしているか
2. 重要な処理の流れ
3. どの部分が入力を受け取っているか
4. どの部分が画面表示を更新しているか
5. どの部分がデータを保存しているか
6. 初心者が注意すべき点
を説明してください。
専門用語が出る場合は、その場で短く説明してください。
[ここに説明してほしいコードを貼り付け]プロジェクトの構造を理解し、各ファイルがどのような役割を担っているかを知るために使います。特に、新しいプロジェクトに参加した際や、全体像を把握したい場合に有効です。
プロンプト例:
今回作成したファイルを一覧にしてください。
それぞれのファイルについて、
1. ファイル名
2. 役割
3. 主に書かれている内容
4. 初心者が見るべきポイント
を説明してください。
そのあと、このアプリ全体がどのような流れで動くのかを、操作手順に沿って説明してください。
[ここにファイル一覧と簡単な説明を貼り付け、またはAIにファイル一覧を生成させるためのコンテキストを提供]開発した機能が正しく動作するかを確認するためのテスト計画を作成します。網羅的なチェックリストを作成することで、品質の高いソフトウェア開発に繋がります。
それぞれの項目について、「何を操作するか」と「どうなれば成功か」を具体的に指示します。
プロンプト例:
このツールが正しく動くか確認するためのチェックリストを作ってください。
以下の観点で整理してください。
1. 正常に動く場合
2. 入力が空欄の場合
3. 想定外の入力がある場合
4. 画面表示の確認
5. 保存処理の確認
6. 既存機能への影響確認
それぞれ、「何を操作するか」「どうなれば成功か」を初心者向けに書いてください。
[テストしたいツールの概要を説明]発生したエラーの原因を特定し、修正のための手がかりを得るために利用します。AIに正確な情報を提供することで、より的確な分析と提案を引き出せます。
これらの情報をもとに、AIに原因の推測、確認すべき順番、そして最小限の修正案を提案してもらいます。
プロンプト例:
以下のエラーが出ています。
やりたいこと：ユーザーがフォームを送信すると、データがデータベースに保存されるようにしたい。
実際に起きていること：フォームを送信すると、画面にエラーが表示され、データが保存されない。
期待していた動き：フォーム送信後、成功メッセージが表示され、データがデータベースに追加される。
エラーメッセージ：`TypeError: Cannot read properties of undefined (reading 'name')`
直前に変更したこと：フォームの入力フィールドに新しい`id`属性を追加した。
まず、原因として考えられることを初心者向けに説明してください。
次に、確認すべき順番を出してください。
そのあと、最小限の修正案を提案してください。
まだ大きくコードを書き換えないでください。特定の不具合や問題に対して、最小限のコード修正を依頼する際に使います。変更範囲を明確にすることで、意図しない影響を防ぎます。
修正前に、AIに原因の見立て、変更予定のファイル、修正方針を説明させ、既存機能への影響がないかを確認することも重要です。
プロンプト例:
現在、ユーザー登録機能までは正常に動いています。
今回は、登録後に表示される成功メッセージが常に「登録失敗」と表示される問題だけ修正してください。
変更してよい範囲：`src/components/UserRegistrationForm.js` 内のメッセージ表示ロジック
変更しないでほしい範囲：ユーザー登録のAPI呼び出し部分、データベースへの保存処理
期待する動き：ユーザー登録が成功した場合、「登録成功」と表示される。
現在の問題：登録が成功しても「登録失敗」と表示される。
修正前に、
1. 原因の見立て
2. 変更予定のファイル
3. 修正方針
を説明してください。
そのうえで、最小限の修正を行ってください。
既存機能に影響が出そうな場合は、先に教えてください。既存のアプリケーションに新しい機能を追加する際に、AIに具体的な実装を依頼します。追加したい機能の要件を明確に伝えることが成功の鍵です。
実装前に、変更予定のファイルと実装方針を説明させ、追加後に動作確認手順も提示してもらうと良いでしょう。
プロンプト例:
現在、商品一覧表示機能までは動いています。
今回は、新しく「商品の検索機能」だけ追加してください。
追加したい機能：商品名で部分一致検索ができる入力フィールドと検索ボタンを追加し、検索結果を一覧に表示する。
期待する動き：検索フィールドにキーワードを入力して検索ボタンを押すと、キーワードを含む商品のみが表示される。
変更しないでほしい機能：商品データの追加・編集・削除機能
後回しにする機能：価格帯での絞り込み、カテゴリでの絞り込み
修正前に、変更予定のファイルと実装方針を説明してください。
追加後に、動作確認手順も出してください。アプリケーションの見た目（UI/UX）のみを改善したい場合に利用します。機能的な変更を伴わないため、CSSファイルのみの変更を指示するなど、明確な制約を設けることが重要です。
修正後に、AIにどこを変更したかを説明させ、機能に影響が出ていないことを確認します。
プロンプト例:
今回は、見た目だけを修正してください。
修正したい内容：ページの背景色を薄いグレーにし、ボタンの角を丸くして、ホバー時の色を少し濃くする。
変更してよいファイル：CSSファイルのみ
変更しないでほしい内容：HTMLの構造、JavaScriptの処理、保存処理、機能全般
期待する見た目は、全体的に柔らかく、モダンな印象です。
修正後に、どこを変更したか説明してください。
機能には影響を出さないでください。レスポンシブデザインに対応させ、ツールをスマートフォンなどのモバイルデバイスでも快適に利用できるようにする際に使います。主にCSSの調整が中心となります。
修正後に、AIにスマホ表示の確認手順を提示してもらうことで、自分でテストする際のガイドラインが得られます。
プロンプト例:
現在のツールを、スマホでも見やすくしてください。
目的は、スマホ画面で入力欄やボタンが見切れず、操作しやすくすることです。
変更してよいのは、主にCSSです。
HTML構造やJavaScriptの処理は、必要最小限以外は変更しないでください。
確認したいポイントは以下です。
1. 入力欄が画面幅に収まる
2. ボタンが押しやすい
3. 一覧表示が横にはみ出しにくい
4. 文字が小さすぎない
5. 余白が詰まりすぎていない
修正後に、スマホ表示の確認手順を説明してください。AIが行った変更が期待と異なった場合や、特定の状態に戻したい場合に利用します。どの部分を残し、どの部分を元に戻すかを明確に指示することが重要です。
まず現在の状態を整理させ、元に戻すための方針を説明させ、その上で最小限の修正で戻してもらうように指示します。作業後に、何を戻し、何を残したかを説明してもらうことで、変更内容を把握できます。
プロンプト例:
今回の変更は期待と違いました。
いったん、3日前のコミットの状態に戻したいです。
残したいもの：`README.md`への更新、新しく追加した画像ファイル
戻したいもの：`src/components/ProductList.js`への変更、`src/styles/main.css`への変更
削除してよいもの：特にありません。
削除してはいけないもの：`src/api/products.js`
まず、現在の状態を整理してください。
次に、元に戻すための方針を説明してください。
そのあと、必要最小限の修正で戻してください。
作業後に、何を戻したか、何を残したかを説明してください。