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
無関心の谷
kanayannet
0
140
実はすごいスピードで進化しているCSS
hayato_yokoyama
0
110
生成AIで日々のエラー調査を進めたい
yuyaabo
0
440
REST API設計の実践 – ベストプラクティスとその落とし穴
kentaroutakeda
2
350
Perplexity Slack Botを作ってAI活用を進めた話 / AI Engineering Summit プレイベント
n3xem
0
570
コード書くの好きな人向けAIコーディング活用tips #orestudy
77web
3
270
Effect の双対、Coeffect
yukikurage
4
1.2k
プロダクト改善のために新しいことを始める -useContextからの卒業、Zustandへ-
rebase_engineering
1
110
Parallel::Pipesの紹介
skaji
2
900
FastMCPでMCPサーバー/クライアントを構築してみる
ttnyt8701
2
130
つよそうにふるまい、つよい成果を出すのなら、つよいのかもしれない
irof
1
250
ReadMoreTextView
fornewid
0
170
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
35
6.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
BBQ
matthewcrist
89
9.7k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
870
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Docker and Python
trallard
44
3.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
GraphQLとの向き合い方2022年版
quramy
46
14k
The Cost Of JavaScript in 2023
addyosmani
50
8.3k
Balancing Empowerment & Direction
lara
1
110
The Power of CSS Pseudo Elements
geoffreycrofte
76
5.8k
Adopting Sorbet at Scale
ufuk
77
9.4k
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