Skip to main content
手動でのセットアップが面倒ですか？このページのリンクを Devin のセッションに貼り付けて、すべてのセットアップを依頼してください。
1

React 19 アップグレードガイドを使って Devin に指示する

React 19 では、ref の扱い、コンテキストの利用方法、TypeScript の型、廃止されたレガシー API などに、後方互換性を破壊する変更が導入されています。公式アップグレードガイドにはすべての変更が記載されていますが、難しいのはそれらを 自分たちの コードに対応付けることです。自分でガイドを読み、すべてのコンポーネントを精査する代わりに、ガイドとコードベースの両方を Devin に渡して、実際のファイルを対象にしたプレイブックを生成させましょう。Devin のホームページから新しい Devin セッションを開き、アップグレードガイドの URL と必要な内容を含むプロンプトを貼り付けてください:
2

コードベース固有のコンテキストを付与する

Devin は、あなたのリポジトリのアーキテクチャを自動的に理解するために DeepWiki を使用します。また、React 19 に関するオンライン情報源 ― 公式アップグレードガイド、ブログ記事、ライブラリの変更履歴 ― も参照し、そこで得た内容を直接プレイブックに取り込むことができます。プレイブックの精度をさらに高めるために、移行で影響を受けるパターンについて Devin に伝えてください:
  • “src/components/ui/ 配下の 23 個のコンポーネントで forwardRef を使っています — これらは私たちのデザインシステムのプリミティブです”
  • “src/legacy/ には、まだ文字列 refs と componentWillMount を使っているクラスコンポーネントが 4 つあります”
  • “組織内の他のリポジトリ (例: acme/design-system, acme/admin-dashboard) を確認して、すでに React 19 への移行を始めているかどうかを確認し、そこで確立されたパターンがあれば再利用してください”
依存ライブラリごとに React 19 互換性ガイド (例: React Router、React Hook Form、あるいは使用している UI ライブラリ) が用意されている場合は、それらの URL もプロンプトに貼り付けてください — Devin がすべて読み込み、破壊的変更を照らし合わせて確認します。
3

コードベースごとのプレイブックを確認する

Devin は React 19 のアップグレードガイドを最初から最後まで読み込み、すべての後方互換性のない変更を、DeepWiki を通じてあなたのコードベースと照合し、対象ファイル、複雑さの見積もり、検証ステップを含むフェーズごとのプレイブックを作成します。
このプレイブックは実際の移行作業そのものではなく、あくまで計画です。チームでレビューし、フェーズやスコープを調整したうえで、どのように実行するかを決定してください。
4

実行とスケール

プレイブックの内容が問題なさそうであれば保存し、セッションに添付してフェーズごとに実行します:リポジトリ横断でスケール — 同じアップグレードが必要な複数の React アプリがある場合は、managed Devins を使って、保存したプレイブックをそれらすべてで並列実行するよう Devin に依頼してください。