プロジェクトを止めない。ライブラリの共存戦略とバージョンアップ/ChakraUI v3 Migration: Keeping Projects Running

Transcript

1. プロジェクトを止めない ChakraUI v3 移行戦略 原野誉大 @株式会社エス・エム・エス 2025-09-25 1
2. 自己紹介 原野 誉大(はらの　たかひろ) 入社 2023/10 主なスキルセット iOS Frontend(React/Next) 好き 趣味 対戦系のゲーム(最近はストリートファイター 6 が一番やってる) サウナ 2
3. 今日お話しすること 機能開発しながらのライブラリの大規模移行戦略 1. 背景・課題整理 2. 戦略的アプローチ 3 選 段階的移行のための腐敗防止層 + workspace 分割 AI 活用による効率化 データ駆動な優先度決定 3. まとめ 3
4. 背景：なぜライブラリのアップデートが必要になったか プロジェクト状況と Chakra UI の状況 2021 年 フルリニューアル開始 2022 年 ChakraUI v2 採⽤決定 2024 年10 ⽉ ChakraUI v3 リリース 破壊的変更多数 2025 年 移⾏戦略実⾏中 2021 2022 2023 2024 2025 課題 Chakra v3 はほぼ全コンポーネントが内部的に書き直しされ、多くの破壊的変更が 入りました 新機能開発継続中での移行の難しさ 4
5. ChakraUI とは React 向け UI コンポーネントライブラリ シンプルで使いやすい コンポーネント群 アクセシビリティ に配慮した設計 テーマシステム でカスタマイズ可能 TypeScript 完全対応 // 使用例 <Button colorScheme="blue" size="md"> Click me </Button> 5
6. v3 の破壊的変更の具体例 Checkbox: シンプル → 複合コンポーネント // v2 <Checkbox defaultChecked>Checkbox</Checkbox> // v3 <Checkbox.Root> <Checkbox.HiddenInput /> <Checkbox.Control> <Checkbox.Indicator /> </Checkbox.Control> <Checkbox.Label /> </Checkbox.Root> 6
7. アプローチ 7
8. 戦略 1：段階的移行のための腐敗防止層 + workspace 分割 やりたかったこと コンポーネント単位でのバージョンアップ リスクの低下 タスクの細分化による作業並列化 pnpm workspace の導入 Chakra-UI に依存した部分は別のパッケージ に切り出した メインのアプリが直接 Chakra-UI に依存しな いようにした 通常のプロジェクト アプリケーション node_modules/ chakra-ui pnpm workspace main-app packages/ ui-lib packages/ utils node_modules/ chakra-ui 8
9. workspace 構成の全体像 9
10. 戦略 2：AI 活用による効率化 なぜ AI 活用を選んだのか なるべく少人数でも進められるようにしたい 場所によっては機械的な移行作業も多い 10
11. AI 活用の 2 つの領域 コンポーネントのバージョンアップ v2 のコンポーネントを参考に v3 のコンポーネントを生成する Chakra が提供している MCP サーバー + ClaudeCode の利用 現在の利用箇所の replace 作業 既存コンポーネント → 新 v3 コンポーネントに置換 V3 向けの IF の修正 import 文の書き換え 11
12. Claude Code Hook を使った移行の例 12
13. AI を利用した感想 移行精度 シンプルなコンポーネント：高精度で移行可能 複雑なコンポーネント：手動調整が必要 13
14. 戦略 3：データ駆動な優先度決定 課題 移行が必要なコンポーネントが 80 個以上ある、どういう順番で進めると良いか 移行する 70 個のコンポーネントの中に依存関係があり、順番を考える必要があっ た やりたいこと なるべく工数は小さく、より利用されているコンポーネントから順番で進めたい やったこと 移行が簡単なコンポーネントの可視化 コンポーネントごとの利用状況の可視化 14
15. 2 つの評価軸 移行の簡単さ：dependency-cruiser コンポーネント間の依存関係を可視化 依存数少 = 移行容易 移行の効果：ast-grep コンポーネントの利用頻度を調査 使用頻度高 = 効果大 15
16. 移行戦略 16
17. 現在の状況 戦略確立：3 つのアプローチで移行の方針は完成 体制構築：2 名 →6 名の段階的チーム拡大 移行実践：継続開発を止めずに進行中(まだまだ走り始めです) 17
18. まとめ 機能開発しながらのライブラリの大規模移行戦略 1. 段階的移行のための腐敗防止層 + workspace 分割 2. AI 活用による効率化 3. データ駆動な優先度決定 話せなかったこと v3 にあげたことの影響を最小限にする VRT の仕組み バージョンアップに伴う影響のデザイナーとの協業 発表準備での AI 活用の話 18
19. ありがとうございました！ 19