11
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-08-04

FAST_top.png

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 で作ってみても良いかもしれません。

11
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?