ln-721-frontend-restructure

パス： ファイルパス（references/、../ln-*）は、このスキルディレクトリからの相対パスです。

ln-721-frontend-restructure

タイプ： L3 Worker
カテゴリ： 7XX Project Bootstrap

2 つのモードを備えたフロントエンド構造ワーカーです。SCAFFOLD（テンプレートから最小限の React プロジェクトを生成）または RESTRUCTURE（モノリスをコンポーネントベースのアーキテクチャに移行）を実行します。

---

モードの選択

モード	実行タイミング	入力	出力
SCAFFOLD	CREATE パイプライン — 既存のフロントエンドがない場合	ln-720 のターゲットスタック設定	最小限の React + Vite プロジェクト（約 7 ファイル）
RESTRUCTURE	TRANSFORM パイプライン — 既存のフロントエンドが見つかった場合	モノリシックな React ソース	コンポーネントベースのアーキテクチャ

---

目的と対象範囲

項目	説明
入力	ターゲットスタック設定（SCAFFOLD）またはモノリシックな React ソース（RESTRUCTURE）
出力	最小限のプロジェクト（SCAFFOLD）またはコンポーネントベースのアーキテクチャ（RESTRUCTURE）
フレームワーク	React + TypeScript + Vite

対象範囲の境界：

• SCAFFOLD：ビジネスロジックを含まない、最小限のスターターファイルを生成します
• RESTRUCTURE：既存のコードを再構成します。新しい機能は追加しません
• React + TypeScript プロジェクトで動作します
• 参照ファイルの変換ルールを適用します

---

ワークフロー

SCAFFOLD モード（CREATE パイプライン）

フェーズ	名前	アクション	出力
S1	生成	最小限の React + Vite + TypeScript プロジェクトファイルを作成	スターターファイル約 7 個
S2	検証	ファイル構造を確認し、設定を検証	有効なプロジェクトの骨組み

RESTRUCTURE モード（TRANSFORM パイプライン）

フェーズ	名前	アクション	出力
1	分析	ソースをスキャンし、コンポーネントの種類を検出して複雑さを測定	ファイル一覧、複雑さの指標
2	計画	分割のしきい値を適用し、ファイルの移動を算出して競合を検出	移行計画
3	実行	フォルダーを作成し、内容を抽出してインポートを更新	再構成されたファイル
4	検証	ビルドを実行し、インポートを確認して構造を検証	ビルド成功レポート

---

SCAFFOLD モードのフェーズ

フェーズ S1：スターターファイルを生成

最小限の React + Vite + TypeScript プロジェクトを作成します。

ファイル	用途
package.json	依存関係：react、react-dom、typescript、vite、@vitejs/plugin-react
vite.config.ts	React プラグイン、ポート、プロキシ設定を含む Vite 設定
tsconfig.json	パスエイリアスを含む厳格な TypeScript 設定
index.html	root div を含むエントリー HTML
src/main.tsx	StrictMode を含む React エントリーポイント
src/App.tsx	ルーターのプレースホルダーを含むルート App コンポーネント
src/index.css	基本スタイル（リセット、変数、レイアウト）

フェーズ S2：スキャフォールドを検証

確認項目	方法	期待される結果
すべてのファイルが作成されている	ファイルの存在確認	7 ファイルが存在する
package.json が有効	JSON の解析	構文エラーがない
tsconfig.json が有効	JSON の解析	構文エラーがない
ハードコードされた値がない	内容をスキャン	プロジェクト名がハードコードされず、設定から取得されている

---

RESTRUCTURE モードのフェーズ

フェーズ 1：分析

現在のフロントエンド構造をスキャンし、コンポーネントを分類します。

ステップ	アクション	参照先
1.1	ソース内のすべての .tsx ファイルと .ts ファイルをスキャン	—
1.2	ファイルの複雑さ（行数、フック、型）を測定	transformation_rules.md
1.3	カテゴリごとにコンポーネントを分類	component_patterns.md
1.4	インポートの依存関係グラフを作成	import_strategy.md

出力： 分類と指標を含むコンポーネント一覧。

---

フェーズ 2：計画

分析に基づいて移行計画を作成します。

ステップ	アクション	参照
2.1	分割しきい値を適用し、再構成するファイルを特定する	transformation_rules.md
2.2	各ファイルの移行先パスを算出する	react_folder_structure.md
2.3	必要なインポートの更新を特定する	import_strategy.md
2.4	潜在的な競合（名前の衝突、循環依存）を検出する	—

