React → Phoenix LiveView
要求された React インターフェースを再現し、移行先アプリケーションのアーキテクチャに統合します。ソースを視覚的・動作的なリファレンスとして扱い、移行先の要件が異なる場合はそれを優先します。React フレームワーク、CSS システム、コンポーネントライブラリ、Phoenix バージョンを仮定せず、コードから規約を発見します。
スコープと規約の確立
- 両方のプロジェクトの該当するリポジトリの指示文書と関連ドキュメントを読みます。React のエントリポイント、移行先アプリケーション、要求されたルートまたはコンポーネントを特定します。プロジェクトは別々のリポジトリまたは同じワークスペースに存在する場合があります。
- マニフェストと既存の実装を調査し、スタイル、コンポーネント、フォント、テーマ、アセット、ルーティング、認証、データアクセス、JavaScript 統合を特定します。新しいものを作成する前に、既存のルート、部分的な移植、コンポーネント、またはフックがないか確認します。
- スコープは割り当てられたインターフェースと必要な動作に限定します。静的なモックアップに新しいバックエンド機能は必要ありません。機能的な移行には実際の統合または明示的に開示されたギャップが必要です。
- ユーザーのテストおよびツールの権限を尊重します。ソースの調査、リファレンスの調査、プレビューの準備、自動テスト、ブラウザ QA はそれぞれ異なるアクティビティです。すべてが許可されていると想定しないでください。
1. ソースの調査
css-extraction.md を読みます。ページ、視覚的に重要な子要素、スタイル、コンポーネントのバリアント、アセット、状態ロジックをトレースします。以下を確立します：
- レイアウト、レスポンシブルール、タイポグラフィ、テーマ、画像、モーション。
- ライブラリのデフォルト、ローカルのオーバーライド、条件付きプロパティ、CSS カスケード後の効果的なスタイル。
- ナビゲーション、フォーム、オーバーレイ、ローディング、権限、ミューテーション、永続化、リカバリパス（スコープに関連するもの）。
コンパクトな移行マップを記録します：ソースコンポーネント → 移行先コンポーネント、ソースデータ/アクション → 移行先コンテキスト/イベント、ソーストークン → 移行先相当。観察された動作を仮定や未解決のランタイム値から分離します。
解析リクエストの場合は、結果を提示して停止します。許可された実装の場合は、重大なギャップや逸脱を簡潔に示し、続行します。未解決の選択がスコープ、動作、または忠実度に実質的に影響を与える場合にのみ質問します。日常的な変換の決定に対して個別の確認を要求しないでください。
2. Phoenix での実装
liveview-conventions.md を読みます。必要な結果を再現できる場合は、移行先のコンポーネント、レイアウト、コンテキスト、認可、トークン、アセット、フックを再利用します。
- 機械的に React の構文やコンポーネント名を翻訳するのではなく、レンダリングされた出力と動作を翻訳します。
- 視覚的な値、レスポンシブルール、状態、セマンティクスを保持します。正当な理由なく、漠然と似たフォント、アイコン、コンポーネント、アニメーションに置き換えないでください。
- 明示的な移行先要件を一貫して適用し、目に見える逸脱を説明します。別のプロジェクトのフォント制限、ストレージプロバイダ、ルート構造、命名を移植に持ち込まないでください。
- サーバー所有の状態は LiveView とコンテキストに保持します。ローカルの視覚的な動作には CSS または既存のクライアントメカニズムを使用します。ブラウザ機能で本当に必要な場合のみフックを追加します。
- 該当するローディング、空、バリデーション、保留中、成功、失敗、リトライ、権限、リカバリ状態を完了させます。失敗時にユーザー入力を保持し、繰り返しのアクションがデータを破損しないようにします。
3. レビューと引き継ぎ
移行マップに照らして変更をレビューします（レスポンシブ/テーマバリアント、認可、イベント処理、アクセシビリティ、ライフサイクルクリーンアップを含む）。必要なアセットと参照コンポーネントが存在することを確認します。
許可されている場合のみ、プロジェクトの検証コマンドとランタイムツールを使用します。許可されている場合はライブプレビューを準備します。ソースの調査のみに基づいて、ランタイム、視覚的、またはテストの検証を主張しないでください。
簡潔に引き継ぎます：何が移植されたか、重要な逸脱、モックや欠落している統合、実行または省略された検証、ユーザーがテストすべき状態。依存関係が完了を妨げる場合は、具体的に特定し、スコープ内の独立した作業を完了させます。