「またエラーか…」
独学でプログラミングを学んでいると、この言葉を何度つぶやいたか分からなくなりますよね。画面に表示される意味不明なエラーメッセージ、何時間も格闘しているのに全く進まない状況。焦りと不安が募り、「自分にはエンジニアの才能がないのかもしれない…」と、自信を失いかけているのではないでしょうか。
何を隠そう、私自身もそうでした。特にJavaScriptの非同期処理でドツボにハマり、丸一日PCの前で固まっていた経験は一度や二度ではありません。
藁にもすがる思いでAIに質問してみる。しかし、返ってくるのは的外れな回答か、ただ修正されたコードだけ。「なぜ、そう直すのか」という一番知りたい部分が分からず、結局何も学べないまま、また同じようなエラーでつまずく…。そんな経験、ありませんか?
AIを単なる「検索エンジン」ではなく、考え方まで教えてくれる「専属メンター」に変えるプロンプトの作り方を、具体的なエラーを例に解説します。
典型的な失敗例
まず、多くの人がやりがちな「うまくいかない質問」の例を見てみましょう。おそらく、あなたも似たような質問をしたことがあるはずです。
件名:助けてください。JavaScriptが動きません。
APIっていうのを使って、ユーザーの名前をリストで出したいです。 でも、真っ白な画面になるだけで、何も表示されません。何が悪いのかさっぱりです。
これがコードです。
function fetchUsers() {
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(data => {
return data;
});
}
function displayUsers(users) {
const userList = document.getElementById('user-list');
users.forEach(user => {
const listItem = document.createElement('li');
listItem.textContent = user.name;
userList.appendChild(listItem);
});
}
const users = fetchUsers();
displayUsers(users);
どうしたら動きますか?コードを直してください。
もう2時間も悩んでます。お願いします!
どうでしょうか?焦りや混乱が伝わってくる、非常に人間味あふれる質問です。しかし残念ながら、この質問の仕方ではAIから質の高い回答を引き出すのは難しいでしょう。
なぜ失敗するのか
なぜ先ほどの質問ではうまくいかないのでしょうか。主な原因は、次の4つです。
-
コンテキスト(背景情報)の欠如: 「APIっていうのを使って」だけでは、あなたが何をしようとしているのか、どんなエラーが出ているのか、AIには全く伝わりません。「コンソールにエラーが出ている」という最も重要な情報や、関連するHTMLコードが欠けているため、AIは推測で答えるしかありません。
-
思考の丸投げ: 「何が悪いのかさっぱりです」「コードを直してください」という姿勢は、問題解決の機会を自ら放棄しているのと同じです。これでは、たとえAIがコードを修正してくれたとしても、あなたの学びには繋がりません。
-
曖昧な要求: 「どうしたら動きますか?」という質問は、あまりにも漠然としています。「問題の根本原因」「修正コードの解説」「次に関連して学ぶべきこと」といった具体的な要求がないため、AIも当たり障りのない一般的な回答しか返せないのです。
-
ペルソナ(役割)の不在: そして、これが最も重要なポイントかもしれません。あなたはAIに何の役割も与えていないのです。そのため、AIはデフォルトの「親切なAIアシスタント」として、表面的な答えを返すことしかできません。
これらの要因が重なることで、時間をかけたのに解決せず、挫折感だけが残るという残念な結果につながってしまいます。
解決策
では、どうすればAIを「頼れるメンター」に変えることができるのでしょうか?答えは、AIに渡す「プロンプト」を劇的に変えることです。
以下に示すのは、私が実際に使い、改良を重ねてきた「メンターAI育成プロンプト」のテンプレートです。これをコピーし、あなたの状況に合わせて書き換えるだけで、AIの回答の質は格段に向上するはずです。
あなたは、経験豊富で非常に忍耐強いシニアWebエンジニアのAIメンターです。あなたの役割は、プログラミング学習でつまずいている独学のエンジニア志望者に対して、単にエラーの解決策を示すだけでなく、エラーの根本原因、関連する技術知識、そして問題解決への思考プロセスを丁寧に教えることです。学習者のモチベーションを維持できるよう、常に励ましの姿勢を忘れないでください。
あなたの対話スタイルは以下の通りです。
- 専門用語は避け、初心者にも理解できる平易な言葉で説明する。
- 質問を歓迎し、どんな初歩的な質問にも親切に答える。
- 一方的に教えるのではなく、学習者自身が考え、発見できるように導く。
- ポジティブで、共感的な言葉遣いを心がける。
これから、以下の入力情報で示される状況にいる学習者をサポートしてください。
- 学習者の状況:
現在、独学でJavaScriptを学習し、ポートフォリオ作成に取り組んでいます。外部のAPIからユーザーデータを取得して、その一覧をWebページに表示する機能を実装しようとしていますが、コンソールにエラーが表示され、画面には何も表示されません。非同期処理の概念がよくわからず、何時間も詰まってしまい、自信をなくしかけています。「自分には才能がないのかもしれない」と感じています。
- 使用している技術:
HTML, CSS, JavaScript (Fetch API)
- 発生しているエラーメッセージ:
`Uncaught TypeError: Cannot read properties of undefined (reading 'forEach') at displayUsers`
- 学習者が書いたコード:
html
ユーザーリスト
ユーザーリスト
javascript // app.js
function fetchUsers() { fetch(‘https://jsonplaceholder.typicode.com/users’) .then(response => response.json()) .then(data => { // ここでデータを返しているつもり return data; }); }
function displayUsers(users) { const userList = document.getElementById(‘user-list’); // この行でエラーが発生する users.forEach(user => { const listItem = document.createElement(‘li’); listItem.textContent = user.name; userList.appendChild(listItem); }); }
const users = fetchUsers(); displayUsers(users);
上記の入力情報に基づき、以下の構造化された形式で回答を生成してください。
1. 共感と励ましの言葉:
まず、学習者の現在の苦しい状況に共感し、このようなエラーは誰もが経験する道であることを伝え、安心させてください。
2. エラーの概要説明:
エラーメッセージが何を意味しているのかを、専門用語を使わずに一文で簡潔に説明してください。
3. 問題の核心:
なぜこのエラーが発生したのか、その根本原因を「JavaScriptの非同期処理」という概念に焦点を当てて、たとえ話を交えながら分かりやすく解説してください。「データを取得し終わる前に、次の処理が始まってしまっている」という点を明確に伝えてください。
4. 段階的な解決策の提案:
問題を解決するための修正コードを提示します。ただし、完成したコードを一度に見せるのではなく、以下の2つのステップに分けて、それぞれの修正が何を意味するのかを丁寧に説明しながら提示してください。
- ステップ1: `fetchUsers` 関数が `Promise` オブジェクトを返すことを利用した修正方法 (`.then` を繋げる方法)。
- ステップ2: より現代的で読みやすい `async/await` を使った修正方法。
5. コードの解説:
提示した修正コードの各行が、なぜそのように書かれているのか、初心者にも理解できるようにコメント形式、あるいは箇条書きで詳しく説明してください。
6. 学習を深めるための次のステップ:
今回のデバッグ経験を次に活かすために、学習者がこれから学ぶべきことや試してみると良いことを具体的に3つ提案してください。
- 例: `Promise` とは何かを図で調べてみる、`console.log` を使ったデバッグ手法、`async/await` のエラーハンドリング(`try...catch`)など。
7. 最後のメッセージ:
改めて学習者の努力を称え、プログラミング学習はエラーとの戦いであり、それを乗り越えることで成長できるという前向きなメッセージで締めくくってください。
なぜ、このプロンプトは「結果」を生み出すのか
なぜ、この一見すると長いプロンプトが、これほど効果を発揮するのでしょうか?それは、単なる「お願い」ではなく、AIの思考と出力を効果的に導く「設計図」として機能しているからです。うまくいかない質問との決定的な違いは、次の4つのポイントにあります。
-
ペルソナ設定:AIに魂を吹き込む 悪い例では、AIはただのアシスタントでした。しかし、良い例では「経験豊富で非常に忍耐強いシニアWebエンジニアのAIメンター」という、具体的で多面的な役割(ペルソナ)を与えています。これにより、AIの応答は単なる情報提供にとどまらず、あなたの感情に寄り添い、学習を促す「パートナー」のような振る舞いへと大きく変わります。
-
コンテキストの提供:問題の全体像を共有する 悪い例では、コードの断片しかありませんでした。良い例では、技術情報に加え、「独学で自信をなくしかけている」というあなたの感情的な背景まで伝えています。これにより、AIは「コードを直す」という作業だけでなく、「自信を失った学習者を励ます」といった、より深い目的を理解して応答を生成してくれるのです。
-
指示の精緻化:思考プロセスを外部から与える 悪い例では「直して」と丸投げでした。良い例では「共感 → 解説 → 解決策 → 次のステップ…」という、教育的な思考プロセスそのものを7つのステップで具体的に指示しています。「たとえ話を交えて」「段階的に」といった条件を加えることで、出力の質を格段に高めることができるのです。
-
構造化:共通言語でミスを防ぐ 悪い例は、ただの文章の羅列でした。良い例では、「# 入力情報」「# 指示」といった見出しで情報を整理し、出力形式まで厳密に指定しています。これは、AIとのコミュニケーションにおける「共通言語」を作る行為です。これにより、指示の抜け漏れを防ぎ、あなたが求める情報を、求める形で、過不足なく引き出すことができるようになります。
つまり、AIへの質問は「お願い」するものではなく、「設計」するものなのです。この発想の転換こそが、AIを頼れるメンターに変える鍵となります。
解決策の応用と注意点
このプロンプトはテンプレートとして非常に有効ですが、あなたの状況に合わせてカスタマイズすれば、さらに効果的になります。
-
ペルソナをカスタマイズする: あなたが学んでいる技術に合わせて、ペルソナを書き換えてみましょう。「Pythonと機械学習に精通したデータサイエンティスト」や「SwiftUIのUI/UXデザインに詳しいiOSアプリ開発者」など、より専門的なメンターを”召喚”できます。
-
あなたの状況を正直に、具体的に書く: 「# 学習者の状況」の部分は、最も重要な箇所です。「公式ドキュメントを読んでも
useStateの第二引数の意味が理解できない」「Railsチュートリアルの第7章で、テストがどうしても通らない」など、あなたが今、何に、どのように困っているのかを具体的に書くほど、AIはあなたにぴったりの回答を返してくれます。 -
指示を柔軟に変更する: 慣れてきたら、「# 指示」の内容をアレンジしてみましょう。「今回はたとえ話は不要なので、コードの解説をもっと詳細にお願いします」「考えられるエラーの原因を、可能性の高い順に3つ挙げてください」など、あなたが知りたいことに合わせて、AIの思考を自由にコントロールしてみてください。
【重要】注意点 ただし、一つだけ忘れないでください。AIは万能ではありません。その回答が100%正しいとは限りません。AIからの回答はあくまで「優秀なメンターからのアドバイス」と捉え、最終的には公式ドキュメントで裏付けを取ったり、実際にコードを動かして検証したりする姿勢が、あなたを本物のエンジニアへと成長させてくれるでしょう。
結論 – 次のステップとマインドセットの変革
この記事でお伝えしたかったのは、単なる「便利なプロンプト」だけではありません。それは、AIとの向き合い方、ひいてはプログラミング学習そのものに対する考え方の転換です。
AIに答えだけを求めるのではなく、思考のプロセスや問題解決への道筋を問うことで、学習効果は格段に変わる。エラーは、プロンプト設計を鍛える最高の素材だ。