トリセツに載ってないAngular CDK

4976 ワード
Angular AngularCDK AdventCalendar2020 Angular テキストリンク

この記事は Angular Advent Calendar 2020 の 6 日目の記事です。

はじめに

UI コンポーネントを作るときになにかと便利なCDK ですが、実は公式ドキュメントの項目にはないCDK が、GitHub 上には存在しているのです…！これらのCDK は他のものと同様にAngular Material の中で使われていますが、自分でUI ライブラリを作るなんて方にも便利な機能がありますので、紹介していきたいと思います！

トリセツに載ってないAngular CDK たち

coercion

coercion は強制という意味です。 coercion ディレクトリ下にはたった一行のmd ファイルが設置してあり

Utility functions for coercing @Inputs into specific types.

と書かれています。
つまり@Inputで入ってきた値を、コンポーネントが期待する型に強制的に変換する関数群が置いてあります。

ファイル名 変換後の型
array.ts 配列
boolean-property.ts boolean
css-pixel-value.ts 末尾に'px'をつけた文字列
element.ts ElementRef
number-property.ts number
string-array.ts 文字列の配列

Angular のv9 からより厳格にテンプレート型チェックを行うことのできるstrictTemplates フラグが導入されるなど、@Input の型チェックを厳しくすることはできますし、v11 からはng new したときにstrict mode にするかcli が聞いてきてくれたりするので今後みんながstrict mode で開発する世界がやってくるかもしれませんが、普通に型を強制したいときとかにも使えそうなので覚えておいて損はないと思います。

参考: Angular の strict mode とはなんなのか

こちらの関数がどのように動くのかは、test を見るととても分かりやすいので一度テストに目を通すのをオススメします！

accordion

アコーディオンはこういうやつですね。

こういったUI の開閉状態の管理をするのがaccordion です。主に Angular Material のExpansion Panel で使われています。
開閉状態だけでなく、開いたとき・閉じたときのイベントをOutput していたりするので、こういったUI でちょっと凝ったことをしようとしたとき便利そうです。

参考: Accordion Example

keycodes

一般的に使われるキーコードの定数が定義されています。 また、修飾キーが押されているかどうか分かる関数も含まれています。
キーコードの数字を入力するとき、ただ数字を書いておくだけだとなんのキーかわからないですし、いちいち定数を定義するのも面倒なので、もともとCDK を入れていたら使うしかないですね！

collections

SelectionModel というutility class を使って、ユーザーの選択状態の管理や参照を行います。
チェックボックスの選択状態を管理したりするのに便利で、Angular Material では list/selection-list等で使われています。

参考: Angular Material list examples

実はまだ奥がある！ 未来のCDK

angular/components のsrc下には、cdk の他にcdk-experimental というディレクトリがあります。このディレクトリ下はその名の通り実験的であったり開発中で、まだ本番環境に使うことは推奨されないけどいつかCDK に仲間入りするかもしれない機能たちです！この記事を書いている段階で存在する機能たちを軽く紹介します。（いくつか 説明のmd ファイルがなく、issue もうまく追えなくて雑なものもありますが後々追記しますたぶん）

ディレクトリ 機能
column-resize table column の横幅をドラッグ・アンド・ドロップで変更できる機能
combobox コンボボックス 参考
dialog ダイアログ 参考
listbox リストボックス 参考
menu WAIARIA に基づいたカスタムメニュー
popover-edit テーブルの項目の編集ができる機能
scrolling 高さの異なるList item をもつリストのバーチャルスクロール（現在はList item の高さを指定する必要がある）
selection テーブル の項目の選択状態を管理する

このexperimental を見ると、CDK はテーブルの機能拡充とWAIARIA の仕様に基づいたコンポーネントの作成支援に目が向いている…？ような気がしてきます。

終わりに

今回は公式ドキュメントには載っていないAngular CDK 情報をご紹介させていただきました。公式ドキュメントにとどまらず、フレームワークやライブラリのソースコードを読んでみると新たな発見があるかもしれませんね！

明日は@MasanobuAkiba さんです。よろしくお願いします！