Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
型定義でAIと会話する:型を通じてAIに意図を伝えるテクニック
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
uhyo
February 04, 2026
Technology
1
8
型定義でAIと会話する:型を通じてAIに意図を伝えるテクニック
2026-02-04 レバテックLAB 型定義&インタラクションテストでAIフロントエンド開発のガードレールを整備する
uhyo
February 04, 2026
Tweet
Share
More Decks by uhyo
See All by uhyo
React 19時代のコンポーネント設計ベストプラクティス
uhyo
16
5.7k
タグ付きユニオン型を便利に使うテクニックとその注意点
uhyo
3
980
ECMAScript仕様の最新動向: プロセスの変化と仕様のトレンド
uhyo
3
780
TypeScript 6.0で非推奨化されるオプションたち
uhyo
17
7k
Claude Code 10連ガチャ
uhyo
5
1k
AI時代、“平均値”ではいられない
uhyo
8
3.9k
意外と難しいGraphQLのスカラー型
uhyo
5
1k
RSCの時代にReactとフレームワークの境界を探る
uhyo
13
4.9k
知られざるprops命名の慣習 アクション編
uhyo
12
3.4k
Other Decks in Technology
See All in Technology
「データの価値を、みんなの武器に。」Data Enablementの価値とツラみ
ryoskdara_
1
120
「技術的にできません」を越えて価値を生み出せ──研究開発チームをPMが率いて生み出した価値創出
hiro93n
1
170
SREチームをどう作り、どう育てるか ― Findy横断SREのマネジメント
rvirus0817
0
510
AWS DevOps Agent x ECS on Fargate検証 / AWS DevOps Agent x ECS on Fargate
kinunori
3
430
AgentCore RuntimeをVPCにデプロイして 開発ドキュメント作成AIエージェントを作った
alchemy1115
3
240
プレビュー版のDevOpsエージェントを現段階で触ってみた
ad_motsu
1
170
生成AI素人でも玄人でもない私がセイセイAIチョットワカルために勉強したこと
wkm2
2
290
AWSが推進するAI駆動開発ライフサイクル入門 〜 AI駆動開発時代に必要な人材とは 〜/ introduction_to_aidlc_and_skills
fatsushi
7
3.5k
歴史に敬意を! パラシュートVPoEが組織と共同で立ち上がる信頼醸成オンボーディング
go0517go
PRO
0
110
"共通化"と"Embed"のブレンドでスケール可能な運用を!M&Aを支えるGENDA SREの実践 / GENDA Tech Talk #3
genda
0
220
Kubernetes環境周りの責任範囲をいい機会なので考える / Taking the Opportunity to Clarify Kubernetes Responsibilities
kohbis
1
100
ECS障害を例に学ぶ、インシデント対応に備えたAIエージェントの育て方 / How to develop AI agents for incident response with ECS outage
iselegant
5
810
Featured
See All Featured
Test your architecture with Archunit
thirion
1
2.2k
Discover your Explorer Soul
emna__ayadi
2
1.1k
The Language of Interfaces
destraynor
162
26k
Navigating Algorithm Shifts & AI Overviews - #SMXNext
aleyda
1
1.1k
How to build a perfect <img>
jonoalderson
1
5.2k
Believing is Seeing
oripsolob
1
65
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.7k
Docker and Python
trallard
47
3.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
133
19k
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
davidcarrasco
0
72
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
287
14k
[RailsConf 2023] Rails as a piece of cake
palkan
59
6.3k
Transcript
型定義でAIと会話する: 型を通じてAIに意図を伝えるテクニック 2026-02-04 レバテックLAB 型定義&インタラクションテストで AIフロントエンド開発のガードレールを整備する
発表者紹介 uhyo 株式会社カオナビ フロントエンドエキスパート 仕事ではずっとJavaScript/TypeScript一筋。 2
本日のテーマ AI時代のプログラミングにおいて 重要になりそうなこと: •AIに的確に意図を伝えること •AIの書いたコードを素早く理解すること 3
This Talk 2つのどちらにも、型定義が効果的! という話をします。 •AIに的確に意図を伝えること •AIの書いたコードを素早く理解すること 4
実際の例 先日FUNSTACK Routerを実装していたとき…… ぼく「useBlocker()」を実装してください AI「わかりました」 5
実際の例 ぼくの想像: // 返り値はとくに無い useBlocker(() => { return confirm(“離脱しますか?”); });
6
実際の例 AIが実装したもの: // 何か返り値がある…… const { blocked, resume } =
useBlocker(() => { return confirm(“離脱しますか?”); }); 7
AI開発のよくある課題 AIが出してきたものが自分の望み通りか、 チェックすることが重要。 AIが出してきたコードを読んで問題に気づくまで の時間を短縮したい。 8
型という救世主 AIが型を申告してくれれば素早く気づける。 AI「できました! interface UseBlockerResult { blocked: boolean; resume: ()
=> void; } 」 ぼく「!?」 9
型の役割 古来から、型はインターフェースの一部であり、 インターフェースを記述できる言語であり、 今では人間とAIの共通言語のひとつとなった。 自然言語よりも、意図を高効率で伝達できる。 10
型の役割 AI→人間: AIの成果物の素早い確認 人間→AI: 要件の効率よい伝達 ぼく「型はuseBlocker(handler: () => boolean): void
で」 AI「なるほど(型から要件を想像・理解)」 11
AIに対する要件伝達の基本 12 要件 (プロンプト) AIが持つ 常識 + = 成果物
AIに対する要件伝達の基本 13 要件 (プロンプト) AIが持つ 常識 + = 成果物 型
型から想像 される要件
AIに対する要件伝達の基本 AIモデルが進化すると「常識」が変化するので、 プロンプトも調整する必要がある。 14 要件 (プロンプト) AIが持つ 常識 + =
成果物
なので…… AIに対して成果物の型を伝えることで、 要件の基礎を成し、成果物が期待から外れない ためのガードレールとする。 型は、プロンプトで与えてもいいし、コードに 書いておいてもいい。 15
コードの中のガードレール 型は要件であると同時にコードの一部である。 つまり、必要に応じて変えなければならない。 期待に反して型を変えられると困る。 (「テストを通してと言ったらテストを直された」と同じ) 16
ガードレールに意図を込める 変えてよい型と変えてはいけない型をどう判断 するのか? その判断のためには、型の意図を明らかにする 必要がある。 コメントとかに書こう(書いてもらおう)。 17
型に意図を明記した例 interface UseBlockerOptions { // beforeunloadと能力を揃えるために、 // Promise<boolean>などではなくbooleanにしている handler: ()
=> boolean; } function useBlocker(options: UseBlockerOptions): void 18
型に意図を明記した例 こうすると、AIは返り値がbooleanであることは 実装詳細や間違いではなく要求仕様の一部である ことを理解してくれる(と思いたい)。 素のAIの「常識」だとPromise<boolean>にされ てしまう。(経験談) 19
インターフェースとしての型 型というインターフェースは、 「ユーザーにどう使ってほしいか」という意図も 込められている。(特にライブラリなどの場合) これは、単にAPIリファレンスのことではなく、 「型レベルでどういう挙動をするのか」という こと。 20
インターフェースとしての型 型レベルの望ましいふるまいをテストするために、 型レベルのテストが有効。 Vitestとかがサポートしているぞ。 型レベルのテストでは、インターフェースに 込めた意図をより明文化しやすい点もよい。 21
型レベルテストの例 import { assertType, expectTypeOf } from 'vitest’ it(‘returns nothing’,
() => { const result = myFunction({ … }); expectTypeof(result).toBeVoid(); }); 22
型レベルテストの意味 型システムは、それ自体が検査を備えた仕組み。 そのため、当たり前すぎるテストを量産するのは 避けるべき。 そうではなく、望ましいインターフェースが維持され ていることをチェックする、ユーザーストーリーを 含んだテストになっていると良い。 23
ガードレールを守るために 型やテストがガードレールなら、 それに意図を込めることは、ガードレールを補強 することに相当する。 24
まとめ 型はAIに要件を伝えるツールでもあるが、 要件を守るガードレールでもある。 AIがうかつにガードレールを壊されないために、 意図を込めることが重要。 型レベルテストも活用しよう。 25