Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
型定義でAIと会話する:型を通じてAIに意図を伝えるテクニック
Search
uhyo
February 04, 2026
Technology
110
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
型定義でAIと会話する:型を通じてAIに意図を伝えるテクニック
2026-02-04 レバテックLAB 型定義&インタラクションテストでAIフロントエンド開発のガードレールを整備する
uhyo
February 04, 2026
More Decks by uhyo
See All by uhyo
Reactの設計論
uhyo
15
8.5k
型があると何が嬉しいか
uhyo
3
110
Baseline対応のDOMの型定義を作った
uhyo
3
920
AIのReact習熟度を測る
uhyo
2
990
React、まだ楽しくて草
uhyo
7
5k
TypeScript 7.0の現在地と備え方
uhyo
6
3.8k
React 19時代のコンポーネント設計ベストプラクティス
uhyo
20
11k
タグ付きユニオン型を便利に使うテクニックとその注意点
uhyo
3
1.2k
ECMAScript仕様の最新動向: プロセスの変化と仕様のトレンド
uhyo
3
960
Other Decks in Technology
See All in Technology
AI 駆動 Terraform 開発/SRE_BizReach_MIXI_2
visional_engineering_and_design
5
2.1k
越境するなら専門用語を使うな高校校歌 / If you wanna cross border, you shouldn't use jargon
vtryo
0
120
あるけみー式LTスライド作成術
alchemy1115
1
200
クロスボーダーM&AのValue Upを支えるプロダクト開発。日米チームのハブになったプロダクトエンジニアの実践 / Product Engineering Conference 2026
genda
0
120
NW運用でNWトポロジ可視化ツールに期待すること/shumoku-meetup1
corestate55
2
120
AI時代だからこそ、スケールしないことをやろう
yutashigemura
1
150
20260912_スクフェス三河
kgnkhkr
0
310
多層防御と最⼩権限で実現する、安全なAIエージェント設計パターン
lycorptech_jp
PRO
1
270
GoにおけるFFIのこれまでとこれから
goccy
5
2.5k
AIとペアプロを始める。人とのペアプロをやめる。ペアプロの良さを改めて知る。もっと好きになった。 / Rediscovering Pair Programming
honyanya
1
350
Oracle Cloud Infrastructure IaaS 新機能アップデート 2026/6 - 2026/8
oracle4engineer
PRO
0
180
日経電子版を支えていく Kasane Design System/fec_fukuoka
nikkei_engineer_recruiting
0
980
Featured
See All Featured
Chasing Engaging Ingredients in Design
codingconduct
0
310
Optimising Largest Contentful Paint
csswizardry
37
3.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
356
21k
Abbi's Birthday
coloredviolet
3
9.9k
Paper Plane
katiecoart
PRO
3
53k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
greggifford
PRO
0
330
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.6k
SEO for Brand Visibility & Recognition
aleyda
0
4.7k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
660
Site-Speed That Sticks
csswizardry
13
1.5k
Testing 201, or: Great Expectations
jmmastey
46
8.3k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
tmiket
0
230
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