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

by starfish719

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

© Findy Inc. 4 カスタムインストラクション is 何？ ● Copilotの⽣成コード、サジェスト内容をカスタマイズすることができる機能 ● 2024/12/21現在、VS Codeで利⽤可能 ● ⾃然⾔語などで記述しておくとCopilotが読み込む ● 設定内容を反映したコード⽣成、サジェストを出すようになる ● ⾃組織、チームのコードガイドラインを読み込ませるとどうなる、、、？ ○ ⾃分たちにとって最適なCopilotを⽣み出すことができるはず

Slide 5

Slide 5 text

Slide 6

Slide 6 text

© 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) に倣う - ファイル名はケバブケースに統⼀する

Slide 7

Slide 7 text

Slide 8

Slide 8 text

© Findy Inc. 8 まず確認⽤プロンプトを⽤意する以下の条件を全て満たすコードを⽣成してください - hooksである - 引数は次の通り - カウント数の初期値 - 任意項⽬ - 次の内容を変数で管理する - カウント数 - 引数で受け取ったカウント数の初期値で初期化する - 次の関数を⽤意する - カウント数をインクリメントする - カウント数をデクリメントする - hooksから次の内容を返す - カウント数 - カウント数をインクリメントする関数 - カウント数をデクリメントする関数

Slide 9

Slide 9 text

© 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;

Slide 10

Slide 10 text

© Findy Inc. 10 求める結果とのギャップを、カスタムインストラクションで埋める ## Hooks - hooksから返す値は `as const` を付けてreadonlyにする ## イベントハンドラの命名規則 - Component が受け取る Props は `on` + `アクション名` + `対象名` - 関数そのものの名称は `handle` + `アクション名` + `対象名` ```tsx export const HogeComponent = () => { const { handleChangeHoge } = useHogeHooks(); return } ```

Slide 11

Slide 11 text

© 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; ● カスタムインストラクションの調整に戻る ● 確認⽤プロンプトの実⾏と、カスタムインストラクションの調整を繰り返し ● トライアンドエラーを繰り返すだけ

Slide 12

Slide 12 text

Slide 13

Slide 13 text

© Findy Inc. 13 不要なものは削除 ● カスタムインストラクションに記述する内容には、正しい内容のみを簡潔に記述する ## イベントハンドラの命名規則 - Component が受け取る Props は `on` + `アクション名` + `対象名` - 関数そのものの名称は `handle` + `アクション名` + `対象名` bad case ```tsx export const HogeComponent = () => { const { onChangeHoge } = useHogeHooks(); return } ``` good case ```tsx export const HogeComponent = () => { const { handleChangeHoge } = useHogeHooks(); return } ``` ## イベントハンドラの命名規則 - Component が受け取る Props は `on` + `アクション名` + `対象名` - 関数そのものの名称は `handle` + `アクション名` + `対象名` ```tsx export const HogeComponent = () => { const { handleChangeHoge } = useHogeHooks(); return } ```

Slide 14

Slide 14 text

© Findy Inc. 14 ⻑⽂よりも簡潔な階層構造 boolean型のPropertyを定義する場合、引数名には ìs` をprefixで付け、それが共通コンポーネントの場合はoptionalにする。 - boolean 型のProperty - 引数名に ìs` を prefix で付ける - 共通コンポーネントの場合 - optional にする ● ⻑⽂よりマークダウンの階層構造のほうがCopilotの理解度が上がることが多かった ● ⽂章を分解し、マークダウン形式の段落構造などに書き換えるのをおすすめ

Slide 15

Slide 15 text

© Findy Inc. 15 曖昧な表現はNG ● 曖昧な⾔葉を使うと、Copilotはそれらを無視することが多かった ● Copilotが中々理解してくれないケースでは、⾔葉の表現を少し変えるだけで⼀気に理解度が上がることがある - 親コンポーネントからまとめてテストコードを書く - ⼦コンポーネントへの直接的なテストコードは不要 - 親コンポーネントからまとめてテストコードを書く - ⼦コンポーネントへの直接的なテストコードは書かない

Slide 16

Slide 16 text

Slide 17

Slide 17 text

© Findy Inc. 17 まとめ ● 利⽤⽅法はファイルを⼀つ作成するだけで簡単 ● まず⾃組織、⾃チームのコードガイドラインをコピペして叩き台にするだけでも⼀定の効果は出る ● 叩き台をベースに、今回のワザップ集を参考にしながら調整を繰り返すと良い ● TypeScriptでカスタムインストラクションを利⽤する場合、特に効果的だったもの ○ ケースバイケースでの型定義 ○ テストコードで守るべき内容 ● ⽣成AIは友達。共存共栄。