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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

ChatGPTを活用しよう

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

コミットメッセージの作成レスポンス編レスポンスの例コミットメッセージは、行った変更を他の開発者や将来のあなたが理解できるように、明瞭かつ具体的に記述することが重要です。以下に、消費税率を計算する関数を作成した場合のコミットメッセージの例を示します。 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 関数を追加」: 関数の名前と役割の両方を明示しています。これらのメッセージは、何が行われたか（関数の追加）とその目的（消費税率の計算）を明示しています。なお、具体的な関数名を含めるかどうかは、その関数がプロジェクト内でどれほど重要か、または特定の規模のコミットでどれだけの変更が行われたかによります。

Slide 19

Slide 19 text

Name Genie

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

APIキーの設定

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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