ChatGPTで開発者の英語の悩みを解決

この資料は、2023年5月20日に開催された「JavaDoでしょう#22 札幌 ChatGPT/GitHub Copilotなどを活用した開発を共有・体験したい！」にて発表した資料になります。

https://javado.connpass.com/event/282511/

この資料で紹介したName Genieは、ChatGPTを活用したVSCode拡張です。
開発者体験を向上を目的として開発されました。
以下のリンクからインストールできます。

https://marketplace.visualstudio.com/items?itemName=takagimeow.name-genie

Transcript

1. ChatGPTで開発者の英語の悩みを解決 〜AIによる開発者体験の向上〜 たかぎとねこ
2. 自己紹介 たかぎとねこ(@takagimeow) フロントエンドエンジニア 最近の活動 Name Genieを公開 Suspenseの記事を投稿 Remix WIZARDを公開 JavaScript祭りに登壇 PESPAの翻訳記事を投稿 ChatGPT Editorを公開
3. 日本人開発者が抱える共通の悩み
4. 英作文という問題 変数 関数 クラス名 インターフェース名 ブランチ名 コミットメッセージ プルリクエストのタイトル
5. 変数の命名１ 問題の例 ユーザー名を表す変数名を考えてみよう 答えの例 name userName accountName
6. 変数の命名２ 問題の例 野球のストライクゾーンを表す変数名を考えてみよう 答えの例 baseballStrikeZone strikeZone pitchingZone
7. 変数の命名３ 問題の例 1日の摂取カロリーを表すを表す変数名を考えてみよう 答えの例 dailyCalorieIntake oneDayClorieIntake caloriesPerDay
8. ブランチ名の作成 問題の例 1日の摂取カロリーを表すを表す変数を追加する 答えの例 feature/add-daily-calorie-variable feature/daily-calorie-intake-variable feature/implement-daily-calorie-intake
9. コミットメッセージの作成 問題の例 1日の摂取カロリーを表すを表す変数を追加した 答えの例 feat: add daily calorie intake variable add: dailyCalorieIntake variable chore: implement daily calorie intake variable
10. ChatGPTを活用しよう
11. ChatGPTは嘘つきである ChatGPTを検索エンジンの代わりとして使ってはいけない Google検索で解決可能な事例は、Google検索で解決する GPTは馬鹿であり、嘘つきであることを認識する 「検索と質問」は違うということを理解する 引用: https://newspicks.com/movie-series/14?movieId=2603
12. ChatGPTは創作が得意 ChatGPTは文章生成が得意 適切な文脈を与えることで、それに沿った文章を生成 日本語作文だけでなく、英作文も得意 PythonやJavaScriptで書かれたコードの生成も得意 つまり、検索ではなく創作が得意
13. 変数の命名１ プロンプト編 問題の例 1万円から3万円の間の値を表す変数 プロンプトの例 1 万円から3 万円の間の値を表す変数名を作成してください。
14. 変数の命名２ レスポンス編 レスポンスの例 以下のように変数名を作成することができます： 1. `amount_in_yen` 2. `jpy_range_10000_to_30000` 3. `price_between_10k_and_30k_yen` 4. `jpy_value` 5. `yen_amount_in_range` ただし、この変数名はあくまで一例であり、具体的なコンテキストやプログラミング言語により、もっと適切な変数名が存在するかもしれません。
15. 変数の命名２ プロンプト編 問題の例 TypeScriptにおける、1万円から3万円の間の値を表す変数 プロンプトの例 1 万円から3 万円の間の値を表す変数名を作成してください。 言語はTypeScript です。
16. 変数の命名２ レスポンス編 レスポンスの例 TypeScript はJavaScript のスーパーセットで、JavaScript に静的型機能を追加したものです。そのため、JavaScript と同様に変数名を作るときは特定の規則を守る必要があります。 変数名は通常、その変数が何を表しているかを簡単に理解できるように作成します。1 万円から3 万円の範囲の価値を示す変数名を作るときは、その価値が何を表すかを考慮すると良いでしょう。以下に例を示します： `let priceInRange10000To30000: number;` この変数名は直訳すれば「10000 から30000 の範囲内の価格」を意味します。他の例としては: `let valueBetween10kAnd30k: number;` こちらの変数名は「10k と30k の間の価値」を意味します。この変数名は少し短く、読みやすさを重視したものです。ただし、「k 」が千を意味することを知らない人には理解しづらい可能性もあります。 変数名は、それが何を表すかを一目で理解できるように、具体的で意味のある名前をつけることが重要です。
17. コミットメッセージの作成 プロンプト編 問題の例 消費税率を計算する関数を作成した場合のコミットメッセージ プロンプトの例 消費税率を計算する関数を作成した場合のコミットメッセージを作成してください。
18. コミットメッセージの作成 レスポンス編 レスポンスの例 コミットメッセージは、行った変更を他の開発者や将来のあなたが理解できるように、明瞭かつ具体的に記述することが重要です。以下に、消費税率を計算する関数を作成した場合のコミットメッセージの例を示します。 1. "Add function to calculate sales tax rate" - 「消費税率を計算する関数を追加」: 関数の追加だけを伝えています。 2. "Implement calculateSalesTax function" - 「calculateSalesTax 関数を実装」: 関数の具体的な名前を明記しています。 3. "Create function for computing consumption tax" - 「消費税を計算する関数を作成」: 関数の役割を具体的に説明しています。 4. "Add taxCalculation function for computing sales tax rate" - 「sales tax rate を計算するためのtaxCalculation 関数を追加」: 関数の名前と役割の両方を明示しています。 これらのメッセージは、何が行われたか（関数の追加）とその目的（消費税率の計算）を明示しています。なお、具体的な関数名を含めるかどうかは、その関数がプロジェクト内でどれほど重要か、または特定の規模のコミットでどれだけの変更が行われたかによります。
19. Name Genie
20. Name Genieとは ChatGPTを活用したVSCode拡張機能 生成可能な名前の一覧 変数名 関数名 クラス名 インターフェース名 ブランチ名 コミットメッセージ プルリクエストタイトル ファイル名
21. Name Genieの使い方 1. 作成したい名前を選択 2. プリセットからお好みのルールを選択 3. 最大3つまで説明を入力 4. 「Ask Genie」をクリック
22. プリセットの一覧 ハイフン区切り 小文字で始める キャメルケース ケバブケース スネークケース パスカルケース
23. 使う前の注意点 APIキーの設定が必要 キーは、OpenAI APIのページから発行する 取得したキーをVSCodeの設定から保存する
24. APIキーの設定
25. 変数名を生成する 手順編 問題の例 「飲んだ缶コーヒーの数」を表す変数 手順 1. 「作成したい名前」として「変数名」を選択 2. 「プリセット」として「キャメルケース」を選択 3. 「説明1」に「飲んだ缶コーヒーの数」を入力 4. 「Ask Genie」をクリック
26. 変数名を生成する レスポンス編 レスポンスの例 drankCanCoffeeCount consumedCanCoffeeNumber finishedCanCoffeeAmount
27. Name Genieを使って変数名を生成
28. 関数名を生成する 手順編 問題の例 「１年間の投資の利益の計算」を表す関数 手順 1. 「作成したい名前」として「関数名」を選択 2. 「プリセット」として「キャメルケース」を選択 3. 「説明1」に「１年間の投資の利益の計算」を入力 4. 「Ask Genie」をクリック
29. 関数名を生成する レスポンス編 レスポンスの例 calculateAnnualInvestmentProfit computeYearlyInvestmentGain getOneYearInvestmentEarnings
30. Name Genieを使って関数名を生成
31. ブランチ名を生成する 問題編 問題の例 「アラートが表示されないバグを修正」を表すブランチ
32. ブランチ名を生成する 手順編 手順 1. 「作成したい名前」として「ブランチ名」を選択 2. 「プリセット」として「ハイフン区切り」を選択 3. 「説明1」に「アラートが表示されないバグを修正」を入力 4. 「説明2」に「次のフォーマットに従ってください。」と入力 5. 「説明3」に「 <type>/<subject> 」を入力 6. 「Ask Genie」をクリック
33. ブランチ名を生成する レスポンス編 レスポンスの例 bugfix/alert-not-displaying fix/alert-display-issue bugfix/fix-alert-display
34. Name Genieを使ってブランチ名を生成
35. コミットメッセージを生成する 問題編 問題の例 「アラートが表示されないバグを修正」を表すコミットメッセージ
36. コミットメッセージを生成する 手順編 手順 1. 「作成したい名前」として「コミットメッセージ」を選択 2. 「プリセット」として「小文字で始める」を選択 3. 「説明1」に「アラートが表示されないバグを修正」を入力 4. 「説明2」に「次のフォーマットに従ってください。」と入力 5. 「説明3」に「 <type>[optional scope]: <subject> 」を入力 6. 「Ask Genie」をクリック
37. コミットメッセージを生成する レスポンス編 レスポンスの例 fix(alert): no-alert-bug fix(alert): alert-not-showing fix(alert): alert-display-bug
38. Name Genieを使ってコミットメッセージを生成
39. まとめ 開発者は得意なことに集中すべき 英語が苦手なら、言語と創作が得意なAIに任せる これもしなきゃ、あれもしなきゃは仕事の生産性を下げる ChatGPTやName Genieは開発者にとってのパワードスーツ コーディングだけに集中できる環境を整えて、DXの向上を目指す