型定義でAIと会話する:型を通じてAIに意図を伝えるテクニック

2026-02-04 レバテックLAB 型定義&インタラクションテストでAIフロントエンド開発のガードレールを整備する

Transcript

1. 型定義でAIと会話する: 型を通じてAIに意図を伝えるテクニック 2026-02-04 レバテックLAB 型定義&インタラクションテストで AIフロントエンド開発のガードレールを整備する
2. 発表者紹介 uhyo 株式会社カオナビ フロントエンドエキスパート 仕事ではずっとJavaScript/TypeScript一筋。 2
3. 本日のテーマ AI時代のプログラミングにおいて 重要になりそうなこと: •AIに的確に意図を伝えること •AIの書いたコードを素早く理解すること 3
4. This Talk 2つのどちらにも、型定義が効果的！ という話をします。 •AIに的確に意図を伝えること •AIの書いたコードを素早く理解すること 4
5. 実際の例 先日FUNSTACK Routerを実装していたとき…… ぼく「useBlocker()」を実装してください AI「わかりました」 5
6. 実際の例 ぼくの想像: // 返り値はとくに無い useBlocker(() => { return confirm(“離脱しますか？”); }); 6
7. 実際の例 AIが実装したもの: // 何か返り値がある…… const { blocked, resume } = useBlocker(() => { return confirm(“離脱しますか？”); }); 7
8. AI開発のよくある課題 AIが出してきたものが自分の望み通りか、 チェックすることが重要。 AIが出してきたコードを読んで問題に気づくまで の時間を短縮したい。 8
9. 型という救世主 AIが型を申告してくれれば素早く気づける。 AI「できました！ interface UseBlockerResult { blocked: boolean; resume: () => void; } 」 ぼく「！？」 9
10. 型の役割 古来から、型はインターフェースの一部であり、 インターフェースを記述できる言語であり、 今では人間とAIの共通言語のひとつとなった。 自然言語よりも、意図を高効率で伝達できる。 10
11. 型の役割 AI→人間: AIの成果物の素早い確認 人間→AI: 要件の効率よい伝達 ぼく「型はuseBlocker(handler: () => boolean): void で」 AI「なるほど（型から要件を想像・理解）」 11
12. AIに対する要件伝達の基本 12 要件 （プロンプト） AIが持つ 常識 + = 成果物
13. AIに対する要件伝達の基本 13 要件 （プロンプト） AIが持つ 常識 + = 成果物 型 型から想像 される要件
14. AIに対する要件伝達の基本 AIモデルが進化すると「常識」が変化するので、 プロンプトも調整する必要がある。 14 要件 （プロンプト） AIが持つ 常識 + = 成果物
15. なので…… AIに対して成果物の型を伝えることで、 要件の基礎を成し、成果物が期待から外れない ためのガードレールとする。 型は、プロンプトで与えてもいいし、コードに 書いておいてもいい。 15
16. コードの中のガードレール 型は要件であると同時にコードの一部である。 つまり、必要に応じて変えなければならない。 期待に反して型を変えられると困る。 （「テストを通してと言ったらテストを直された」と同じ） 16
17. ガードレールに意図を込める 変えてよい型と変えてはいけない型をどう判断 するのか？ その判断のためには、型の意図を明らかにする 必要がある。 コメントとかに書こう（書いてもらおう）。 17
18. 型に意図を明記した例 interface UseBlockerOptions { // beforeunloadと能力を揃えるために、 // Promise<boolean>などではなくbooleanにしている handler: () => boolean; } function useBlocker(options: UseBlockerOptions): void 18
19. 型に意図を明記した例 こうすると、AIは返り値がbooleanであることは 実装詳細や間違いではなく要求仕様の一部である ことを理解してくれる（と思いたい）。 素のAIの「常識」だとPromise<boolean>にされ てしまう。（経験談） 19
20. インターフェースとしての型 型というインターフェースは、 「ユーザーにどう使ってほしいか」という意図も 込められている。（特にライブラリなどの場合） これは、単にAPIリファレンスのことではなく、 「型レベルでどういう挙動をするのか」という こと。 20
21. インターフェースとしての型 型レベルの望ましいふるまいをテストするために、 型レベルのテストが有効。 Vitestとかがサポートしているぞ。 型レベルのテストでは、インターフェースに 込めた意図をより明文化しやすい点もよい。 21
22. 型レベルテストの例 import { assertType, expectTypeOf } from 'vitest’ it(‘returns nothing’, () => { const result = myFunction({ … }); expectTypeof(result).toBeVoid(); }); 22
23. 型レベルテストの意味 型システムは、それ自体が検査を備えた仕組み。 そのため、当たり前すぎるテストを量産するのは 避けるべき。 そうではなく、望ましいインターフェースが維持され ていることをチェックする、ユーザーストーリーを 含んだテストになっていると良い。 23
24. ガードレールを守るために 型やテストがガードレールなら、 それに意図を込めることは、ガードレールを補強 することに相当する。 24
25. まとめ 型はAIに要件を伝えるツールでもあるが、 要件を守るガードレールでもある。 AIがうかつにガードレールを壊されないために、 意図を込めることが重要。 型レベルテストも活用しよう。 25