AI時代、リファクタリングはもはや力仕事ではない

 (blog.lemonbase.team)
29 ポイント 投稿者 whatsup 2026-01-22 | 6件のコメント | WhatsAppで共有

AI + CodemodでDesign Systemのレガシーを整理した記事です。
大規模なリファクタリングを控えている方々の参考になれば幸いです。

問題発生の背景

  • 社内Design SystemでTypographyなど多数のコンポーネントがDeprecated
  • 新しいDesign System + Tailwind導入後、1つのコードベース内にDeprecatedパターンが混在
  • Boy Scoutルールで少しずつ整理するには
    • ファイル数が多すぎて
    • 機能変更PRとリファクタリングPRを分離する原則のため、優先順位が後回しになり続けた

アプローチ方法: Codemod + AI

  • 文字列置換ではなく、**ASTベースのCodemod（jscodeshift）**を使用
  • AIを活用して:
    • Deprecated Typography使用パターンを全面調査
    • Before/Afterルールを整理
    • jscodeshift変換スクリプトのたたき台およびテストコード作成を補助
  • 主な変換例:
    • <Body1 bold>텍스트</Body1>
      → <span className="typography-body1-bold">텍스트</span>
    • <HeadLine5 as="h1" color={SemanticColor.Text.Primary}>
      → <h1 className="typography-headLine5 text-primary">

結果

  • Typography関連のDeprecatedパターンを約95%自動変換
  • 混在パターンが大幅に減り、コードの一貫性とオンボーディング体験が改善
  • 「次のDesign System置き換えもCodemodで行う」という選択肢を確保

学んだこと

  • 思った以上に多くのリファクタリング作業はAST + Codemodで自動化可能
  • 大規模な自動変換では、「ファイルdiffレビュー」より「変換ルール + テストレビュー」のほうが効率的で安全
  • AIはパターン分析・たたき台作成の補助、Codemodは一貫した大量置換という役割で分けるのがよい

関連記事

6件のコメント

 
hebu570 2026-01-23

とても面白い文章です…！
現在のプロジェクトのフロントエンドコードがめちゃくちゃなので、使ってみるべきですね！
 
whatsup 2026-01-23

ご覧いただきありがとうございます。楽しんで読んでいただけてうれしいです！
導入してみて気になる点があれば、いつでもお気軽にコメントしてください！！
 
shincad 2026-01-23

とても有用な記事ですね。AST ルールを決めるとき、最初は全部自動化しようとして苦労した記憶が……。やってみると、曖昧なケースは除いて、確実なものだけ決めるのが正解なんですよね。
 
whatsup 2026-01-23

その通りです （泣） 私もまったく同じように「全部自動化してみよう！」とやってみて苦労した経験があります。
おっしゃる通り、曖昧なケースは除外して、確実なパターンを優先的に処理するのが効率的でした（笑）

  • 明確なパターンは Codemod
  • 曖昧なパターンは手動対応

このようにツートラックで進めるのが、実装・レビュー・バグのリスクまで考えると効率的なんですよね！
 
aliveornot 2026-01-23

おお、こういうのいいですね
 
whatsup 2026-01-23

好意的に見てくださってありがとうございます!!