mcpField
A
angular-material

angular-material

github.com/oguzhan18デザイン・UI7233 回インストール30 週間前に更新
リポジトリ

angular-material について

Angular の画面を構築する開発者向けに、Angular Material と Angular CDK を扱うスキルです。最近の API 変更に加え、スタンドアロンコンポーネント、テーマ、アクセシビリティ、パフォーマンスの実践指針をまとめています。

主な機能

  1. 01Angular Material と CDK の最近の API 変更
  2. 02スタンドアロンコンポーネントの利用
  3. 03カスタムコンポーネント向け CDK の動作機能
  4. 04大規模リスト向けの仮想スクロール
  5. 05テーマとアクセシビリティの指針

活用シーン

  1. 01Angular Material の最近の API 変更の確認
  2. 02CDK の動作機能を使ったカスタムコンポーネントの構築
  3. 03大規模リストの描画改善
  4. 04テーマとアクセシビリティの実践

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-material

インストール後、Claude Code で/angular-materialを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/discussions/
_INDEX.md
references/docs/
_INDEX.md
references/issues/
_INDEX.md
references/releases/
_INDEX.md

詳細

@angular/material & @angular/cdk

Version: 21.0.3 (Feb 2026) Tags: Material Design、CDK、コンポーネント、UI ライブラリ

References: ドキュメント — コンポーネント、ガイド • CDK ドキュメント • GitHub の Issue • 変更履歴

API の変更

このセクションでは、最近のバージョン固有の API の変更について説明します。

  • NEW: Angular Aria — スタイルを自由に設定できる、アクセシブルでヘッドレスなコンポーネント向けの新しい低レベルコンポーネントライブラリ source

  • NEW: CDK のオーバーレイでブラウザー組み込みのポップオーバーを使用し、アクセシビリティを向上 source

  • NEW: Material Design システムトークン — ユーティリティクラスを使って、テンプレートに Material トークンを直接適用 source

  • NEW: CDK Drag & Drop の改善 — リスト間でアイテムをコピー可能に source

  • NEW: Angular v21 — ゾーンレスの変更検知など、新しい Angular 機能を全面的にサポート

ベストプラクティス

  • スタンドアロンコンポーネントを使用する — NgModule を使わずに Material コンポーネントを直接インポートします
import { Component } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';

@Component({
  standalone: true,
  imports: [MatButtonModule, MatCardModule],
  // ...
})
export class ExampleComponent {}

  • カスタムコンポーネントには CDK を使用する — Material のスタイル設定なしで、ドラッグ＆ドロップ、オーバーレイ、メニューなどの動作プリミティブに CDK（Component Dev Kit）を使用します

  • 大規模なリストには CDK Virtual Scroll を使用する — すべてのアイテムをレンダリングする代わりに、cdkVirtualScrollViewport を使用してパフォーマンスを向上させます

<cdk-virtual-scroll-viewport itemSize="50" class="viewport">
  <div *cdkVirtualFor="let item of items">{{item.name}}</div>
</cdk-virtual-scroll-viewport>

  • ngFor で trackBy を使用する — 不要な DOM の再レンダリングを防ぎます

  • SCSS でテーマをカスタマイズする — Material のテーマ設定システムを使って、色やタイポグラフィをカスタマイズします

  • ChangeDetectionStrategy.OnPush を使用する — デフォルトの変更検知戦略でパフォーマンスを向上させます

  • アクセシビリティガイドラインに従う — CDK コンポーネントが提供する ARIA ラベル、キーボード操作、フォーカス管理を使用します

コメント

Markdown 対応