出力： 移行前／移行後の対応表を含む移行計画。

---

フェーズ 3：実行

適切な順序で変換を適用します。

ステップ	アクション	備考
3.1	ディレクトリ構造を作成する	すべての移行先フォルダー
3.2	型を types.ts に抽出する	型には依存関係がありません
3.3	定数を constants.ts に抽出する	定数が依存するのは型のみです
3.4	フックを hooks.ts に抽出する	フックは型と定数に依存します
3.5	サブコンポーネントを抽出する	コンポーネントは上記すべてを使用します
3.6	バレルエクスポート（index.ts）を作成する	インポートを整理するため
3.7	すべてのインポートパスを更新する	参照を修正します

順序が重要です： インポートの破損を防ぐため、順番どおりに実行してください。

---

フェーズ 4：検証

再構成したプロジェクトを検証します。

チェック項目	コマンド	期待される結果
TypeScript のコンパイル	npx tsc --noEmit	エラーなし
ビルド	npm run build	成功
孤立ファイルがないこと	手動確認	ソースの場所が空
インポートが解決されること	ビルド成功	モジュールが見つからないエラーなし

---

変換の概要

変換	変換前の状態	変換後の状態
コンポーネントの分割	300 行を超える単一ファイル	関連ファイルをまとめた機能フォルダー
型の抽出	インラインのインターフェース	個別の types.ts
定数の抽出	インラインのマジック値	個別の constants.ts
フックの抽出	インラインの useState/useEffect	個別の hooks.ts または共通フック
UI コンポーネントの移動	各機能に分散	components/ui/ に集約
レイアウトコンポーネントの移動	機能と混在	components/layout/ に集約

---

重要なルール

• モードの認識： SCAFFOLD はテンプレートから作成し、RESTRUCTURE は既存のものを変換します。決して混在させないでください
• 単一責任： フロントエンドの構造のみを扱い、バックエンドは変更しないでください
• 冪等性： ファイルの重複や破損を起こさずに再実行できます
• ビルドの検証： 変更後にビルドが成功することを必ず確認してください（RESTRUCTURE：npm run build）
• 機能の維持： 動作は変更せず、構造のみを変更します（RESTRUCTURE モード）
• バックアップ戦略： 検証が成功するまでソースファイルを削除しないでください（RESTRUCTURE モード）
• インポートの一貫性： 共通ファイルにはパスエイリアスを、同じ場所に配置したファイルには相対パスを使用してください

---

完了の定義

SCAFFOLD モード：

• 7 つのスターターファイルがすべて生成されている
• package.json と tsconfig.json が有効である
• プロジェクト名がハードコードされていない（設定値を使用している）

RESTRUCTURE モード：

• すべてのソースファイルが分析され、分類されている
• 移行前／移行後の対応表を含む移行計画が作成されている
• テンプレートに従ったディレクトリ構造が作成されている
• すべての抽出（型、定数、フック、コンポーネント）が完了している
• プロジェクト全体のインポートパスが更新されている
• npm run build が正常に成功する
• 孤立したインポートや不足ファイルがない
• 共通フォルダーにバレルエクスポートが作成されている

---

リスクの軽減

リスク	検出方法	軽減策
再構成後のビルド失敗	npm run build が失敗する	ロールバック：ソースから復元し、具体的なエラーを調査する
インポートの欠落	モジュールが見つからないエラー	変更前後のすべてのインポートをスキャンし、更新漏れのパスを修正する
循環依存	ビルド警告または実行時エラー	依存関係グラフを分析し、共通コードを抽出して循環を解消する
機能の喪失	テストの失敗または UI の破損	変換の前後に既存のテストを実行する
名前の衝突	エクスポート名の重複	移動する前に機能名のプレフィックスを付けて名前を変更する

---

参照ファイル

ファイル	目的
references/transformation_rules.md	分割のしきい値、抽出ルール、変換順序
references/component_patterns.md	カテゴリ別のコンポーネント分類
references/import_strategy.md	インポートの更新ルール、パスエイリアス、バレルエクスポート
references/react_folder_structure.md	目的のディレクトリ構造テンプレート

---

バージョン： 3.0.0 最終更新日： 2026-02-07