ChatGPTでコード生成｜プログラミング補助ツールとして

ChatGPTはプログラミングの強力なアシスタントとして活用できます。コードの生成、デバッグ、レビューなど、開発作業の様々な場面で効率化を実現できます。本記事では、ChatGPTをプログラミング補助ツールとして活用する方法を解説します。

コード生成の基本

ChatGPTは多くのプログラミング言語に対応し、様々なコードを生成できます。

対応言語とフレームワーク

ChatGPTは以下のような言語やフレームワークのコード生成に対応しています。

• Web開発: JavaScript, TypeScript, Python, PHP, Ruby
• フロントエンド: React, Vue.js, Angular, HTML/CSS
• バックエンド: Node.js, Django, Flask, Laravel
• モバイル: Swift, Kotlin, React Native, Flutter
• その他: SQL, Bash, PowerShell, VBA, Excel関数

コード生成の基本例

以下の仕様でPythonの関数を作成してください。

機能：与えられたリストから重複を除去し、昇順にソートして返す
入力：数値のリスト
出力：重複を除去し、昇順にソートされたリスト
例：[3, 1, 4, 1, 5, 9, 2, 6, 5] → [1, 2, 3, 4, 5, 6, 9]

コードにはコメントを含めてください。

生成されるコードの特徴

読みやすいコード 変数名、関数名が適切で、コメントも含まれた読みやすいコードが生成されます。

エラーハンドリング 適切なプロンプトを与えれば、エラーハンドリングも含めたコードを生成できます。

ベストプラクティス 一般的なプログラミングのベストプラクティスに沿ったコードが生成されます。

プロンプトの書き方

効果的なコード生成のためのプロンプト設計を紹介します。

詳細な仕様を伝える

以下の仕様でJavaScriptの関数を作成してください。

【機能】
日付の配列から、指定した期間内の日付のみをフィルタリングする

【入力】
- dates: 日付文字列の配列（形式: "YYYY-MM-DD"）
- startDate: 開始日（形式: "YYYY-MM-DD"）
- endDate: 終了日（形式: "YYYY-MM-DD"）

【出力】
startDateからendDateの間に含まれる日付の配列

【条件】
- 開始日と終了日は範囲に含める
- 不正な日付形式の場合はスキップする
- 元の配列の順序は保持する

【環境】
- Node.js 18
- 外部ライブラリは使用しない

ユースケースを示す

以下のユースケースを満たすReactコンポーネントを作成してください。

【コンポーネント名】
SearchableDropdown

【ユースケース】
1. ユーザーがテキストを入力すると、選択肢がフィルタリングされる
2. フィルタリングされた選択肢から1つを選択できる
3. 選択後、入力欄に選択した値が表示される
4. 選択をクリアするボタンがある

【Props】
- options: { id: string, label: string }[] - 選択肢の配列
- placeholder: string - プレースホルダーテキスト
- onChange: (selected: { id: string, label: string } | null) => void

【スタイリング】
- Tailwind CSSを使用
- モバイルフレンドリーなデザイン

既存コードの拡張

以下の既存コードに機能を追加してください。

【既存コード】
[既存のコードをペースト]

【追加したい機能】
1. ページネーション機能（1ページ10件）
2. ソート機能（名前、日付で昇順/降順）
3. フィルター機能（ステータスで絞り込み）

【制約】
- 既存のコード構造をできるだけ維持する
- 新しい依存関係は追加しない

デバッグ

エラーの解決やバグの修正にChatGPTを活用する方法です。

エラーメッセージの解析

以下のエラーメッセージが表示されています。
原因と解決策を教えてください。

【エラーメッセージ】
TypeError: Cannot read properties of undefined (reading 'map')
    at UserList (UserList.jsx:15:23)
    at renderWithHooks (react-dom.development.js:14985:18)

【関連するコード】
[エラーが発生しているコードをペースト]

【状況】
- APIからデータを取得して表示するコンポーネント
- 初回レンダリング時にエラーが発生

バグの特定と修正

以下のコードが期待通りに動作しません。
問題を特定し、修正してください。

【コード】
[問題のあるコードをペースト]

【期待する動作】
ボタンをクリックするとカウンターが1増える

【実際の動作】
ボタンをクリックしても値が変わらない

【試したこと】
- console.logで値を確認したが、増えていない
- ボタンのonClickは呼ばれている

パフォーマンス問題の解決

以下のコードでパフォーマンスの問題が発生しています。
最適化の提案をしてください。

【コード】
[パフォーマンスに問題があるコードをペースト]

【問題】
- 大量のデータ（10,000件）を処理すると遅くなる
- スクロール時にカクつく

【環境】
- React 18
- データはAPIから取得

コードレビュー

ChatGPTにコードレビューを依頼する方法です。

基本のコードレビュー

以下のコードをレビューしてください。

【レビュー観点】
1. コードの可読性
2. バグの可能性
3. パフォーマンス
4. セキュリティ
5. ベストプラクティスへの準拠

【コード】
[レビューしてほしいコードをペースト]

問題点があれば指摘し、改善案を具体的に示してください。

セキュリティレビュー

以下のコードをセキュリティの観点からレビューしてください。

【コード】
[セキュリティレビューしてほしいコードをペースト]

【確認してほしい点】
- SQLインジェクションの脆弱性
- XSS（クロスサイトスクリプティング）
- 認証・認可の問題
- 機密情報の取り扱い
- 入力値の検証

各問題に対する修正コードも提示してください。

リファクタリング提案

以下のコードをよりクリーンにリファクタリングしてください。

【現在のコード】
[リファクタリングしたいコードをペースト]

【リファクタリングの目標】
- 関数を小さく分割する
- 重複を排除する
- テストしやすい構造にする
- 命名を改善する

Before/After形式で、変更点の説明も付けてください。

コードの説明

以下のコードを初心者にも分かるように説明してください。

【コード】
[説明してほしいコードをペースト]

【説明の形式】
1. コード全体が何をしているか（1-2文で）
2. 各セクションの役割（行番号を示しながら）
3. 使用されているテクニックやパターンの解説
4. 注意すべきポイント

まとめ

ChatGPTはプログラミングの様々な場面で強力なアシスタントとなります。

本記事のポイント

• 詳細な仕様を伝えることで、期待通りのコードが生成される
• エラーメッセージと関連コードを共有することで、効率的にデバッグできる
• コードレビューを依頼することで、品質向上のヒントが得られる
• 生成されたコードは必ず動作確認とセキュリティチェックを行う

ChatGPTが生成したコードはあくまで参考として扱い、最終的な品質と責任は開発者自身が担保することが重要です。AIをうまく活用しながら、開発の効率と品質を向上させましょう。