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 はWeｂ標準である WebComponents であるため、ほとんどのフレームワークで動作します。
もちろんフレームワークなしでも動作します。
複数サービスがあり、異なったフレームワークやライブラリを使っているチームは汎用的なコンポーネントを FAST で作ってみても良いかもしれません。

Microsoft製UIライブラリ FAST について

特徴

FAST Components

FAST Element

最後に