プロンプトエンジニアリングの応用編：コード生成

それでは、実際にプロンプトエンジニアリングの腕を振るった実践例をいくつか紹介します。これを真似れば、あなたもプロンプトエンジニアになれるかも？

【エンジニア向け】コピペで使えるChatGPTプロンプト構文20選！現役エンジニアが厳選- AIの島こちらの記事から以下を抜粋し実際にやってみました！

Chatgptが自分で問題発見、修正が可能であるらしいです驚きですね！

深津式のプロンプトを元に上記の記事の作者が効果比較用に作成したものを使用します！

深津式

# 命令書
あなたは、[〇〇]です。
以下の制約条件と入力文をもとに、[〇〇]を作ってください。
# 制約条件
・[〇〇]
・[〇〇]
# 入力文:
[〇〇]
# 出力文:

↓

効果比較用深津式プロンプト

あなたは、[python]に精通したプロのITエンジニアです。
以下の入力内容、条件と入力コードをもとに、コードの修正・比較を行なってください。

# 入力内容
・現在のコードで改善できる箇所があれば修正してください。
・修正後のコードと修正前のコードを条件の内容に沿って比較してください

# 条件
・改善したポイントを箇条書きで教えてください
・そこを改善することで、具体的にどうなるのか教えてください。

# コード
・[コードを入力してください]

具体例はこちらになります↓

# 命令書
あなたは、[機械学習やディープラーニングに精通したプロのITエンジニア]です。
以下の制約条件と入力文をもとに、[最高のカリキュラム]を作ってください。
# 制約条件
・Pythonを学ぶ手順を[ステップ形式]で教えてください
・各ステップで学ぶべき[構文]も記載
・[よくあるエラー]も合わせて記載
# 入力文:
Pythonを学び始めた初学者に対し、ステップ形式でPythonの勉強方法を教えてください。
# 出力文:

コード生成の実例

実際にコード生成を行ってみました！

`あなたは、[Next.js]に精通したプロのITエンジニアです。
以下の入力内容、条件と入力コードをもとに、コードの修正・比較を行なってください。

入力内容

・現在のコードで改善できる箇所があれば修正してください。
・修正後のコードと修正前のコードを条件の内容に沿って比較してください

条件

・改善したポイントを箇条書きで教えてください
・そこを改善することで、具体的にどうなるのか教えてください。

コード

type Props = {
data?: Data;
status?: string;
};
export const getStaticProps: GetStaticProps = async () => {
try {
const data = await fetch("http://api.com/path/to/api").then((res) => {
if (!res.ok) throw new Error(${res.status});
return res.json();
});
return { props: { data } };
} catch (err) {
// Error! オブジェクト型は 'unknown' です
return { props: { status: err.message } };
}
};`

ChatGPT　model 4-0 返答

ChatGPTから修正前→修正後→理由という順番で帰ってくる

1. API エンドポイントの処理のリファクタリング

• 修正前:

  typescriptコードをコピーする
  const data = await fetch("http://api.com/path/to/api").then((res) => {
    if (!res.ok) throw new Error(`${res.status}`);
    return res.json();
  });
  
  

• 修正後:

  typescriptコードをコピーする
  const res = await fetch("http://api.com/path/to/api");
  if (!res.ok) throw new Error(`${res.status}`);
  const data = await res.json();
  
  

• 理由: fetch の処理をチェーンせず、await を用いて res オブジェクトを取得してから処理することで、可読性が向上し、デバッグもしやすくなります。

2. catch ブロックでの型アサーション

• 修正前:

  typescriptコードをコピーする
  return { props: { status: err.message } };
  
  

• 修正後:

  typescriptコードをコピーする
  return { props: { status: (err as Error).message } };
  
  

• 理由: TypeScriptではcatchブロック内でのエラーオブジェクトの型は unknown になるため、適切な型アサーションを行うことで、型の安全性を保つことができます。

3. API リクエスト URL を環境変数に分離

• 修正前:

  typescriptコードをコピーする
  const data = await fetch("http://api.com/path/to/api");
  
  

• 修正後:

  typescriptコードをコピーする
  const data = await fetch(`${process.env.API_URL}/path/to/api`);
  
  

• 理由: API のエンドポイントをハードコーディングするのではなく、環境変数として管理することで、異なる環境（開発、ステージング、本番）での柔軟性が高まり、セキュリティも向上します。

4. HTTP メソッドの明示

• 修正前:

  typescriptコードをコピーする
  const res = await fetch("http://api.com/path/to/api");
  
  

• 修正後:

  typescriptコードをコピーする
  const res = await fetch(`${process.env.API_URL}/path/to/api`, { method: 'GET' });
  
  

• 理由: HTTP メソッドを明示することで、コードの意図をより明確にし、将来的に他のメソッド（POST, PUT など）に変更する際のミスを減らせます。

5. エラーハンドリングの強化

• 修正前:

  typescriptコードをコピーする
  return { props: { status: err.message } };
  
  

• 修正後:

  typescriptコードをコピーする
  return { props: { status: (err as Error).message || "An unexpected error occurred" } };
  
  

• 理由: err.message が存在しないケースに備え、デフォルトのエラーメッセージを用意することで、ユーザーに適切なフィードバックを提供できます。

修正後のコード

typescriptコードをコピーする
type Props = {
  data?: Data;
  status?: string;
};

export const getStaticProps: GetStaticProps<Props> = async () => {
  try {
    const res = await fetch(`${process.env.API_URL}/path/to/api`, { method: 'GET' });
    if (!res.ok) throw new Error(`${res.status}`);
    const data = await res.json();
    return { props: { data } };
  } catch (err) {
    return { props: { status: (err as Error).message || "An unexpected error occurred" } };
  }
};

修正による効果

• 可読性の向上: コードの構造がシンプルになり、理解しやすくなりました。
• デバッグの容易さ: fetch の処理が分かれているため、デバッグ時に問題の切り分けが容易になります。
• 型の安全性: catch ブロックでの型アサーションにより、予期せぬ型エラーを防ぐことができます。
• 環境変数の利用: API エンドポイントを環境変数に移動することで、セキュリティと柔軟性が向上します。
• エラーハンドリングの強化: より堅牢なエラーハンドリングにより、ユーザーに適切な情報を提供できるようになります。

このように返答がかえってきます！

ざっくりまとめ

実際に深津式プロンプトを使用してプロンプトを行うことでChatgptが自分で問題発見、修正が可能になることが分かりましたね！

こんなに分かりやすく修正点と理由を教えてくれるのには驚きですね！

今後もプロンプトエンジニアリングのTIPSを紹介していこうと思いますのでぜひお楽しみに！