react-modernization

概要

react-modernization とは？

react-modernization は、React アプリケーションを最新の React バージョンにアップグレードし、リファクタリングを支援する専門スキルです。クラスコンポーネントからフックを使った関数コンポーネントへの移行、React 18 以降で導入された並行処理機能の採用、自動コード変換のためのコーデモッド適用に重点を置いています。このスキルは、フロントエンドのコードベースをモダナイズし、保守性を高め、最新の React パフォーマンス向上を活用したいチームや開発者に最適です。

どんな人が使うべき？

このスキルは、レガシーな React プロジェクトの保守やアップグレードを担当するフロントエンド開発者、テックリード、エンジニアリングチームに適しています。古い React パターンやクラスコンポーネントに依存していたり、Suspense や並行レンダリングなどの新機能が未対応のコードベースをお持ちの方に、スムーズな移行のための体系的なワークフローを提供します。

react-modernization が解決する課題

• React アプリを旧バージョン（16、17）から最新（18以降）へアップグレード
• クラスコンポーネントをフックを使った関数コンポーネントに移行
• Suspense、トランジション、並行レンダリングなど新機能の導入
• 自動リファクタリングのためのコーデモッド適用
• 状態管理のモダナイズと TypeScript への更新
• 破壊的変更への対応とアプリ全体のパフォーマンス改善

使い方

インストール手順

1. 以下のコマンドでスキルをインストールします：

   npx skills add https://github.com/wshobson/agents --skill react-modernization
   

2. まずは SKILL.md ファイルで概要とワークフローのガイドを確認してください。

3. 補助的なファイルとして README.md、AGENTS.md、metadata.json、および rules/、resources/、references/、scripts/ といったフォルダも参照し、追加情報やヘルパースクリプトを活用しましょう。

ワークフローの適用方法

• ワークフローをそのままコピーするのではなく、推奨されるステップやコーデモッドを自分のリポジトリやツール、プロジェクト要件に合わせて調整してください。
• 大規模な React アップグレードやクラスコンポーネントのリファクタリング、新機能の導入を計画する際にこのスキルを活用しましょう。

主なトピック

• いつ react-modernization を使うべきか
• 推奨されるバージョンアップグレードの流れ（React 16 → 17 → 18）
• 各 React バージョンの破壊的変更への対応
• クラスからフックへの状態管理の移行
• 自動コーデモッドによる効率的なリファクタリング

推奨ファイル

• 全体像を把握するには SKILL.md から始めるのがおすすめ
• 詳細な技術情報やスクリプトはその他のファイルを参照してください

よくある質問

react-modernization はどんな場合に適していますか？

React コードベースを最新バージョンにアップグレードしたい、クラスコンポーネントからフックに移行したい、並行レンダリングや Suspense などの新機能を導入したい場合に最適です。特にレガシープロジェクトやフロントエンドスタックのモダナイズを目指すチームに役立ちます。

対応している React のバージョンは？

react-modernization は React 16、17 から 18 へのアップグレードをサポートし、破壊的変更の対応や新 API の導入方法を案内します。

TypeScript への移行も支援していますか？

はい、モダナイズの一環として TypeScript への更新も含まれており、型安全性と保守性の向上を図ります。

詳細やスクリプトはどこで確認できますか？

ファイルタブを開くと、ネストされた参照やモダナイズワークフローを支援するヘルパースクリプトを含む全ファイルツリーを確認できます。