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にコードを生成するコードを作らせて、再現性を担保しよう! / Let AI generat...
Search
Yusuke Yamada
May 27, 2025
Programming
8
6.4k
AIにコードを生成するコードを作らせて、再現性を担保しよう! / Let AI generate code to ensure reproducibility
TSKaigi 2025 After Night 〜セッションおかわりの会!〜 で発表したLT資料です。
https://bitkey.connpass.com/event/351174/
Yusuke Yamada
May 27, 2025
Tweet
Share
More Decks by Yusuke Yamada
See All by Yusuke Yamada
HybridWebViewでJSベースのView開発 / Development JavaScript based View with HybridWebView
yamachu
0
560
Enterprise以外でもMergeQueueしたい! / Use Merge Queue without GitHub Enterprise
yamachu
0
140
Web開発者におくる .NET 7時代の .NET WebAssemblyとの付き合い方
yamachu
0
160
Other Decks in Programming
See All in Programming
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
750
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
200
NPOでのDevinの活用
codeforeveryone
0
800
CursorはMCPを使った方が良いぞ
taigakono
1
240
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
110
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
150
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
150
Team operations that are not burdened by SRE
kazatohiei
1
310
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.2k
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
RailsConf 2023
tenderlove
30
1.1k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
GitHub's CSS Performance
jonrohan
1031
460k
How STYLIGHT went responsive
nonsquared
100
5.6k
A better future with KSS
kneath
239
17k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
730
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Transcript
AIにコードを生成するコードを作らせて、 再現性を担保しよう! TSKaigi 2025 After Night 〜セッションおかわりの会!〜 / LT
{ "name": "Yusuke Yamada (ちゅうこ, yamachu )", "workAt": " 株式会社CARTA
HOLDINGS", "interests": [ "TypeScript", "C#", "Scala", "VS Code" ], "accounts": { "X": "@y_chu5", "GitHub": "yamachu" } } 自己紹介 2
でも…こんな経験ありませんか? 型が合わなかったり、シンタックスエラー起こしたり 一度直しても、別のファイルに適用すると同じ指針で編集してくれない モデルや時期で結果がブレる… 一括でドン!といくならいいかもしれないが… AIには「型の理解」と「再現性」は難しい? 1. はじめに:AIでのマイグレーション「あるある」 古いコードのマイグレーション、AIに任せたいですよね? 3
AI Agentに対して、コードを直接書き換えることを期待しがち ここの制御が難しい ↓ AI様に、人間のエンジニアが行うような振る舞いのステージに降りてきてもらう マイグレーション手順を示し マイグレーションスクリプトを生成し テストケースを追加したり つまり、 「コードを生成するコード」
の実装なら私達も理解できて、再現も出来る? 2. 仮説:AIに「コードを生成するコード」を作らせるのはどうか 4
「コードを生成するコード」 、ts-morphを使ったスクリプト…ってコト!? 5
今回は material-ui の非推奨となった makeStyles 関数から、MUI v5 の SxProps への マイグレーションを例として紹介します
もちろんマイグレーションには ts-morph を使用します 養殖コードはこちら https://github.com/yamachu/play-ts-morph 3. アプローチ:実践編 6
マイグレーション対象のコードを把握する どんなコードがあるか? どんなパターンがあるか? どのような変更が必要か? 地道にコードを見るだけでなく、例えば GitHub Copilot で以下のように調べるのも良 い @workspace
makeStylesを使用しているコンポーネントで、呼び出し方のパター ンや命名規則などのパターンを知りたいです。 ステップ1: コードの把握とパターン抽出 7
Before: makeStyles のコード例 import makeStyles from '@mui/styles/makeStyles'; const useStyles =
makeStyles((theme) => ({ // theme 非依存のスタイル root: { display: 'flex', }, // theme 依存のスタイル info: { padding: theme.spacing(1, 2), backgroundColor: theme.palette.background.default, }, })); // const classes = useStyles(); // <Box className={classes.root}> // <Typography className={classes.info}>...</Typography> // </Box> 8
After: SxProps への変換例 import { SxProps, Theme } from '@mui/material';
const rootStyles: SxProps = { display: 'flex', }; const infoStyles: SxProps<Theme> = (theme) => ({ padding: theme.spacing(1, 2), backgroundColor: theme.palette.background.default, }); // <Box sx={rootStyles}> // <Typography sx={infoStyles}>...</Typography> // </Box> 9
AIとの対話で「マイグレーションスクリプトのプラン」を策定 いきなりコードを書かせず、まず「変換処理を行うプロンプト」を作成 そのプロンプトを元に、AIに「ts-morphを使って、どういうプランで書ける か」を提案させる ポイント:1ステップの粒度を細かく刻む プランを作ってもらうと、ファイル変換処理の流れが提案される 例: ファイル抽出 → AST解析
→ ノード変換 → コード出力 これでも粗いので、さらに細分化するとデバッグしやすい このプランから、自分が想定していないケースも出てくることがある (ここのやり取りを見せたかったのですが、Chatログ紛失してしまいました…) ステップ2: プロンプト作成と実装プランニング 10
AIに実装させる際の工夫 各ステップに「テストケース(入出力ペア) 」を渡す 関数実装の際にも、その入力ケースの処理パターンをjsdocなどに記載させる のも良い 実装したコードで、実際にmigrationを都度Agentで走らせる 自律的に修正するループが生まれる 例外的なパターンは人間が対応する方がコスト的に良いので、早々に諦めさ せる 4.
実装 11
長いタスク指示〜〜各書き換えを行った後make runを実行して試してください。 実行結果にTypeScriptのproblemsが出力されるので、それを元にコードの改善を 行ってください。 12
AST操作系のコード意外と書いてくれる 割とニッチなコードだし学習データが少ないのではと思ったけど、意外と書 いてくれる 若干TS Compiler APIと混同したりするけど、自分で直せるレベルのもの 型システムによる「ガードレール」は強い ts-morphでコードを生成するため、手でtemplate書くよりも安全 型チェックエラー =
考慮漏れのパターン発見! とみなせる 5. 所感 13
今回の取り組みのメリット 「コードを作るコード」で再現性を担保できた 型との組み合わせで変更パターンを列挙しやすくなった AIとの「協調」の重要性 AIはコードや型を完全に理解しているわけではない 人間が「仕組み」として支援することで、一定の軌道修正は出来そう 今後のAIの進化に期待しつつ、エンジニアが「ガードレール」を敷く役割は 重要 TypeScriptに限って言えば… 例えばTypeScript
Compiler APIのMCP Serverとかが出てきたら? ScalaだとMetalsが実装済み 6. まとめと今後の期待 14