migrate-xml-views-to-jetpack-compose

このスキルでは、既存の Android XML View を Jetpack Compose に移行する手順を説明します。体系的な 10 ステップの方法に従い、安定して安全かつ見た目の一貫性を保ちながら移行します。このスキルでは UI の移行（XML から Jetpack Compose）のみを行います。

目的

単一のレガシー XML レイアウトを体系的に最新の宣言型 Jetpack Compose UI に変換し、ピクセル単位の視覚的な一致と機能の完全性を維持します。

10 ステップの移行プロセスの概要

1. 移行に最適な XML を特定する
2. プロジェクトとレイアウトを分析する
3. 計画を作成する
4. XML View の UI をキャプチャする
5. Compose の依存関係とコンパイラーを設定する
6. Compose のテーマ設定を行う
7. XML レイアウトを Compose に移行する
8. 移行を検証する
9. 使用箇所を置き換える
10. XML コードを削除する

詳細な手順

ステップ 1：移行に最適な XML を特定する

ユーザーが対象の XML レイアウトを明示的に指定している場合は、ステップ 2 に進みます。 そうでない場合は、references/identify-optimal-xml-candidate.md のロジックに従ってコードベースを分析し、移行に最適な候補を特定します。

ステップ 2：プロジェクトとレイアウトを分析する

特定した XML View の構造、階層、実装の詳細を分析します。 レイアウトと周辺のプロジェクトコンテキストに関する技術監査を行う際は、references/analysis-of-the-project-and-layout.md を参考にしてください。

ステップ 3：計画を作成する

ステップ 1 と 2 の出力および分析結果を基に、移行の段階的な計画を作成します。ユーザーとのやり取りが可能な場合は、続行する前に計画をユーザーに提示して承認を求めます。ユーザーとのやり取りができない場合は、作成した計画に従ってステップ 4 に進みます。

ステップ 4：XML View の UI をキャプチャする

ユーザーとのやり取りが可能な場合は、XML View の UI のスクリーンショットをアップロードするか、ファイルの絶対パスを提示するようユーザーに依頼します。この画像を、ステップ 7 でのレイアウト移行時の視覚的な参照として使用します。 Android エミュレーターを実行できる場合は、XML の候補に対する既存のスクリーンショットテストを探します。存在しない場合は、プロジェクトで既に使用されているテストフレームワークを使って作成します。フレームワークがない場合は、UI Automator または Espresso を使い、必要最小限のセットアップでスクリーンショットテストを作成します。テストを実行し、XML UI のベースラインスクリーンショットを撮影します。 いずれにも該当しない場合は、ステップ 5 に進みます。

ステップ 5：Compose の依存関係とコンパイラーを設定する

build.gradle または libs.versions.toml で、Compose の依存関係とコンパイラーの設定を確認します。設定がない場合は、Setup Compose Dependencies and Compiler を使用します。依存関係がエラーなく解決されることを確認するため、同期を実行します。

ステップ 6：Compose のテーマ設定を行う

プロジェクトに Compose のテーマ設定が既にある場合は、ステップ 7 に進みます。Compose のテーマ設定がない場合は、初期化します。Material ベースのプロジェクトでは、Material 3 migration guidelines に従います。カスタムデザインシステムでは、専門知識に基づいて XML のテーマ設定を移行し、既存のスタイルに合わせます。 制約： テーマ全体を移行しないでください。対象の XML に必要な最小限のテーマ設定のみを実装します。相互運用性を保つため、元の XML テーマを維持します。既存のプロジェクトのコード規約、パターン、名前、値を維持します。

ステップ 7：XML View を Compose に移行する

references/xml-layout-migration.md とステップ 4 の画像を参照しながら、XML の候補を Jetpack Compose のコードに変換します。視覚的な検証を容易にするため、新しく作成したコンポーザブルには Compose Preview を必ず含めてください。

ステップ 8：使用箇所を置き換える

移行した XML レイアウトの使用箇所を、新しい Compose コンポーネントに置き換えます。

• Views に Compose を追加するには、Views での Compose の使用を参照してください。
• Compose に Views を追加するには、Compose での Views の使用を参照してください。

ステップ 9：移行を検証する

ステップ 4 のベースラインスクリーンショット画像と、新しいコンポーザブルのレンダリング済み Compose プレビューを比較します。 文字列の内容は無視し、レイアウトとスタイルに注目してください。視覚的に一致するまで Compose コードを調整します。確認できたら、新しいコンポーザブルの Compose UI テストを作成します。

ステップ 10：XML コードを削除する

移行した XML ファイルと、それに関連するレガシーテストを削除します。注意： プロジェクトのほかの部分から参照されていないコードとリソースのみを削除してください。