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.8k
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
VS CodeとGitHub Copilotで爆速開発!アップデートの波に乗るおさらい会 / Rapid Development with VS Code and GitHub Copilot: Catch the Latest Wave
yamachu
3
960
HybridWebViewでJSベースのView開発 / Development JavaScript based View with HybridWebView
yamachu
0
630
Enterprise以外でもMergeQueueしたい! / Use Merge Queue without GitHub Enterprise
yamachu
0
210
Web開発者におくる .NET 7時代の .NET WebAssemblyとの付き合い方
yamachu
0
160
Other Decks in Programming
See All in Programming
プログラミングどうやる? ~テスト駆動開発から学ぶ達人の型~
a_okui
0
180
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
290
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
220
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
2
1.1k
猫と暮らすネットワークカメラ生活🐈 ~Vision frameworkでペットを愛でよう~ / iOSDC Japan 2025
yutailang0119
0
190
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
620
Astroの使用感とディレクトリ設計についての考察
saku0109
0
130
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
460
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
2
570
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
2
280
CSS Linter の現在地 2025年のベストプラクティスを探る
ryo_manba
10
3k
VisionFrameworkで実現する - プライバシーに配慮した「顔ぼかし」機能 / Face blurring with Vision Framework
imaizume
0
150
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
830
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
560
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
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