Introducing Angular Material v17 - EmotionTechテックブログ

こんにちは！フロントエンドエンジニアの高橋 a.k.a 黄色い人（ @fusho_takahashi ）です。エモーションテック Advent Calendar 2023 7 日目を担当させていただきます！エモーションテックのAdvent Calendar に書くのは 3 回目なのですが、技術系の記事を書くのははじめてなので少々緊張しています笑

最近 v17 リリースに加えてロゴの変更など、話題に事欠かない Angular 。今回は弊社サービスで使っていて、私も大好きな公式ライブラリー Angular Material に焦点を絞って、v17 のアップデート内容をご紹介します。

公式リリースノート

theme の各値にアクセスするための新しいAPIを公開

今まで Angular Material の theme に設定されてる値を取ってくるのはわりと面倒だったのですが、このたび新たな API が公開されて簡単に取得できるようになりました。

オリジナルの component で Angular Material の theme に設定した color の情報を使用する場合、_my-button-theme.scss のような scss ファイルを作成して mixin を書き、style.scss で読み込ませる方法が一般的です。

mixin 内で theme color を取得する場合、v16 までは下記のような手順を踏んでいました。

// _my-button-theme.scss

@use 'sass:map';
@use '@angular/material' as mat;

@mixin color($theme) {
  // theme から色設定を取得
  $color-config: mat.get-color-config($theme);

  // 色設定から primary color の palette を取得
  $primary-palette: map.get($color-config, 'primary');

  .my-button {
    // primary color palette の 500 番の色を取得
    color: mat.get-color-from-palette($primary-palette, 500);
  }
}

これが v17 になると、この 1 行で取得可能です。

// _my-button-theme.scss

@use 'sass:map';
@use '@angular/material' as mat;

@mixin color($theme) {
  .my-button {
    // primary color palette の 500 番の色を取得
    color: mat.get-theme-color($theme, primary, 500);
  }
}

同様に下記の API が公開されています。

get-theme-version：theme のバージョン
get-theme-type：light theme か dark theme か
get-theme-color: theme の color
get-theme-typography：theme の typography
get-theme-density：theme の density
theme-has：上記の情報を持っているか確認

legacy component を削除

Angular Material は v15 で Material Design Components for Web（MDC）Base の component に一新されました。それに伴って以前の component は legacy 付きの名前に変更され、非推奨になっていました。

以前から v17 で削除されることがアナウンスされていましたが、予定通り削除されましたね。

が、まだ legacy component を使っている、マイグレートが間に合わなかったユーザーにもAngular は手を差し伸べてくれました。

なんと Angular 本体を v17 に update しても、Angular Material は update せず v16 のまま使えるようにしてくれたのです！なんとお優しい Angular …。

ng update @angular/material した際も、legacy component を使っている場所があったら v16 のままにしてくれます。（ @angular/cdk はちゃんと上がる）ただ Angular v18 以降、 Angular Material v16 とは互換性がなくなる予定です。あと半年…みんな、絶対に脱 legacy component しような！

ブロック構文対応

Angular の新たなブロック構文に早くも対応しました！これによって内部的に CommonModule を import しなくてよくなるので、バンドルサイズの減少が見込めます。ブロック構文は現在 developer preview 中なのでこちらの対応を知ったときは驚きましたが、バンドルサイズのメリットの方を取ったようですね。

そしてこれからの Angular Material

以上が Angular Material v17 のアップデート内容でした。今回は比較的少なめだったのですが、それには理由があります。Angular Material では現在新たな Material Design のバージョンである Material 3 への対応が進められており、そちらに開発が集中しているのです！こちらは主に Angular Material ではなく @angular/material-experimental のパッケージで対応が進められています。デザイントークンの導入等、現在の Angular Material よりもカスタマイズ性が向上するようです。これからもどんどん進化していく Angular Material が楽しみですね！それではまた！