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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
uhyo
February 04, 2026
Technology
130
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
26
17k
型があると何が嬉しいか
uhyo
3
170
Baseline対応のDOMの型定義を作った
uhyo
3
1k
AIのReact習熟度を測る
uhyo
2
1.1k
React、まだ楽しくて草
uhyo
7
5.2k
TypeScript 7.0の現在地と備え方
uhyo
6
3.9k
React 19時代のコンポーネント設計ベストプラクティス
uhyo
20
11k
タグ付きユニオン型を便利に使うテクニックとその注意点
uhyo
3
1.2k
ECMAScript仕様の最新動向: プロセスの変化と仕様のトレンド
uhyo
3
990
Other Decks in Technology
See All in Technology
「Learning Outcome」を書きたくない私が、Learning Outcomeと折り合いをつけるまで
mhlyc
0
150
Adversary Infrastructure Hunting101
disconinja
0
100
Codex を使った障害対応机上演習の実際
orgachem
PRO
0
330
freeeにおけるSoftware Factory
freee
PRO
0
380
Railsで挑む大量データ永続化 〜600億件を永続化するための設計とボトルネックとの戦い〜
occhi
1
1.1k
Claude Code on Bedrock で統制をかける小ネタ集/claude-code-bedrock-governance-tips
emiki
1
520
Refining Active Record
shugo
0
200
野蛮なアジャイル [サイボウズ発!]組織の常識を覆した反骨のスクラム実践記 / Barbaric Agile - Enterprise Agile Study Group
ama_ch
0
130
Tofu-Controller lightning talk @ Containerday 2026
gionn
0
200
コンテナ運用におけるネットワーク・コンテナコストの削減方法/How to Reduce Network and Container Costs in Container Operations
masakiokuda
2
390
AI コーディングと人間の認知スループット / CTO Night & Day 2026 Morning Session / AI Coding and Human Cognitive Throughput
prog893
5
1.5k
局所最適は悪ではない。壊れているのは指標です。量と質を同時に見る先行指標の設計
recruitengineers
PRO
2
800
Featured
See All Featured
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
860
Large-scale JavaScript Application Architecture
addyosmani
516
110k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
360
31k
What the history of the web can teach us about the future of AI
inesmontani
PRO
2
750
Learning to Love Humans: Emotional Interface Design
aarron
275
41k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
2.2k
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
techseoconnect
PRO
0
500
The SEO Collaboration Effect
kristinabergwall1
1
600
Redefining SEO in the New Era of Traffic Generation
szymonslowik
1
490
First, design no harm
axbom
PRO
2
1.3k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
uxyall
1
3.5k
Measuring Dark Social's Impact On Conversion and Attribution
stephenakadiri
2
310
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