「ChatGPTにReactコンポーネントを作らせたいけど、期待通りのコードが出てこない…。」
「もっと複雑な要件を伝えて、精度の高いコードを生成させる方法はないの？」
こういった悩みを持っているReact開発者の方もいるのではないでしょうか？
本記事では、ChatGPTの性能を最大限に引き出すプロンプト手法「ReActプロンプト」について、React開発で使える具体的な5つのプロンプト例と、その効果をさらに高めるコツを解説しました。
上場企業をメインに生成AIコンサルティング事業を展開している弊社が、実際の開発現場で活用しているテクニックのみをご紹介します。
きっとあなたのReact開発を効率化するヒントが見つかるはずですので、ぜひ最後までご覧ください。
ReActプロンプトとは？思考と行動を促す仕組みを分かりやすく解説
ここでは、ReActプロンプトの基本的な仕組みと、なぜReact開発において有効なのかを解説します。
ReActは、ChatGPTに思考プロセスを明示させることで、回答の精度を飛躍的に向上させるフレームワークです。
この仕組みを理解することで、より効果的なプロンプトを作成できるようになります。
そもそもChatGPTがどのような仕組みで動いているか知りたい方は、こちらの記事もご覧ください。それでは、1つずつ見ていきましょう。
ChatGPTが自ら思考し行動する「ReAct」のフレームワーク
ReActプロンプトは、大規模言語モデル（LLM）に「Thought（思考）」「Action（行動）」「Observation（観察）」という3つのステップを繰り返させることで、複雑な問題解決を促すフレームワークです。
人間が問題を解決する際、まず「何をすべきか」を考え（Thought）、具体的な行動を起こし（Action）、その結果を観察して（Observation）、次の思考につなげます。
ReActは、この思考プロセスをAIに模倣させることで、最終的なアウトプットの質を高めることを目的としています。
AIはまず、与えられたタスクを達成するための計画を思考し、それを実行します。
そして、その行動によって得られた結果（エラーや新しい情報など）を観察し、次の思考と行動を修正・決定していくのです。
このサイクルを繰り返すことで、AIは自律的に問題解決へと進んでいきます。
このReActの概念は、Googleの研究者らによって提唱されました。詳細を知りたい方は、こちらの原論文をご覧ください。 https://arxiv.org/pdf/2210.03629
なぜReact開発でReActプロンプトが有効なのか？
ReActプロンプトを使うことで、思考過程を明示しながら要件に即した高品質なコードを生成できるようになります。
React開発では、コンポーネントの設計、コーディング、デバッグ、リファクタリングなど、多岐にわたるタスクが存在します。
これらのタスクは、単純なコード生成だけでなく、論理的な思考や問題解決能力を必要とする場面が多くあります。
ReActプロンプトを活用することで、例えば「新しいコンポーネントを作成する」というタスクに対して、ChatGPTはまず「どのようなpropsが必要か」「どのような状態管理をすべきか」「UIはどのように構成するか」といった思考を整理します。
その思考に基づいてコードを生成し（行動）、もしコードに不備があれば、エラーメッセージを観察して自ら修正を加える、といった動きが期待できます。
このように、思考のプロセスを明示させることで、単に指示されたコードを書き出すだけでなく、より高品質で、要件に即したコードの生成が可能になるのです。
ReActは、より広範な「LLMエージェント」という技術分野の基盤です。LLMエージェントについて詳しく知りたい方は、こちらのガイドがおすすめです。 https://www.promptingguide.ai/research/llm-agents
【コピペOK】React開発ですぐに使えるReActプロンプト例文5選
ここからは、実際のReact開発ですぐに活用できるReActプロンプトの具体的な例文を5つ紹介します。
- 【基本形】ReActプロンプトの思考プロセスを指示するプロンプト
- 新規Reactコンポーネントを作成するプロンプト
- 既存のReactコードをリファクタリングするプロンプト
- Reactのエラーをデバッグするプロンプト
- 技術選定のために競合ライブラリを調査するプロンプト
これらの例文を参考に、あなたの開発タスクに合わせてカスタマイズしてみてください。
プロンプトだけでなく、実際に自分でReActエージェントを構築してみたい方は、こちらのハンズオンガイドもおすすめです。 https://medium.com/google-cloud/building-react-agents-from-scratch-a-hands-on-guide-using-gemini-ffe4621d90ae
それでは、1つずつ順に解説します。
【基本形】ReActプロンプトの思考プロセスを指示するプロンプト
まずは、あらゆる場面で応用できるReActプロンプトの基本形です。
このプロンプトは、ChatGPTにReActの思考プロセス（Thought, Action, Observation）に従って回答するように明確に指示するものです。
この基本形をベースに、具体的なタスクを追加していくことで、様々な応用が可能になります。
あなたはプロのReactエンジニアです。
以下のタスクについて、ReActの思考プロセス（Thought, Action, Observation）を用いて、ステップバイステップで回答を生成してください。
# タスク
（ここに具体的なタスクを記述）
# ReActプロセス
Thought: まず、タスクを達成するための計画や考察を記述してください。
Action: 次に、具体的な行動（コード生成、情報収集など）を記述してください。
Observation: 最後に、行動の結果を観察し、次のステップへのフィードバックや結論を記述してください。
このプロセスを繰り返し、最終的な成果物を完成させてください。ReActプロンプトと並んで代表的な「深津式プロンプト」について解説した記事はこちらです。合わせてご覧ください。新規Reactコンポーネントを作成するプロンプト
次に、新しいReactコンポーネントを作成する際のプロンプト例です。
要件を明確に伝えることで、より精度の高いコンポーネントコードが生成されます。
ここでは、シンプルなカウンターコンポーネントの作成を依頼しています。
あなたはプロのReactエンジニアです。
以下の要件を満たす、新しいカウンターコンポーネントをTypeScriptで作成してください。
ReActの思考プロセス（Thought, Action, Observation）を用いて、ステップバイステップで回答を生成してください。
# 要件
– コンポーネント名: Counter
– 機能:
– カウント数を表示する。
– 「+」ボタンを押すとカウントが1増える。
– 「-」ボタンを押すとカウントが1減る。
– カウントの初期値をpropsとして受け取れるようにする（`initialCount`）。初期値が指定されない場合は0とする。
– 使用技術: React, TypeScript, Hooks (useState)
– ファイル構成: `src/components/Counter.tsx`
# ReActプロセス
Thought: …
Action: …
Observation: …
既存のReactコードをリファクタリングするプロンプト
既存のコードを改善したい場合にもReActプロンプトは有効です。
改善したい点や目的を具体的に示すことが重要です。
ここでは、クラスコンポーネントを関数コンポーネントにリファクタリングする例を挙げます。
あなたはプロのReactエンジニアです。
以下のクラスコンポーネントを、React Hooksを用いたモダンな関数コンポーネントにリファクタリングしてください。
ReActの思考プロセス（Thought, Action, Observation）を用いて、改善の意図と最終的なコードをステップバイステップで生成してください。
# 対象のコード
（ここにリファクタリングしたいクラスコンポーネントのコードを貼り付ける）
# 改善の目的
- 可読性の向上
- state管理を`useState`に移行
- ライフサイクルメソッドを`useEffect`に移行
# ReActプロセス
Thought: ...
Action: ...
Observation: ...Reactのエラーをデバッグするプロンプト
エラー解決は開発において頻繁に発生するタスクです。
エラーメッセージと関連するコードを提示することで、ChatGPTが原因究明の思考プロセスを示してくれます。
これにより、開発者自身の問題解決能力の向上にも繋がります。
あなたはプロのReactエンジニアです。
以下のReactコードを実行した際に発生するエラーの原因を特定し、解決策を提示してください。
ReActの思考プロセス（Thought, Action, Observation）を用いて、デバッグの過程をステップバイステップで解説してください。
# 発生しているエラーメッセージ
（ここにエラーメッセージを貼り付ける）
# 関連するコード
（ここにエラーが発生しているコンポーネントのコードを貼り付ける）
# ReActプロセス
Thought: エラーメッセージから原因を推測し、どのコード部分が怪しいか考察する。
Action: 原因を特定するための調査や、修正案となるコードを提示する。
Observation: 修正によってエラーが解決するかどうかを確認し、最終的な結論を述べる。ChatGPTによるデバッグでは、AIが事実に基づかない情報を生成する「ハルシネーション」に注意が必要です。以下の記事で対策を解説していますので、ぜひご覧ください。技術選定のために競合ライブラリを調査するプロンプト
コーディングだけでなく、技術選定のような調査タスクにもReActプロンプトは活用できます。
比較すべき観点を明確に指示することで、構造化された調査結果を得ることができます。
ここでは、状態管理ライブラリの比較を依頼しています。
あなたはプロのReactエンジニアです。
Reactの状態管理ライブラリである「Redux Toolkit」と「Zustand」について、技術選定を行うための比較調査をしてください。
ReActの思考プロセス（Thought, Action, Observation）を用いて、調査と結論をステップバイステップで生成してください。
# 比較観点
- 学習コスト
- コードの記述量（Boilerplate）
- パフォーマンス
- コミュニティとエコシステム
- TypeScriptとの親和性
# ReActプロセス
Thought: どのような情報源を元に調査を進めるか計画を立てる。
Action: 各比較観点について、公式ドキュメントや信頼できる技術ブログなどを基に情報を収集し、比較表を作成する。
Observation: 比較結果を基に、どのようなプロジェクトにどちらのライブラリが適しているかを考察し、結論をまとめる。React開発でReActプロンプトを活用するメリット
ReActプロンプトをReact開発に取り入れることで、具体的にどのようなメリットがあるのでしょうか。
ここでは、主な3つのメリットについて解説します。
- コードの品質と回答の精度が向上する
- 複雑な要件やエラー解決の道筋が明確になる
- コーディング以外の調査や設計も効率化できる
これらのメリットを理解し、日々の開発業務に活かしていきましょう。
コードの品質と回答の精度が向上する
ReActプロンプトは「考える」ステップを挟むことで、文脈に沿った精度の高いコード生成を促します。
ReActプロンプトは、ChatGPTにいきなり答えを出させるのではなく、まず「考える」というステップを強制し、要件の解釈漏れや誤解を防ぎ、より文脈に沿った、精度の高いコードが生成されやすくなります。
例えば、コンポーネントの責務やpropsの設計についてまず思考させることで、場当たり的な実装ではなく、再利用性や保守性を考慮したコードが出力される可能性が高まります。
思考のプロセスが明示されるため、なぜそのコードになったのかという背景まで理解できる点も大きなメリットです。
複雑な要件やエラー解決の道筋が明確になる
ReActプロンプトは、問題をステップごとに分解して思考・行動・観察することで、複雑なタスクやエラー解決の道筋を明確にします。
React開発では、複数の状態が絡み合う複雑なコンポーネントの実装や、原因が分かりにくいエラーの解決に直面することがあります。
このような複雑なタスクに対して、ReActプロンプトは非常に有効です。
ChatGPTは、問題を小さなステップに分解して、一つずつ思考し、行動し、観察します。
このプロセス自体が、問題解決のためのロードマップとして機能します。
開発者はその思考プロセスを追体験することで、問題の本質を理解しやすくなり、自力で解決する際のヒントを得ることもできます。
言語モデルが実際のソフトウェア開発タスクをどの程度解決できるかを示したベンチマーク「SWE-bench」に関する論文はこちらです。 https://arxiv.org/abs/2310.06770
コーディング以外の調査や設計も効率化できる
ReActプロンプトを使うことで、調査や設計などコーディング以外の作業も効率化でき、開発者は本質的な業務に集中できます。
ReActプロンプトの活用範囲は、コーディングに限りません。
先ほどの例文で示したようなライブラリの技術選定、新しい機能の設計、APIの仕様調査など、開発における様々な知的作業を効率化できます。
「Thought」のステップで調査計画を立てさせ、「Action」で情報収集を実行させ、「Observation」で結果を要約・考察させる、という流れは、質の高い調査レポートや設計ドキュメントを作成する上で非常に効果的です。
これにより、開発者はより本質的な開発業務に集中する時間を確保できます。
ReActプロンプトの精度をさらに高める5つのコツ
ReActプロンプトはそれだけでも強力ですが、いくつかのコツを押さえることで、さらにその精度を高めることができます。
ReActプロンプトの活用は、プログラミングスキル全体の向上にも繋がります。以下の記事では、ChatGPTを使ったプログラミングの上達方法を解説しています。- 「Reactの専門家」のような役割を与える
- 開発の背景や目的を具体的に伝える
- 具体的なコード例や参考情報を示す
- 出力形式（フォルダ構成やコード規約など）を指定する
- 一度にすべてを求めず、段階的に指示する
これらのコツを意識して、ChatGPTとの対話をよりスムーズで生産的なものにしていきましょう。
それでは、1つずつ順に解説します。
1. 「Reactの専門家」のような役割を与える
役割を設定することで、ChatGPTはその役割になりきり、専門的な知識や視点に基づいた思考と回答を生成しようとします。
プロンプトの冒頭で「あなたはプロのReactエンジニアです」といったように、ChatGPTに明確な役割（ペルソナ）を与えることは非常に重要です。
例えば、「シニアアーキテクト」の役割を与えれば、パフォーマンスやスケーラビリティを意識した回答が、「UI/UXデザイナー」の視点も持つエンジニアの役割を与えれば、ユーザー体験を考慮した提案が期待できます。
このようにAIに役割を与える「ロールプロンプティング」の効果については、こちらの記事で詳しく検証されています。 https://www.prompthub.us/blog/role-prompting-does-adding-personas-to-your-prompts-really-make-a-difference
2. 開発の背景や目的を具体的に伝える
目的が明確になることで、ChatGPTはより適切な技術選択や実装方法を思考することができます。
なぜそのコンポーネントが必要なのか、どのようなユーザーが使うのか、プロジェクト全体でどのような技術スタックを採用しているのか、といった背景情報を伝えることで、回答の質は格段に向上します。
例えば、単に「ログインフォームを作って」と指示するのではなく、「BtoB向けの管理画面で使われる、セキュリティを重視したログインフォームを作成してください。認証にはAuth0を使用します」のように、具体的なコンテキストを伝えることが重要です。
3. 具体的なコード例や参考情報を示す
「このコードのスタイルを参考にして」「このライブラリの公式ドキュメントにあるベストプラクティスに従って」といった指示は、ChatGPTの思考の方向性を定める上で非常に有効です。
もし手元に参考になるコードや、従うべきコーディング規約、参考にしたドキュメントなどがあれば、それらをプロンプトに含めることで、期待するアウトプットとのギャップを減らすことができます。
これにより、プロジェクトの統一感を保ちつつ、効率的にコードを生成することが可能になります。
4. 出力形式（フォルダ構成やコード規約など）を指定する
生成してほしいコードのフォーマットや、ファイル構成などを具体的に指定することも、精度を高める上で効果的です。
例えば、「コンポーネントファイルはsrc/components/Button/index.tsx、スタイルはCSS Modulesを使いstyle.module.cssに記述してください」といったように、具体的な出力形式を指示します。
これにより、生成されたコードをプロジェクトに組み込む際の手間を大幅に削減できます。
コードだけでなく、思考プロセスを箇条書きで示すよう依頼するなど、回答全体のフォーマットを指定することも有効です。
5. 一度にすべてを求めず、段階的に指示する
複雑なタスクは小さく分割し、段階的に指示することで質の高いアウトプットが得られます。
非常に複雑で大規模なタスクを一度のプロンプトで実行させようとすると、ChatGPTが要件を処理しきれず、質の低いアウトプットになることがあります。
このような場合は、タスクをより小さなステップに分割し、対話形式で段階的に指示を進めていくのが得策です。
例えば、「まずコンポーネントのpropsの型定義を考えて」「次に、その型定義を使ってUI部分のJSXを実装して」「最後に、状態管理のロジックを追加して」というように、一つのタスクを複数回のやり取りで完成させていくアプローチが有効です。
ReActプロンプトを使う際の注意点
非常に便利なReActプロンプトですが、利用する上でいくつか注意すべき点があります。
- 生成されたコードは必ずレビューする
- 思考プロセスが長くなるため、回答に時間がかかる場合がある
- 機密情報や個人情報を含むコードは入力しない
これらの注意点を理解し、安全かつ効果的に活用しましょう。
生成されたコードは必ずレビューする
AIが生成したコードはあくまで「下書き」や「たたき台」と捉え、最終的には必ず人間の目でレビューし、テストを行うことが不可欠です。
ChatGPTが生成するコードは、常に完璧であるとは限りません。
一見正しく見えるコードでも、稀にバグが含まれていたり、セキュリティ上の脆弱性があったり、プロジェクトの要件に合致しない場合があります。
特に、ReActプロンプトによって生成された思考プロセスも参考にしながら、そのロジックが本当に正しいかを確認する習慣が重要です。
思考プロセスが長くなるため、回答に時間がかかる場合がある
ReActプロンプトは、AIに思考のステップを踏ませるため、単純な質問に比べて回答が生成されるまでに時間がかかることがあります。
特に、GPT-5のような高性能なモデルで複雑なタスクを依頼した場合、長考モード（Thinking）に入り、応答が遅くなる可能性があります。
これは、より質の高い回答を得るためのトレードオフと考えることができます。
急いでいる場合は、タスクをより単純化するか、ReActのような複雑な思考を求めないプロンプトを使用するなど、状況に応じた使い分けが求められます。
機密情報や個人情報を含むコードは入力しない
ChatGPTの標準的なサービスでは、入力したデータがAIの学習に利用される可能性があります。そのため、業務で扱うソースコードに含まれる、企業の機密情報、APIキー、個人情報などを直接プロンプトに入力することは絶対に避けるべきです。
情報漏洩のリスクを回避するためには、法人向けのサービスを利用することが推奨されます。
例えば、「ChatSense」のような法人向けサービスは、入力データがAIの学習に使われないように設計されており、セキュリティを確保しながら安全に生成AIを活用することが可能です。
ChatGPTを企業で利用する際のリスクと、その対策についてより詳しく知りたい方は、こちらの記事をご覧ください。ReActプロンプトに関するよくある質問
ここでは、ReActプロンプトに関してよく寄せられる質問とその回答をまとめました。
- ReActプロンプトは日本語でも有効ですか？
- 他のプロンプト手法（深津式など）との違いは何ですか？
- 会社のプロジェクトで使っても情報漏洩しませんか？
これらの疑問を解消し、安心してReActプロンプトを活用しましょう。
ReActプロンプトは日本語でも有効ですか？
はい、有効です。ReActプロンプトのフレームワーク（Thought, Action, Observation）は言語に依存しないため、日本語の指示でも問題なく機能します。
本記事で紹介した例文のように、タスクや要件を日本語で具体的に記述することで、ChatGPTは日本語で思考し、日本語のコメントを含むコードや解説を生成してくれます。
ただし、プログラミングに関連する専門用語などは、無理に日本語に訳さず、英語のまま使用する方が意図が正確に伝わりやすい場合もあります。
他のプロンプト手法（深津式など）との違いは何ですか？
深津式プロンプトなど、他の多くのプロンプト手法は、AIに与える「指示の出し方」を体系化したものです。
目的、制約条件、入力、出力などを明確に定義することで、AIとのコミュニケーションを円滑にし、期待する回答を得やすくします。
一方、ReActプロンプトの最大の特徴は、AIに「最終的な答え」だけでなく、その答えに至るまでの「思考の過程」そのものを出力させる点にあります。
これにより、なぜその結論に至ったのかが透明化され、回答の信頼性を検証しやすくなるだけでなく、より複雑で多段階の思考が必要なタスクに対応できる点が大きな違いです。
IBMもReActエージェントについて解説しています。異なる視点からの説明として、合わせてご覧ください。 https://www.ibm.com/think/topics/react-agent
会社のプロジェクトで使っても情報漏洩しませんか？
標準のChatGPT（無料版やPlusプラン）を利用する場合、入力した情報がOpenAIによってモデルの改善に利用される可能性があるため、会社の機密情報を含むコードなどを入力すると情報漏洩のリスクがあります。
このリスクを回避するためには、法人利用を前提としたサービスの利用が必須です。
OpenAIが提供するAPIを利用する場合や、「ChatSense」のような法人向けに特化したサービスでは、入力データが学習に利用されないオプトアウトが適用されます。
会社のポリシーを確認し、適切なセキュリティ対策が講じられた環境で利用するようにしてください。
あなたのAI活用は表面的？ChatGPTを真の「問題解決パートナー」に変えるReActの本質
「ChatGPTにコードを書かせても、なんだか的外れ…」。そう感じているなら、あなたのAI活用はまだ第一段階かもしれません。実は、AIに単に「答え」を出させるのではなく、「思考のプロセス」を歩ませることで、その能力を劇的に引き出す手法が存在します。それが、Google Brainの研究者らによって提唱された「ReAct」というフレームワークです。この記事では、なぜAIに「思考」させることが重要なのか、その核心的なメカニズムを、元の研究論文を基に解説します。
AIが人間のように「考え、行動し、学ぶ」
あなたが複雑な開発タスクに取り組むとき、いきなりコードを書き始めることはないでしょう。まず「要件は何か」「どんな設計にすべきか」と考え（Thought）、実際にコードを書き（Action）、その結果エラーが出たり、より良い方法に気づいたりする（Observation）。そして、その観察を元に、また次の思考と行動を繰り返します。
「ReAct」は、この人間特有の問題解決プロセスを大規模言語モデル（LLM）に模倣させるためのフレームワークです。AIに「思考→行動→観察」のサイクルを意図的に実行させることで、単一の指示ではたどり着けない、より複雑で論理的なタスクの解決を可能にします。
例えば、Reactのデバッグを依頼した場合、AIはまず「エラーメッセージは何を意味するか？」と思考し、「関連するコード部分を特定する」という行動を起こし、「特定したコードとエラーの関連性を観察する」といったステップを踏みます。このプロセスを経ることで、単に修正コードを提示するだけでなく、なぜその修正が必要なのかという論理的な根拠まで示せるようになるのです。AIを単なる指示待ちのツールから、自律的に問題解決へと進む「パートナー」へと変える。それがReActの本質なのです。
引用元：
Yao, S., Zhao, J., Yu, D., Du, N., Shafran, I., Narasimhan, K., & Cao, Y. (2022). ReAct: Synergizing Reasoning and Acting in Language Models. arXiv preprint arXiv:2210.03629.
まとめ
React開発における生産性の向上やコード品質の担保は、多くの企業が直面する課題です。生成AIの活用がその解決策として期待されていますが、「効果的なプロンプトが書けない」「期待通りのコードが生成されない」といった理由で、本格的な導入に踏み切れていないケースも少なくありません。
そこでおすすめしたいのが、Taskhub です。
Taskhubは日本初のアプリ型インターフェースを採用し、200種類以上の実用的なAIタスクをパッケージ化した生成AI活用プラットフォームです。
たとえば、Reactコンポーネントの新規作成やリファクタリング、エラーのデバッグといった開発業務も、専門的なプロンプト知識なしに「アプリ」を選ぶだけで、誰でも直感的にAIを活用できます。
しかも、Azure OpenAI Serviceを基盤にしているため、ソースコードなどの機密情報を入力してもデータが外部で学習に使われる心配がなく、セキュリティは万全です。
さらに、AIコンサルタントによる手厚い導入サポートがあるため、「どの業務にAIを適用すれば効果的かわからない」という企業でも安心してスタートできます。
ReActプロンプトのような高度なテクニックを習得しなくても、導入後すぐに開発効率の向上を実感できる設計が大きな魅力です。
まずは、Taskhubの活用事例や機能を詳しくまとめた【サービス概要資料】を無料でダウンロードしてください。
Taskhubで“最速の生成AI活用”を体験し、御社の開発チームの生産性を一気に加速させましょう。
