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
7
6.2k
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
540
Enterprise以外でもMergeQueueしたい! / Use Merge Queue without GitHub Enterprise
yamachu
0
120
Web開発者におくる .NET 7時代の .NET WebAssemblyとの付き合い方
yamachu
0
160
Other Decks in Programming
See All in Programming
実践ArchUnit ~実例による検証パターンの紹介~
ogiwarat
2
230
Devinで実践する!AIエージェントと協働する開発組織の作り方
masahiro_nishimi
6
2.9k
XSLTで作るBrainfuck処理系
makki_d
0
160
從零到一:搭建你的第一個 Observability 平台
blueswen
0
640
Blueskyのプラグインを作ってみた
hakkadaikon
1
450
Gleamという選択肢
comamoca
6
590
KotlinConf 2025 現地で感じたServer-Side Kotlin
n_takehata
1
150
FastMCPでMCPサーバー/クライアントを構築してみる
ttnyt8701
2
130
カクヨムAndroidアプリのリブート
numeroanddev
0
360
"使いづらい" をリバースエンジニアリングする UI の読み解き方
rebase_engineering
0
130
単体テストの始め方/作り方
toms74209200
0
380
eBPFを用いたAIネットワーク監視システム論文の実装 / eBPF Japan Meetup #4
yuukit
3
720
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
42
2.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.9k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
7
640
Writing Fast Ruby
sferik
628
61k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Being A Developer After 40
akosma
90
590k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
123
52k
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