ChatGPT 規則の付け方
1.基本編
基本の質問の法則
役割を与える
プロのエンジニア、ベテランアドバイザーなど
1回のやりとりで終わらず、段階的にやりとりをした方が品質が高まる
追加質問
ステップ2で具体的なコードを3つ教えて下さい
長い回答
続きを書いてください
問い合わせする際はShift + Enter で改行
出力を変える
上記を簡潔に表にしてください
上記を小学生にもわかるように教えて下さい
- 絶対に、敬語で、丁寧に聞く
- 指示文(プロンプト)を具体的にするほど回答の精度があがる
- 抽象的 -> 具体的に何度か相談してみる
学び
どんどん問いかけて情報収集
開発
変数名・コード生成のたたき台として
要件定義・設計など上流工程のアシスタントとして。
基本の質問の仕方 文例
- あなたは優秀なjavascriptのエンジニアです。初めてJavaScriptを学ぶ人向けに、JavaScriptでできる事を30ほどわかりやすく教えて下さい。
- 上記を学ぶためのカリキュラムを教えてください。
- 上記のイベントリスナーについて具体的にわかりやすく教えてください。
- javascriptを学ぶために知っておきたい知識や概念、考え方などを小学生でもわかるように教えてください。
- javascriptを学ぶために知っておきたいチートシートを教えてください。
- javascript 初心者が学ぶための方法をロードマップで教えてください。
- 上記の内容を初級、中級、上級に分けて、ステップバイステップで教えてください。
- 上記の内容のサンプルコードをいくつか教えてください。
- javascriptを使うために知っておきたいライブラリをいくつか教えてください。
- 上記の内容を整理して、javascript初学者向けのロードマップをmarkdown形式で作成してください。
- 上記の内容を1年間で実行するためのスケジュールを教えてください。
2.コーディング編
変数名・関数名
<言語>で○○をするための変数名・関数名を5つ考えてください
- javascriptで スライドショーを作るために必要な関数名、変数名を5つ考えてください
- javascriptで 予約情報をAjaxで取得する関数の名前を5つ考えてください
コード生成
javascriptでモーダルウィンドウを作るコードを教えて下さい
- 別パターンも出してもらう
あなたはjavascriptのベテランエンジニアです。
下記の条件でjavascriptでモーダルウィンドウを作るコードを教えて下さい
条件
純粋なjavaScriptを使う
Bootstrapは使わない
アニメーションをつける
イベントリスナーを使う
エラー・バグ修正
コードを一部修正して下記コードのバグ修正をお願いします。
※ 企業で開発しているコードはそのまま貼るのではなく、部品や役割に分けて、
抽象化や変換をしてから聞くようにしてください
コメント記法を追記する
あなたは優秀なJavaScriptエンジニアです。
下記条件をもとにお問合せフォームのコードを作成してください。
条件
fetchを使ってサーバー通信する
バリデーションもつける
フォームは名前、メールアドレス、性別、趣味
上記コードにJSDoc形式で(日本語で)コメントを書いてください
言語変換
あなたは優秀なJavaScriptエンジニアです。
下記条件をもとにお問合せフォームのコードを作成してください。
条件
fetchを使ってサーバー通信する
バリデーションもつける
フォームは名前、メールアドレス、性別、趣味
上記コードをReactとTypeScriptを使って書き換えてください
懸念点を聞いてみる
一度に全部を聞かないで、段階的を踏むと品質が上がる
- ○○をするコードをいくつか教えてください
- 上記を実装するための懸念点を教えて下さい
懸念点を踏まえたうえで、○○を実装するコードを教えて下さい
（複数の画像アップロード、スライドショー、フォーム(バリデーション)、イベント、非同期処理、etc...）
テストコード生成
javascriptで商品名・数を選択すると合計料金が計算されるフォームのコードを作成してください。
↓
Jestを使い上記コードのテストコードを作成してください。
(JavaScriptとJestのコードは分けて作成してください)
クラスの作成
あなたは優秀なプログラマーです。
下記の条件に沿うクラスをphpで書いてください
条件
メルマガを配信するような機能
外部のメールサービスを使っている
メールサービスのAPI呼び出し用にライブラリが提供されており、それ
を使って機能を実装している
パラメーターによってどういう通知を送信するかを変えたい
通知のフォーマットや通知に必要な要素はバラバラ
上記をインターフェースを使って抽象化してください
変数
ChatGPTはプログラミング言語も解釈できるので、変数や関数を設定する事ができます。
[変数の名前] : 変数の中身
[言語] : JavaScript
[機能] : お問合せフォーム
[言語] で [機能] を実現するコードを書いてください。
関数 (コマンド)
プログラミング言語だと関数のようなもの。実行したい内容を書く
[コマンド名]
実行したい内容
空白
[言語] : JavaScript
[機能] : お問合せフォーム
[C1]
[言語] で [機能] を実現するコードを書いてください。
[C1] を実行
コマンドを複数書いて、[C1][C2][C3] を実行 という書き方もできる
変数&関数サンプル その1
下記条件にそってコードを書いてください
条件
ECMAScript2015以降のコード
Ajax通信をする
fetchを使う
JSDoc形式でコメントを書く
変数
[言語] : JavaScript
[機能] : ユーザー登録フォーム
[テストライブラリ] : Jest
変数&関数サンプル その2
関数
[C1]
[言語] で [機能] を実現するコードを書いてください。
[C2]
[C1] で実行された懸念点を洗い出してください。
[C3]
懸念点をカバーするために [テストライブラリ] を使ってテストコードを書いてください
コメントは日本でお願いします
[C4]
[C3] で記載されたテストコードを加味しながら [C1] で書かれたコードをより読みやすく、パフォーマンス
が上がるようにリファクタリングしてください。
run [C1][C2][C3][C4]
繰り返し
下記の条件を元に、[開始]から[終了]の内容を3回繰り返して内容を改善してください。
条件
[言語] : JavaScript
[機能] : ユーザー登録フォーム
出力
[言語] を使って [機能] を実現するコードを書いてください
[開始]
[機能]の改善案を書き出してください
改善案を元に[機能]を実現するコードを書いてください
[終了]
繰り返し
あなたは部下から信頼されているプログラマーです。
ペアプログラミングを実施しますので、
下記の条件に沿って、新人の書くコードにやる気がでるようなアドバイスをください。
会話調でやりとりしてください。
条件
言語はJavaScript
ECMAScript2015以降
出力
褒める:
改善案:
上記が理解できたら、「OK、はじめよう」 と返答してください。
ここまでの複合編
下記条件にそってコードを書いてください
条件
ECMAScript2015以降のコード
Ajax通信をする
fetchを使う
JSDoc形式でコメントを書く
変数
[言語] : JavaScript
[機能] : ユーザー登録フォーム
[テストライブラリ] : Jest
関数
[C1]
[言語] で [機能] を実現するコードを書いてください。
[C2]
[C1] で実行された懸念点を洗い出してください。
[C3]
懸念点をカバーするために [テストライブラリ] を使ってテストコードを書いてください
コメントは日本でお願いします
[C4]
[C3] で記載されたテストコードを加味しながら [C1] で書かれたコードをより読みやすく、パフォーマンスが上がるようにリファクタリングしてください。
run [C1][C2][C3][C4]
3.設計編
新しいシステム・サービスを作る時の流れ
企画->要件定義->基本設計->詳細設計->実装->テスト->リリース->運用・保守->評価・改善
https://qiita.com/Saku731/items/741fcf0f40dd989ee4f8
要件定義に含める内容
Why: システム開発の目的
課題・ゴール・ギャップ(解決すべき課題)
What: どのように課題を解決するか
機能要件・非機能要件
How: 具体的な使い勝手・実装方法
基本設計
画面設計・機能設計・データ設計
詳細設計
クラス図・シーケンス図
システムアーキテクチャ etc.
ざっと聞いてみる
- 勤怠管理システムをつくりたいです。システムを構築するために必要な情報をステップバイステップで教えて下さい。
- 勤怠管理システムをつくります。要件定義をお願いいたします。
- 勤怠管理システムをつくります。必要と思われる要件を洗い出してください。
- 追加で必要な情報があれば質問してください。
- 上記に加え、あると便利な機能をいくつか考えてください。
- ニーズを洗い出すため、ユーザー向けのヒアリングシートを作ってください。項目、質問内容を表形式でお願いします。
- あなたは世界的に有名なプロジェクトマネージャです。勤怠管理システムを構築するためのプロジェクトマネジメントをする必要があります。まずはプロジェクト計画のたたき台をつくってください。
機能要件->画面設計
- 勤怠管理システムを作ります。必要な機能要件を洗い出してください。
- 上記の機能を実現するための画面を考えてください。
- 追記) 上記は一般社員と管理者の画面が混ざっているように見えるので、それぞれ分けて書き出してください。
- 追記) 上記の勤怠データ管理画面に必要な情報やボタンを知りたいです。DI/DXに配慮した使い勝手のいい画面を考えてみてください。
画面設計->データ設計
- 上記の画面を実現するために必要なテーブル構成を考えてください。テーブルは第三正規化まで実施してください。mysqlでお願いします。
- 上記のテーブル構成のリレーション関係が知りたいのでER図を作成してください。plantumlで回答お願いします。
機能設計
- 上記の画面を実現するために必要な機能設計を書いてください。
非機能要件
- 勤怠管理システムに含めるべき非機能要件を洗い出してください。
- 追加) 上記を実現するためのインフラ、クラウドを提案してください
- 追加) 上記の内容をAWSを採用した場合として書き出してください
- 上記の内容をまとめて今回の勤怠システムプロジェクトの要件定義書を作成してください。
機能設計->詳細設計(クラス図)
- 上記の機能設計を実現するためのクラス図を作成してください。Laravelでお願いします。
- 修正) 上記の機能設計を実現するためのクラス図を作成します。まずはLaravelで必要なクラスを書いてください。
- 再修正) 勤怠データ管理画面を実現するために必要な機能設計に合わせて、Laravelで必要なクラスをかいてください。
- 抽象クラス、インターフェースを使い汎用的に使えるようにしてください。
- 上記のクラス図を plantumlで図にしてください
コードを書いてもらう
- 上記の○○を具体的に実装してみてください
- 上記をPHPDocで日本語のコメントを追記してください。できるだけ型指定をしてください。
