2024: FluentUI Blazor のウェブアプリを作成 (ASP.NET Core / .Net 8.0 対象）

## Fluent Blazor テンプレートのインストール
1. PowerShellで下記のコマンドを実行：
```
> dotnet new install Microsoft.FluentUI.AspNetCore.Templates
次のパッケージがインストールされます:
   Microsoft.FluentUI.AspNetCore.Templates

成功: Microsoft.FluentUI.AspNetCore.Templates::4.3.1により次のテンプレートがインストールされました。
テンプレート名                                   短い名前          言語  タグ
-----------------------------------------------  ----------------  ----  ---------------------------------
Fluent Blazor Web アプリ                         fluentblazor      [C#]  Web/Fluent/Blazor/WebAssembly
Fluent Blazor WebAssembly スタンドアロン アプリ  fluentblazorwasm  [C#]  Web/Fluent/Blazor/WebAssembly/PWA

>
```
## テンプレートの FluentUI Blazor プロジェクトの新規作成
2. Visual Studio 2022を開いて
3. プロジェクトの新規作成を押下
![project_create.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/ddb0a302-c56c-e48b-e5e2-17b37d34583d.png)
4. Fluent Blazorのウエブアプリテンプレートを選択
5. 「次」を押下
![fluent_create_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/1847cf85-8303-465b-ce2c-fad7657e3b90.png)
6. プロジェクト名を入力
7. 「次」を押下
![fbb_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/e295b9ad-2cac-c82f-9362-870f7f442a85.png)
8. 「作成」を押下
![fluent_create_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/7d64dc7d-4cf3-f569-ba6c-6b7dcd47a26c.png)

## デフォルトのアプリの作り直し
![fbb_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/22d2b398-b9c9-4f58-1fbc-ec0719b45059.png)

デフォルトのアプリは [Fluent UI](https://www.fluentui-blazor.net/) を使用していますが、アプリケーションの基本的のレイアウトを定義するために [Layout](https://www.fluentui-blazor.net/Layout) の代わりに [MainLayout](https://www.fluentui-blazor.net/MainLayout) を使用したいと考えました。
### MainLayout.razor
まず `Components/Layout/MainLayout.razor` の内容を書き換えましょう。
#### ビフォアー
```
@inherits LayoutComponentBase
<FluentLayout>
    <FluentHeader>
        FluentBlazorBasic
    </FluentHeader>
    <FluentStack Class="main" Orientation="Orientation.Horizontal" Width="100%">
        <NavMenu />
        <FluentBodyContent>
            <div class="content">
                @Body
            </div>
        </FluentBodyContent>
    </FluentStack>
    <FluentFooter>
        <div class="link1">
            <a href="https://www.fluentui-blazor.net" target="_blank">Documentation and demos</a>
        </div>
        <div class="link2">
            <a href="https://learn.microsoft.com/en-us/aspnet/core/blazor" target="_blank">About Blazor</a>
        </div>
    </FluentFooter>
</FluentLayout>

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>

```
#### アフター
```
@inherits LayoutComponentBase

<FluentLayout>
    <FluentMainLayout Class="main">
        <Header>
            FluentBlazorBasic
        </Header>
        <Body>
            @Body
        </Body>
        <NavMenuContent>
            <NavMenu />
        </NavMenuContent>
    </FluentMainLayout>
    <FluentFooter>
        <div class="link1">
            <a href="https://www.fluentui-blazor.net" target="_blank">Documentation and demos</a>
        </div>
        <div class="link2">
            <a href="https://learn.microsoft.com/en-us/aspnet/core/blazor" target="_blank">About Blazor</a>
        </div>
    </FluentFooter>
</FluentLayout>

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>
```
#### まとめ
1. [`FluentLayout`](https://www.fluentui-blazor.net/Layout) に [`FluentMainLayout`](https://www.fluentui-blazor.net/MainLayout) を挿入
2. [`FluentHeader`](https://www.fluentui-blazor.net/Header) を [`FluentMainLayout`](https://www.fluentui-blazor.net/MainLayout) の中での `Header` に置き換え
3. 「main」のスタック（[`FluentStack`](https://www.fluentui-blazor.net/Stack)）を 2 つに分割:
    3.1. [`FluentBodyContent`](https://www.fluentui-blazor.net/BodyContent) とそのコンテンツを **@Body** ディレクティブを含む単純な `Body` タグに変換
    3.2. `NavMenu` コンポーネントを `NavMenuContent` タグに配置します
4. [`FluentMainLayout`](https://www.fluentui-blazor.net/MainLayout) の中での `Footer` が存在してないので、[`FluentFooter`](https://www.fluentui-blazor.net/Footer) がそのまま
### NavMenu.razor
次に、変更に合わせて `Components/Layout/NavMenu.razor` の内容を書き換えましょう。
#### ビフォアー
```
@rendermode InteractiveServer

<div class="navmenu">
    <input type="checkbox" title="Menu expand/collapse toggle" id="navmenu-toggle" class="navmenu-icon" />
    <label for="navmenu-toggle" class="navmenu-icon"><FluentIcon Value="@(new Icons.Regular.Size20.Navigation())" Color="Color.Fill" /></label>
    <nav class="sitenav" aria-labelledby="main-menu" onclick="document.getElementById('navmenu-toggle').click();">
        <FluentNavMenu Id="main-menu" Collapsible="true" Width="250" Title="Navigation menu" @bind-Expanded="expanded">
            <FluentNavLink Href="/" Match="NavLinkMatch.All" Icon="@(new Icons.Regular.Size20.Home())" IconColor="Color.Accent">Home</FluentNavLink>
            <FluentNavLink Href="counter" Icon="@(new Icons.Regular.Size20.NumberSymbolSquare())" IconColor="Color.Accent">Counter</FluentNavLink>
            <FluentNavLink Href="weather" Icon="@(new Icons.Regular.Size20.WeatherPartlyCloudyDay())" IconColor="Color.Accent">Weather</FluentNavLink>
        </FluentNavMenu>
    </nav>
</div>

@code {
    private bool expanded = true;

}
```
#### アフター
```
<FluentNavMenu Id="main-menu" Title="Navigation menu">
    <FluentNavLink Href="/" Match="NavLinkMatch.All" Icon="@(new Icons.Regular.Size20.Home())" IconColor="Color.Accent">Home</FluentNavLink>
    <FluentNavLink Href="counter" Icon="@(new Icons.Regular.Size20.NumberSymbolSquare())" IconColor="Color.Accent">Counter</FluentNavLink>
    <FluentNavLink Href="weather" Icon="@(new Icons.Regular.Size20.WeatherPartlyCloudyDay())" IconColor="Color.Accent">Weather</FluentNavLink>
</FluentNavMenu>
```
#### まとめ
1. サイド・メニューの折りたたみはメイン・レイアウトによって管理されるため、[`FluentNavMenu`](https://www.fluentui-blazor.net/NavMenu) タグとそのコンテンツだけ必要です。
2. 不要になった `Collapsible` 属性を削除。
3. `Width` 属性も不要で残すと `Body` の内容のレイアウトが崩れる。
### スタイル
最後に、ページが利用可能な空間をすべて占めるように、次の `height` ルールを `wwwroot/app.css` の `body` スタイルのルールに追加
    
    height: 100vh;
### 結果
ご覧のとおり、マークアップは簡素化されたのに、書き換えの外観はデフォルトのアプリケーションの外観と同じです：
![fbb_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/ee9d8f4e-db3a-5bf9-a9b1-b24281748af4.png)

## 次のステップ
Fluent Blazor チュートリアルをもっとほしいですか? 私の Todo リストのチュートリアルをご覧ください　→　[2024: Microsoft のチュートリアルの Blazor Todo リスト アプリを Fluent UI に変換](https://qiita.com/Meister619/items/bd290564b9b4ce54b111)

## 参考
* [Fluent UI Blazor コンポネント ライブラリー](https://www.fluentui-blazor.net/)
* [Fluent UI Blazor](https://github.com/microsoft/fluentui-blazor) の GitHub レポジトリー