TRIAL Meetup#1

Transcript

1. Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All Rights Reserved. Tuesday, October 21st, 2025 at 7:00 PM JST TRIAL Meetup #1 〜最近トライした技術〜 Claude Code × Codemod でライブラリ移行をやりきる 株式会社ヌーラボ 田村 亮弥
2. Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All Rights Reserved. 7月にヌーラボへ入社 🐣 前職はフロントエンド領域のエンジニアリングマネージャー。 フロントエンドまわりの仕様、ベストプラクティス、ライブラリの変遷を 追いかけるのが楽しい。 先々週から1000ピースパズルに挑戦中 (35%くらい)。 2 田村 亮弥 株式会社ヌーラボ (Nulab Inc.) サービス開発部 Backlog Unit 𝕏 @lollipop_onl
3. Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All Rights Reserved. イントロ 3
4. Copyright Nulab Inc. All Rights Reserved. なんのはなし？ 4 - Backlog のフロントエンドでは スキーマライブラリ として myzod が使われていた - エコシステムの充実度 や 標準化の動き に対応するため Zod を利用したい - 平行する開発を止めずに迅速かつ安全に myzod を Zod に置き換える必要があった 値の型が期待するものであるかを チェックできるライブラリ Zod に近いインターフェースで 機能が限定的な一方、 処理が高速なライブラリ フォームのバリデーションとか APIレスポンスの自動チェックとか Standard Schema という 標準化プロジェクトがある
5. Copyright Nulab Inc. All Rights Reserved. やったこと 1. 移行できるかを調べる 2. 移行ツールを実装する 3. 手動移行を Claude Code にやらせる 4. 誰でも移行ができるようにする 5
6. Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All Rights Reserved. 移行できるかを調べる 6
7. Copyright Nulab Inc. All Rights Reserved. ベンチマークをとる 7 移行して性能劣化が発生しないかどうかを 調べる 。 - myzod latest - Zod 3.2.0 - Zod 3 latest - Zod 4 latest https://github.com/lollipop-onl/zod-vs-myzod-benchmark myzodのベンチマークなので 有利不利はあるものの... Zod@3.2.0で著しく性能劣化が起こり 最新では改善していることが分かる ベンチマークツールで同等のコードを実行し てサンプルから大体の秒間実行回数を得る
8. Copyright Nulab Inc. All Rights Reserved. ベンチマークをとる 8 わかったこと： - myzod が超絶に早い - Zod の特定バージョンのみ性能劣化が激しかった - Zod 3 の最新版でも一般的なアプリケーションにとっては十分な速度が出ること
9. Copyright Nulab Inc. All Rights Reserved. Backlog で使われているメソッドを調べる 移行対象のメソッドを絞るため、TypeScript Compiler API を使った ツールを作成 。 https://github.com/lollipop-onl/find-myzod-schema 9 355ファイルで62種類6,488 個の メソッドが使われていた TypeScript Compiler API で型情報から 利用状況を収集
10. Copyright Nulab Inc. All Rights Reserved. Backlog で使われているメソッドを調べる わかったこと： - 単純移行できなかったり性能面で懸念があったりするメソッドの利用は限定的 - スキーマの定義は多数のファイルに渡る 10
11. Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All Rights Reserved. 移行できそう！ 11 件数は多いけど...
12. Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All Rights Reserved. 12 移行ツールを実装する
13. Copyright Nulab Inc. All Rights Reserved. Codemod とは 13 『コードを 抽象構造木 (AST) として扱い、安全に自動リファクタリングするツール』 AST は Abstract Syntax Trees の 略 コードを構造として解析・変更でき る
14. Copyright Nulab Inc. All Rights Reserved. 1. zod-v3-to-v4 という Codemod の実装を参照させる 2. myzod と Zod の互換性を調査させる 3. 開発環境を用意する 4. 移行するコードのパターンを一覧化してテストシナリオを書き出させる 5. Red-Green-Refactor サイクルで TDD させる https://github.com/lollipop-onl/myzod-to-zod 14 なるべく Claude Code に実装させるためのプラン
15. Copyright Nulab Inc. All Rights Reserved. - 参考にした設計や移行の方針などは Claude Code に事前に調査させる - 暫定的な調査結果は reports/ に日本語で - 恒久的に必要になりそうなものは docs/ に - 意図しない挙動を抑止 15 ドキュメントは書き出させる
16. Copyright Nulab Inc. All Rights Reserved. - 移行前後のコードをテストシナリオとして用意させる - シナリオごとに README を作成させて、意図するテストがされているか把握 16 人間にとってわかりやすいテスト設計
17. Copyright Nulab Inc. All Rights Reserved. - @t_wadaの実装プロセスで進めて で Red-Green-Refactor サイクル になる - まずテストで実装しようとしているものを把握できるため、手戻りが少なくて済む - リファクタリングフェーズは視野が狭いものになりがち 17 TDD は t_wada プロンプトで Red(失敗するテストを作成)→Green(テストが成功する実装を行う) →Refactor(実装をリファクタリングする)の順で機能実装を行うアプロー チ 動作優先の実装で進めたので アップデートするときに課題になるかも
18. Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All Rights Reserved. だいたい移行できた！ 18
19. Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All Rights Reserved. 19 手動移行を Claude Code にやらせる
20. Copyright Nulab Inc. All Rights Reserved. パース結果のエラーのインターフェースが大きく異なるため、手動の移行が必要になった。 - Codemod を書かせるのも複雑になりそう - かといってすべて手動でやるには量が多い 20 Codemod の実装が複雑になる移行 →
21. Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All Rights Reserved. Codemod と Claude Code を併用しよう！ 21
22. Copyright Nulab Inc. All Rights Reserved. 手動で置き換えができないコードを出力させ Claude Code に渡しやすくする - 移行ガイドへのリンクも含める 22 手動移行が必要な箇所を出力させる
23. Copyright Nulab Inc. All Rights Reserved. Claude Code 上で Codemod を実行して、結果を基に手動移行をやらせる 1. ! npx @lollipop-onl/myzod-to-zod “*.{ts,tsx}” --quiet --write 2. ` 結果を基に手動移行を実施 3. 型チェックやテストがパスすることを確認 23 Claude Code に手動移行をやらせる
24. Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All Rights Reserved. 完全移行できた！ 24
25. Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All Rights Reserved. 25 誰でも移行ができるようにする
26. Copyright Nulab Inc. All Rights Reserved. Claude Code Command を用意する 26 - Claude Code には再利用可能なコマンドを定義できる機能がある - 移行に必要なプロセスをコマンドとして定義して誰でも移行が実行できるようにする
27. Copyright Nulab Inc. All Rights Reserved. 27
28. Copyright Nulab Inc. All Rights Reserved. 28
29. Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All Rights Reserved. だれでも移行できる ようになった！ 29
30. Copyright Nulab Inc. All Rights Reserved. Copyright Nulab Inc. All Rights Reserved. 30 〆
31. Copyright Nulab Inc. All Rights Reserved. まとめ 31 - Claude Code に捨てる予定のコードを書かせるのは楽しい！ - Codemod を実装させることで漏れなく移行させられる - Codemod で実現しづらい変更はプロンプトで変更させるのはアリ - t_wada プロンプトによる TDD はお手軽 - Claude Code Commands で指示を共有可能な形にすれば再現性のある作業ができる • https://github.com/lollipop-onl/zod-vs-myzod-benchmark • https://github.com/lollipop-onl/find-myzod-schema • https://github.com/lollipop-onl/myzod-to-zod