Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

 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

たかぎとねこ

May 20, 2023
Tweet

More Decks by たかぎとねこ

Other Decks in Technology

Transcript

  1. ChatGPTで開発者の英語の悩みを解決
    〜AIによる開発者体験の向上〜
    たかぎとねこ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. ChatGPTを活用しよう

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. 変数の命名2 レスポンス編
    レスポンスの例
    以下のように変数名を作成することができます:
    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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. APIキーの設定

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide