GitHub CopilotでTypeScriptの コード生成するワザップ

Transcript

1. © Findy Inc. GitHub Copilotで TypeScriptの コード⽣成するワザップ 1
2. © Findy Inc. 2 今⽇話すこと • GitHub Copilotのカスタムインストラクションについて • 設定⽅法 • 調整⽅法 • 調整⽅法のワザップ ◦ 不要なものは削除 ◦ ⻑⽂よりも簡潔な階層構造 ◦ 曖昧な表現はNG • まとめ
3. © Findy Inc. GitHub Copilotの カスタムインストラクションについて 3
4. © Findy Inc. 4 カスタムインストラクション is 何？ • Copilotの⽣成コード、サジェスト内容をカスタマイズすることができる機能 • 2024/12/21現在、VS Codeで利⽤可能 • ⾃然⾔語などで記述しておくとCopilotが読み込む • 設定内容を反映したコード⽣成、サジェストを出すようになる • ⾃組織、チームのコードガイドラインを読み込ませるとどうなる、、、？ ◦ ⾃分たちにとって最適なCopilotを⽣み出すことができるはず
5. © Findy Inc. 設定⽅法 5
6. © Findy Inc. 6 ファイルを⼀個作成するだけ • `.github/copilot-instructions.md` を作成するだけ • このファイルに⾃然⾔語で保存するだけでOK # フロントエンドのスタイルガイド ## コーディングルール - 推奨するルール - [TypeScript Deep Dive](https://basarat.gitbook.io/typescript/styleguide) ## ファイル命名規則 - [Angular coding style guide](https://angular.io/guide/styleguide) に倣う - ファイル名はケバブケースに統⼀する
7. © Findy Inc. 調整⽅法 7
8. © Findy Inc. 8 まず確認⽤プロンプトを⽤意する 以下の条件を全て満たすコードを⽣成してください - hooksである - 引数は次の通り - カウント数の初期値 - 任意項⽬ - 次の内容を変数で管理する - カウント数 - 引数で受け取ったカウント数の初期値で初期化する - 次の関数を⽤意する - カウント数をインクリメントする - カウント数をデクリメントする - hooksから次の内容を返す - カウント数 - カウント数をインクリメントする関数 - カウント数をデクリメントする関数
9. © Findy Inc. 9 カスタムインストラクションの調整無しでプロンプトを実⾏してみる import { useState } from 'react'; function useCounter(initialCount = 0) { const [count, setCount] = useState(initialCount); const increment = () => setCount(count + 1); const decrement = () => setCount(count - 1); return { count, increment, decrement }; } export default useCounter;
10. © Findy Inc. 10 求める結果とのギャップを、カスタムインストラクションで埋める ## Hooks - hooksから返す値は `as const` を付けてreadonlyにする ## イベントハンドラの命名規則 - Component が受け取る Props は `on` + `アクション名` + `対象名` - 関数そのものの名称は `handle` + `アクション名` + `対象名` ```tsx export const HogeComponent = () => { const { handleChangeHoge } = useHogeHooks(); return <FugaComponent onChangeHoge={handleChangeHoge} /> } ```
11. © Findy Inc. 11 確認⽤プロンプトを再実⾏する import { useState } from 'react'; function useCounter(initialCount = 0) { const [count, setCount] = useState(initialCount); const handleIncrementCount = () => setCount(count + 1); const handleDecrementCount = () => setCount(count - 1); return { count, handleIncrementCount, handleDecrementCount } as const; } export default useCounter; • カスタムインストラクションの調整に戻る • 確認⽤プロンプトの実⾏と、カスタムインストラクションの調整を繰り返し • トライアンドエラーを繰り返すだけ
12. © Findy Inc. 調整⽅法のワザップ 12
13. © Findy Inc. 13 不要なものは削除 • カスタムインストラクションに記述する内容には、正しい内容のみを簡潔に記述する ## イベントハンドラの命名規則 - Component が受け取る Props は `on` + `アクション名` + `対象名` - 関数そのものの名称は `handle` + `アクション名` + `対象名` bad case ```tsx export const HogeComponent = () => { const { onChangeHoge } = useHogeHooks(); return <FugaComponent handleChangeHoge={onChangeHoge} /> } ``` good case ```tsx export const HogeComponent = () => { const { handleChangeHoge } = useHogeHooks(); return <FugaComponent onChangeHoge={handleChangeHoge} /> } ``` ## イベントハンドラの命名規則 - Component が受け取る Props は `on` + `アクション名` + `対象名` - 関数そのものの名称は `handle` + `アクション名` + `対象名` ```tsx export const HogeComponent = () => { const { handleChangeHoge } = useHogeHooks(); return <FugaComponent onChangeHoge={handleChangeHoge} /> } ```
14. © Findy Inc. 14 ⻑⽂よりも簡潔な階層構造 boolean型のPropertyを定義する場合、引数名には `is` をprefixで付け、それが共通コンポーネントの場合はoptionalにする。 - boolean 型のProperty - 引数名に `is` を prefix で付ける - 共通コンポーネントの場合 - optional にする • ⻑⽂よりマークダウンの階層構造のほうがCopilotの理解度が上がることが多かった • ⽂章を分解し、マークダウン形式の段落構造などに書き換えるのをおすすめ
15. © Findy Inc. 15 曖昧な表現はNG • 曖昧な⾔葉を使うと、Copilotはそれらを無視することが多かった • Copilotが中々理解してくれないケースでは、⾔葉の表現を少し変えるだけで⼀気に理解度が上がるこ とがある - 親コンポーネントからまとめてテストコードを書く - ⼦コンポーネントへの直接的なテストコードは不要 - 親コンポーネントからまとめてテストコードを書く - ⼦コンポーネントへの直接的なテストコードは書かない
16. © Findy Inc. まとめ 16
17. © Findy Inc. 17 まとめ • 利⽤⽅法はファイルを⼀つ作成するだけで簡単 • まず⾃組織、⾃チームのコードガイドラインをコピペして叩き台にするだけでも⼀定の効果は出る • 叩き台をベースに、今回のワザップ集を参考にしながら調整を繰り返すと良い • TypeScriptでカスタムインストラクションを利⽤する場合、特に効果的だったもの ◦ ケースバイケースでの型定義 ◦ テストコードで守るべき内容 • ⽣成AIは友達。共存共栄。
18. © Findy Inc. ご清聴ありがとうございました 18