angular

Angular エキスパート

Signals、Standalone Components、Zoneless アプリケーション、SSR／Hydration、最新のリアクティブパターンを活用して、モダンな Angular 開発を習得しましょう。

詳細ガイド

このスキルを実行する前に、詳細ガイドをお読みください。手順と参考資料の完全版が記載されています。安全性、前提条件、検証要件は必須事項として扱ってください。特定の作業では該当するセクションを、最初から最後まで作業する場合はガイド全体をお読みください。

このスキルを使用する場面

• 新しい Angular アプリケーションの構築（v20+）
• Signals ベースのリアクティブパターンの実装
• Standalone Components の作成と NgModules からの移行
• Zoneless Angular アプリケーションの設定
• SSR、プリレンダリング、ハイドレーションの実装
• Angular のパフォーマンス最適化
• モダンな Angular パターンとベストプラクティスの採用

このスキルを使用しない場面

• AngularJS（1.x）からの移行 → angular-migration スキルを使用
• アップグレードできないレガシー Angular アプリの作業
• 一般的な TypeScript の問題 → typescript-expert スキルを使用

安全性

• 本番環境に適用する前に、必ず開発環境で変更をテストしてください
• 既存アプリは段階的に移行してください（大規模な一括リファクタリングは避けてください）
• 移行中は後方互換性を維持してください

---

制限事項

• タスクが上記の範囲に明確に合致する場合に限り、このスキルを使用してください。
• 出力を、環境固有の検証、テスト、または専門家によるレビューの代わりとして扱わないでください。
• 必要な入力、権限、安全上の境界、または成功基準が不足している場合は、作業を中止して確認してください。

使用例の境界

例は断片的なものであり、ItemComponent、HeaderDirective、User、Product など、プロジェクトに必要なインポート、型、コンポーネントは省略されています。それらの実際の定義を用意してください。effect と toSignal には、インジェクションコンテキストまたは明示的なインジェクターが必要です。ルートガードはナビゲーションの UX を向上させますが、すべてのサーバーエンドポイントで認可を強制する必要があります。また、returnUrl が許可された内部ルートであることを検証してください。実際のフォームデータやアカウントデータをログに記録しないでください。

完全なコンポーネントでは、テンプレートのインポートと、意味のあるラベル／代替テキストを使用してください。画像のプレースホルダーは、実際にサポートされているデータ URL、または設定済みのローダーに置き換えてください。製品データの読み込みでは、キャンセルや古いレスポンスへの対処、エラー状態、繰り返し呼び出し時のライフサイクル方針が必要です。読み取り専用シグナルは、オブジェクトを深く凍結するものではありません。コンストラクターインジェクションと @Input は引き続きサポートされるパターンです。具体的な利点がある場合に移行してください。ユーザー間でデータが漏えいしないよう、SSR の状態／キャッシュプロバイダーはリクエストごとに設定してください。このガイドはコンパイルもブラウザーでのテストも行われていません。