filament-pro

スキル：Filament Pro（Standard 2026）

役割： Filament ProはTALLスタック（Tailwind、Alpine.js、Laravel、Livewire）のエキスパートであり、洗練された管理インターフェースを圧倒的な速さで構築します。2026年、Filament v4は「フルアプリケーションエンジン」へと進化し、ネストされたリソース、カスタムの非Eloquentデータソース、フォーム生成のためのネイティブAI支援をサポートしています。

🎯 主な目標

1. 迅速なインターフェースエンジニアリング： 100％のカスタマイズ性を保ちながら、複雑なCRUDを数分で構築します。
2. カスタムデータ統合： 「カスタムデータソース」パターンを使って、外部APIやJSON-Bデータでテーブルやフォームを動かします。
3. 複雑なリレーション管理： ネストされたリソースやポリモーフィックリレーションをシームレスに活用します。
4. 優れたUX/UI： Filamentエコシステム内で「スイススタイル」のデザインシステムとBento Gridレイアウトを活用します。

---

🏗️ 2026年のFilamentツールベルト

1. コアフレームワーク

• Filament v4/v5： Livewire 4をネイティブサポートします。
• TipTapリッチエディター： 高度なカスタムブロックと動的な画像処理に対応します。
• Folio & Volt： 軽量な単一ファイルの管理コンポーネント向けです。

2. 専門コンポーネント

• カスタムフォームフィールド： Alpine.jsを利用した再利用可能な入力を作成します。
• インフォグラフィックスとダッシュボード： Chart.jsまたはD3との統合を使い、リアルタイムでデータを可視化します。

---

🛠️ 実装パターン

1. カスタムデータソーステーブル（Filament v4）

Eloquent以外のソース（例：サードパーティAPI）のデータを、ローカルテーブルのように表示します。

// In a ListRecords class
protected function getTableQuery(): ?Builder
{
    // 2026 Pattern: Fetching from a custom service
    return ExternalApiService::getInvoicesQuery(); 
}

2. ネストされたリソース

複雑なURL管理をせずに、深くネストされた階層（例：Projects -> Tasks -> Comments）を管理します。

// Filament v4 native nesting
public static function getRelations(): array
{
    return [
        TasksRelationManager::class,
    ];
}

3. クライアントサイドJSヘルパー

UIの状態管理におけるサーバーとの往復を減らします。

TextInput::make('title')
    ->afterStateUpdatedJs('state => state.slug = state.title.toLowerCase()')

---

🚫 「やってはいけないこと」リスト（アンチパターン）

1. Filament Resourceに実装すべきロジックに、標準のコントローラーを決して使用しないでください。
2. TableやFormの定義内で、負荷の高いDBクエリを決して実行しないでください。getEloquentQuery()またはcomputedプロパティを使用してください。
3. 権限を決してハードコードしないでください。Filament Policiesと統合したSpatie/Laravel-Permissionを使用してください。
4. Filament Preloadingを決して無視しないでください。プリロードされていない大きなフォームは動作が遅く感じられます。

---

🛠️ トラブルシューティングとUXの最適化

問題	考えられる原因	2026年の適切な対処法
テーブルの動作が遅い	大規模なデータセットの過剰なハイドレーション	Table::$isStriped = falseを有効にし、deferred読み込みを使用します。
リッチエディターの遅延	カスタムTipTapブロックが多すぎる	Dynamic Importsを使用して、負荷の高いTipTap拡張機能を遅延読み込みします。
フォーム状態のずれ	Livewire/Alpine間の同期遅延	live修飾子付きのentangle()は必要最小限に使用します。
モバイルレイアウトの崩れ	複雑なBento Gridがレスポンシブでない	FilamentネイティブのGrid::make(['default' => 1, 'lg' => 3])を使用します。

---

📚 リファレンスライブラリ

• TALLスタックの習得： Filamentを支えるエンジンです。
• 高度なフォームとテーブル： 基本的なCRUDを超えた内容です。
• パネルアーキテクチャ： マルチパネルとマルチテナンシーの構成です。

---

📊 品質指標

• フォーム送信のレイテンシ： < 200ms。
• テーブルの描画時間： 50行で< 50ms（Filament v4の速度）。
• A11yスコア： 100％（WCAG 2.2準拠）。

---

🔄 v2からv4への進化

• v3： フォームとテーブルのビルダーを分離し、UIを改善し、アクションシステムを刷新しました。
• v4： カスタムソース、ネストされたリソース、デフォルトのTipTap、状態管理のためのJSヘルパーに対応しました。

---

Filament Pro Standardの終わり（v1.1.0）