component-refactoringスキルでDifyの巨大Reactコンポーネントをリファクタリングする方法

300行を超えるReactコンポーネントや、複雑度スコアが50を超えるコードは、保守性やテスタビリティの面で課題を抱えています。しかし、どこから手をつけるか判断するのは容易ではありません。

この記事では、Difyリポジトリのcomponent-refactoringスキルを使って、複雑なReactコンポーネントを分析・リファクタリングする方法を解説します。

このスキルは何をしてくれるのか

component-refactoringは、Difyフロントエンドの高複雑度Reactコンポーネントをリファクタリングするスキルです：

• 複雑度分析ツール（pnpm analyze-component）による定量評価
• カスタムフック抽出、サブコンポーネント分割などのリファクタリングパターン
• リファクタリング指示の自動生成（pnpm refactor-component）
• 複雑度スコアに基づく優先度判定（0-25: 単純、26-50: 中程度、51+: 要リファクタリング）

Difyフロントエンドの保守性を改善したい開発者に向いています。

インストール方法

前提条件

• Claude Codeがインストール済みであること
• Difyプロジェクト（web/ディレクトリ）へのアクセス

インストールコマンド

Copyclaude mcp add github.com/langgenius/dify/tree/main/.claude/skills/component-refactoring

使い方

複雑度を分析する

Copycd web
pnpm analyze-component src/components/LargeComponent.tsx
pnpm analyze-component src/components/LargeComponent.tsx --json

リファクタリング指示を生成する

Copypnpm refactor-component src/components/LargeComponent.tsx
pnpm refactor-component src/components/LargeComponent.tsx --json

主なリファクタリングパターン

1. カスタムフック抽出 - 複雑なstate管理をhooks/use-<feature>.tsに分離
2. サブコンポーネント分割 - 巨大なJSXを小さなコンポーネントに分割
3. 条件分岐の簡略化 - ネストした三項演算子をルックアップテーブルに置換
4. API/データロジックの分離 - @tanstack/react-queryを使ったデータ取得の分離
5. モーダル管理の分離 - 複数のboolean stateを単一のモーダル管理に統合
6. フォームロジックの分離 - @tanstack/react-formを使ったフォーム処理の分離

Dify固有の規約

• フックはhooks/サブディレクトリまたはuse-<feature>.tsに配置
• React QueryではNAME_SPACEをクエリキーに使用
• 無効化フックはuseInvalidXxxとして公開

知っておくべき注意点

複雑度スコアを先に確認する

リファクタリングを始める前に、必ずanalyze-componentで複雑度スコアを確認してください。スコアが25以下なら、テストを先に書くほうが効果的です。

Difyプロジェクト固有のツール

analyze-componentとrefactor-componentはDifyプロジェクトのスクリプトです。他のプロジェクトでは利用できません。

段階的にリファクタリングする

一度にすべてを変更するのではなく、1つのパターンを適用→テスト→次のパターン、の順序で段階的に進めてください。

まとめ

component-refactoringスキルを使うと、Difyフロントエンドの複雑なReactコンポーネントを複雑度分析に基づいて体系的にリファクタリングできます。6つのリファクタリングパターンを段階的に適用することで、保守性とテスタビリティが向上します。

関連リンク

→ component-refactoring スキル詳細