💻

Fluent UI が 2 種類あってややこしいので整理してみる

2022/08/21に公開

SharePoint

Microsoft Teams

Fluent UI

tech

はじめに

Fluent UI はマイクロソフトが開発している React 向けの UI フレームワークです。Microsoft 365 に統合された UI を表現できるため、Microsoft 365 開発には必須のフレームワークなのですが、残念なことに Fluent UI と名前の付くフレームワークが 2 種類あり、混乱のもとになっているため、ここで整理してみたいと思います。なお、英語が苦にならない方は公式の wki を見ていただいた方がよいかと思います。

フレームワークの違い

@fluentui/react

もともとは Office UI Fabric と呼ばれていたもので、適用される範囲が Office だけじゃないよね、ということで名称変更されました。office-ui-fabric-react と @fluentui/react は同じものですが、次のメジャーバージョン (バージョン 8) からは @fluentui/react のみ提供されることが計画されています。Office アプリがこれをもとに実装されており、SharePoint Framework でアプリを作成するときに使用します。

@fluentui/react-northstar

もともとは Stardust と呼ばれていたもので、@fluentui/react とはまったく別に生み出されており、互換性はありません。Microsoft Teams がこれをもとに実装されており、Teams アプリを作成するときに使用します。

フレームワークの将来

2 つのフレームワークは将来的には統合されることが計画されています。とはいえ、@fluentui/react も @fluentui/react-northstar もサポートが終了するということはありません。SharePoint Framework でアプリを作るときは @fluentui/react を使いますし、Teams アプリを作るときには @fluentui/react-northstar を使えばいいです。それ以外の一般的な Web サイトで使いたい場合は総合的に判断して決定するということになります。

おわりに

SharePoint Framework 開発をやってて Microsoft Teams 開発をやるとまったく互換性がないので頭を抱える、あると思います。名前からしてもテーマが違うだけだと思ってしまいますもの。どちらも学習しなければいけないのはコストが高いので早いところ統合してほしいですね。無理そうだけど。