Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Avatar for SMS tech SMS tech
September 25, 2025
84

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

Avatar for SMS tech

SMS tech

September 25, 2025
Tweet

More Decks by SMS tech

Transcript

  1. 自己紹介 原野 誉大(はらの たかひろ) 入社 2023/10 主なスキルセット iOS Frontend(React/Next) 好き 趣味

    対戦系のゲーム(最近はストリートファイター 6 が一番やってる) サウナ 2
  2. 背景:なぜライブラリのアップデートが必要になったか プロジェクト状況と Chakra UI の状況 2021 年 フルリニューアル開始 2022 年

    ChakraUI v2 採⽤決定 2024 年10 ⽉ ChakraUI v3 リリース 破壊的変更多数 2025 年 移⾏戦略実⾏中 2021 2022 2023 2024 2025 課題 Chakra v3 はほぼ全コンポーネントが内部的に書き直しされ、多くの破壊的変更が 入りました 新機能開発継続中での移行の難しさ 4
  3. ChakraUI とは React 向け UI コンポーネントライブラリ シンプルで使いやすい コンポーネント群 アクセシビリティ に配慮した設計

    テーマシステム でカスタマイズ可能 TypeScript 完全対応 // 使用例 <Button colorScheme="blue" size="md"> Click me </Button> 5
  4. v3 の破壊的変更の具体例 Checkbox: シンプル → 複合コンポーネント // v2 <Checkbox defaultChecked>Checkbox</Checkbox>

    // v3 <Checkbox.Root> <Checkbox.HiddenInput /> <Checkbox.Control> <Checkbox.Indicator /> </Checkbox.Control> <Checkbox.Label /> </Checkbox.Root> 6
  5. 戦略 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
  6. AI 活用の 2 つの領域 コンポーネントのバージョンアップ v2 のコンポーネントを参考に v3 のコンポーネントを生成する Chakra

    が提供している MCP サーバー + ClaudeCode の利用 現在の利用箇所の replace 作業 既存コンポーネント → 新 v3 コンポーネントに置換 V3 向けの IF の修正 import 文の書き換え 11
  7. 戦略 3:データ駆動な優先度決定 課題 移行が必要なコンポーネントが 80 個以上ある、どういう順番で進めると良いか 移行する 70 個のコンポーネントの中に依存関係があり、順番を考える必要があっ た

    やりたいこと なるべく工数は小さく、より利用されているコンポーネントから順番で進めたい やったこと 移行が簡単なコンポーネントの可視化 コンポーネントごとの利用状況の可視化 14
  8. まとめ 機能開発しながらのライブラリの大規模移行戦略 1. 段階的移行のための腐敗防止層 + workspace 分割 2. AI 活用による効率化

    3. データ駆動な優先度決定 話せなかったこと v3 にあげたことの影響を最小限にする VRT の仕組み バージョンアップに伴う影響のデザイナーとの協業 発表準備での AI 活用の話 18