いつ読むか?

  • Web Components のリファレンス実装として

読書メモ

Material Web Components (MWC) とは

  • Google が提供する Material Design 3 準拠の Web Components ライブラリ
  • Lit, React, Vue, Svelte など多くのフレームワークで動作
  • CSS カスタムプロパティによるデザイントークンで統一スタイリング

使いどころ

  • <button>, <input> などの標準要素を Material Design スタイルに置き換えたいとき
  • フレームワーク非依存で Material Design 3 を導入したいとき

重要な注意点(2024年6月〜)

MWC はメンテナンスモードに移行

  • Google 社内の Wiz フレームワーク対応に注力するため、開発が停止
  • Card, Navigation Drawer などの計画されていたコンポーネントは未実装のまま
  • 新規プロジェクトでの採用は要検討

代替手段

  • Angular Material: Angular チームがフォークして開発継続
  • Beer CSS: 軽量な Material Design 3 代替
  • コミュニティフォーク: 各種派生プロジェクト