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による開発者体験の向上〜
   たかぎとねこ
   

   View Slide

2. 自己紹介
   たかぎとねこ(@takagimeow)
   フロントエンドエンジニア
   最近の活動
   Name Genieを公開
   Suspenseの記事を投稿
   Remix WIZARDを公開
   JavaScript祭りに登壇
   PESPAの翻訳記事を投稿
   ChatGPT Editorを公開
   

   View Slide

3. 日本人開発者が抱える共通の悩み
   

   View Slide

4. 英作文という問題
   変数
   関数
   クラス名
   インターフェース名
   ブランチ名
   コミットメッセージ
   プルリクエストのタイトル
   

   View Slide

5. 変数の命名１
   問題の例
   ユーザー名を表す変数名を考えてみよう
   答えの例
   name
   userName
   accountName
   

   View Slide

6. 変数の命名２
   問題の例
   野球のストライクゾーンを表す変数名を考えてみよう
   答えの例
   baseballStrikeZone
   strikeZone
   pitchingZone
   

   View Slide

7. 変数の命名３
   問題の例
   1日の摂取カロリーを表すを表す変数名を考えてみよう
   答えの例
   dailyCalorieIntake
   oneDayClorieIntake
   caloriesPerDay
   

   View Slide

8. ブランチ名の作成
   問題の例
   1日の摂取カロリーを表すを表す変数を追加する
   答えの例
   feature/add-daily-calorie-variable
   feature/daily-calorie-intake-variable
   feature/implement-daily-calorie-intake
   

   View Slide

9. コミットメッセージの作成
   問題の例
   1日の摂取カロリーを表すを表す変数を追加した
   答えの例
   feat: add daily calorie intake variable
   add: dailyCalorieIntake variable
   chore: implement daily calorie intake variable
   

   View Slide

10. ChatGPTを活用しよう
    

    View Slide

11. ChatGPTは嘘つきである
    ChatGPTを検索エンジンの代わりとして使ってはいけない
    Google検索で解決可能な事例は、Google検索で解決する
    GPTは馬鹿であり、嘘つきであることを認識する
    「検索と質問」は違うということを理解する
    引用: https://newspicks.com/movie-series/14?movieId=2603
    

    View Slide

12. ChatGPTは創作が得意
    ChatGPTは文章生成が得意
    適切な文脈を与えることで、それに沿った文章を生成
    日本語作文だけでなく、英作文も得意
    PythonやJavaScriptで書かれたコードの生成も得意
    つまり、検索ではなく創作が得意
    

    View Slide

