Fluent UI が 2 種類あってややこしいので整理してみる
はじめに
Fluent UI は Microsoft が開発している React 向けの UI フレームワークです。Microsoft 365 に統合された UI を表現できるため、Microsoft 365 開発には必須のフレームワークです。Fluent UI と名前の付くフレームワークが 2 種類あり、混乱のもとになっているため、ここで整理します。英語が苦にならない方は公式の wiki をご覧いただくことをおすすめします。
フレームワークの違い
@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 開発を始めると、まったく互換性がないため、混乱することがあります。名前からしてもテーマが違うだけだと思ってしまいがちですが、どちらも学習する必要があります。早く統合されることを期待していますが、今後に期待したいです。
Discussion