Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Fluent UI Blazor 5 (alpha)の紹介

Fluent UI Blazor 5 (alpha)の紹介

Fluent UI Blazor 5 (alpha)の紹介
.NETラボ 勉強会 2025年3月(LT成分多め)
https://dotnetlab.connpass.com/event/347207/

tomokusaba

March 22, 2025
Tweet

More Decks by tomokusaba

Other Decks in Programming

Transcript

  1. 今日の目的 • Fluent UI Blazor 5についての情報が出てきました。 • 今回はFluent UI Blazor

    4と5の差分に着目してどのような変 更点があるか、今後Fluent UI Blazor5にアップデートしていく 上でどのような課題があるかについてお話ししていきたいと思い ます。
  2. Fluent UI Blazorでの実装及び規約 • 基本的に製品を表すAccentColorを1色のみ指定できるのみ。 • 自動的に文字のコントラストを確保するデザイントークンが実装さ れている。 • 規約上、AccentColor以外はUIの階層構造を表すグレースケー

    ルのみの色。 • 例外的にシステムから、警告、エラーなどを表すセマンティックカ ラーをつけることができるとされているが説明文の添付の配慮が 求められている。
  3. Fluent UI Blazor 5移行の背景 • 現行のFluent UI Blazor 4のベースとなっているFastプロ ジェクトの再構築

    このため、現在使用しているFastがメンテされなくなった。 • https://github.com/microsoft/fast/issues/6955 • FastがメンテされないことでFluent UI Blazor側で修正不能 なバグの例:EditFormを使用したFluentNumberFieldで double型を使用したのに小数点を含む数値が入力できない。 https://github.com/microsoft/fluentui- blazor/issues/1175
  4. FlunetUI Web Components v3 • 最新のFluent UI Web コンポーネント 3/8現在

    v3.0.0-beta.83 • カスタマイズ可能 • パフォーマンス最適化 • コンポーネントをスリム化 • 最新のJavaScriptフレームワークで動作 • WCAG2.1 準拠 • コードでFluent Design Launguageの変更を常に把握 • W3C Webコンポーネント標準に基づいて構築
  5. Fluent UI Blazor 5 • FluentUI Web Components v3への対応 v2であったコンポーネントがすべてあるとは限らない

    • また、Fluent UI Blazor 4で独自対応していたコンポーネント も移植されているとは限らない • プロパティなどFluentUI Web Components v3準拠のため 変更多数 →ここが破壊的変更につながっている
  6. サポートについて • Fluent UI Blazor 4は2026年11月までのサポートを予定 ただし、新しい機能を2026年11月まで追加しつつけるという意 味ではない。 • Fluent

    UI Blazor 5がv4の代替として十分に成熟したと(コン トリビューターが)確信できるレベルに達した段階でメンテナンス モードに入ります。
  7. 移行について(Appearance) • ボタンの性質・・・実質的には色を示すプロパティの変更 v3 & v4 v5 Appearance.Neutual ButtonAppearance.Default Appearance.Accent

    ButtonAppearance.Primary Appearance.Lightwieght ButtonAppearance.Transparent Appearance.Outline ButtonAppearance.Outline Appearance.Stealth ButtonAppearance.Default Appearance.Filled ButtonAppearance.Default
  8. まとめ • Fluent UI Blazor 4から5への移行はかなり大きな変更が必 要。 • 現在稼働中のシステムのFluent UI

    Blazorの移行は慌てる必 要はない。 • 2026年11月までにノウハウを固めつつ移行計画を進めるのが よい。 • 新規プロジェクトに関しては最初からv5で計画するのが合理的。