13. 変数の命名１ プロンプト編
    問題の例
    1万円から3万円の間の値を表す変数
    プロンプトの例
    1
    万円から3
    万円の間の値を表す変数名を作成してください。
    

    View Slide

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`
    ただし、この変数名はあくまで一例であり、具体的なコンテキストやプログラミング言語により、もっと適切な変数名が存在するかもしれません。
    

    View Slide

15. 変数の命名２ プロンプト編
    問題の例
    TypeScriptにおける、1万円から3万円の間の値を表す変数
    プロンプトの例
    1
    万円から3
    万円の間の値を表す変数名を作成してください。
    言語はTypeScript
    です。
    

    View Slide

16. 変数の命名２ レスポンス編
    レスポンスの例
    TypeScript
    はJavaScript
    のスーパーセットで、JavaScript
    に静的型機能を追加したものです。そのため、JavaScript
    と同様に変数名を作るときは特定の規則を守る必要があります。
    変数名は通常、その変数が何を表しているかを簡単に理解できるように作成します。1
    万円から3
    万円の範囲の価値を示す変数名を作るときは、その価値が何を表すかを考慮すると良いでしょう。以下に例を示します：
    `let priceInRange10000To30000: number;`
    この変数名は直訳すれば「10000
    から30000
    の範囲内の価格」を意味します。他の例としては:
    `let valueBetween10kAnd30k: number;`
    こちらの変数名は「10k
    と30k
    の間の価値」を意味します。この変数名は少し短く、読みやすさを重視したものです。ただし、「k
    」が千を意味することを知らない人には理解しづらい可能性もあります。
    変数名は、それが何を表すかを一目で理解できるように、具体的で意味のある名前をつけることが重要です。
    

    View Slide

17. コミットメッセージの作成 プロンプト編
    問題の例
    消費税率を計算する関数を作成した場合のコミットメッセージ
    プロンプトの例
    消費税率を計算する関数を作成した場合のコミットメッセージを作成してください。
    

    View Slide

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
    関数を追加」:
    関数の名前と役割の両方を明示しています。
    これらのメッセージは、何が行われたか（関数の追加）とその目的（消費税率の計算）を明示しています。なお、具体的な関数名を含めるかどうかは、その関数がプロジェクト内でどれほど重要か、または特定の規模のコミットでどれだけの変更が行われたかによります。
    

    View Slide

19. Name Genie
    

    View Slide

20. Name Genieとは
    ChatGPTを活用したVSCode拡張機能
    生成可能な名前の一覧
    変数名
    関数名
    クラス名
    インターフェース名
    ブランチ名
    コミットメッセージ
    プルリクエストタイトル
    ファイル名
    

    View Slide

21. Name Genieの使い方
    1. 作成したい名前を選択
    2. プリセットからお好みのルールを選択
    3. 最大3つまで説明を入力
    4. 「Ask Genie」をクリック
    

    View Slide

22. プリセットの一覧
    ハイフン区切り
    小文字で始める
    キャメルケース
    ケバブケース
    スネークケース
    パスカルケース
    

    View Slide

23. 使う前の注意点
    APIキーの設定が必要
    キーは、OpenAI APIのページから発行する
    取得したキーをVSCodeの設定から保存する
    

    View Slide

24. APIキーの設定
    

    View Slide

25. 変数名を生成する 手順編
    問題の例
    「飲んだ缶コーヒーの数」を表す変数
    手順
    1. 「作成したい名前」として「変数名」を選択
    2. 「プリセット」として「キャメルケース」を選択
    3. 「説明1」に「飲んだ缶コーヒーの数」を入力
    4. 「Ask Genie」をクリック
    

    View Slide

26. 変数名を生成する レスポンス編
    レスポンスの例
    drankCanCoffeeCount
    consumedCanCoffeeNumber
    finishedCanCoffeeAmount
    

    View Slide

27. Name Genieを使って変数名を生成
    

    View Slide

28. 関数名を生成する 手順編
    問題の例
    「１年間の投資の利益の計算」を表す関数
    手順
    1. 「作成したい名前」として「関数名」を選択
    2. 「プリセット」として「キャメルケース」を選択
    3. 「説明1」に「１年間の投資の利益の計算」を入力
    4. 「Ask Genie」をクリック
    

    View Slide

29. 関数名を生成する レスポンス編
    レスポンスの例
    calculateAnnualInvestmentProfit
    computeYearlyInvestmentGain
    getOneYearInvestmentEarnings
    

    View Slide

30. Name Genieを使って関数名を生成
    

    View Slide

31. ブランチ名を生成する 問題編
    問題の例
    「アラートが表示されないバグを修正」を表すブランチ
    

    View Slide

32. ブランチ名を生成する 手順編
    手順
    1. 「作成したい名前」として「ブランチ名」を選択
    2. 「プリセット」として「ハイフン区切り」を選択
    3. 「説明1」に「アラートが表示されないバグを修正」を入力
    4. 「説明2」に「次のフォーマットに従ってください。」と入力
    5. 「説明3」に「 / 」を入力
    6. 「Ask Genie」をクリック
    

    View Slide

33. ブランチ名を生成する レスポンス編
    レスポンスの例
    bugfix/alert-not-displaying
    fix/alert-display-issue
    bugfix/fix-alert-display
    

    View Slide

34. Name Genieを使ってブランチ名を生成
    

    View Slide

35. コミットメッセージを生成する 問題編
    問題の例
    「アラートが表示されないバグを修正」を表すコミットメッセージ
    

    View Slide

36. コミットメッセージを生成する 手順編
    手順
    1. 「作成したい名前」として「コミットメッセージ」を選択
    2. 「プリセット」として「小文字で始める」を選択
    3. 「説明1」に「アラートが表示されないバグを修正」を入力
    4. 「説明2」に「次のフォーマットに従ってください。」と入力
    5. 「説明3」に「 [optional scope]: 」を入力
    6. 「Ask Genie」をクリック
    

    View Slide

37. コミットメッセージを生成する レスポンス編
    レスポンスの例
    fix(alert): no-alert-bug
    fix(alert): alert-not-showing
    fix(alert): alert-display-bug
    

    View Slide

38. Name Genieを使ってコミットメッセージを生成
    

    View Slide

39. まとめ
    開発者は得意なことに集中すべき
    英語が苦手なら、言語と創作が得意なAIに任せる
    これもしなきゃ、あれもしなきゃは仕事の生産性を下げる
    ChatGPTやName Genieは開発者にとってのパワードスーツ
    コーディングだけに集中できる環境を整えて、DXの向上を目指す
    

    View Slide