Microsoft製のUIライブラリ FAST
の紹介
特徴
FAST
は2つのデザインシステムがあります。
FAST Components
FAST Element
また、Web標準であるWebComponentsを使用しているため、ReactやVue.jsなどの様々なUIフレームワークで使用できます。
FAST Components
FAST Components
はWebComponentsのUIライブラリです。
導入に関しては、他のUIライブラリと比べて大差はないように思います。
スタイルのカスタマイズなどに関しては少し癖がありそうです。
import { customElement } from "@microsoft/fast-element";
import { Button, ButtonTemplate as template } from "@microsoft/fast-foundation";
import { ButtonStyles as styles } from "./button.styles";
@customElement({
name: "fast-button",
template,
styles,
shadowOptions: {
delegatesFocus: true
}
})
export class FASTButton extends Button {}
また、UIデザインはMicrosoftが提唱する Fluent Design System を表現しているようです。
FAST Element
FAST Element
は 軽量で、メモリ効率の高いWebComponentsです。
下記、スタイルを含めた CustomElement
の例として、 <MyButton>
を実装してみました。
import { html, css, customElement, observable, FASTElement } from "@microsoft/fast-element";
const template = html<MyButton>`
<button @click="${() => { alert("Hi") }}">
${({ text }) => text}
</button>
`;
const styles = css`
button {
width: 240px;
height: 180px;
background-color: skyblue;
color: white;
}
`;
@customElement({
name: "my-button",
template,
styles,
})
export class MyButton extends FASTElement {
@observable text: string = "My Button";
}
また、 webcomponents.dev
でも FAST Element
のサンプルが用意されているので、
すぐにかんたんに試してみたい方はこちらです。
最後に
サービスによってUIライブラリはどれを使うか、または使わないかは悩みどころの一つになります。
冒頭でも述べたように FAST
はWeb標準である WebComponents
であるため、ほとんどのフレームワークで動作します。
もちろんフレームワークなしでも動作します。
複数サービスがあり、異なったフレームワークやライブラリを使っているチームは汎用的なコンポーネントを FAST
で作ってみても良いかもしれません。