ASP.NET Core Blazor WebAssembly - レイアウトの構築【フロントエンド開発入門者向け】

こんにちは！

本記事では、[ASP.NET Core Blazor ](https://docs.microsoft.com/ja-jp/aspnet/core/blazor/?view=aspnetcore-5.0)(以下 Blazor) のレイアウト機能について解説します！

<!-- more -->




## レイアウトについて

Blazor のレイアウト機能により、画面を構成する領域を自由に定義することが出来ます。

また、ページ全体を再読み込みするのではなく、一部分だけを読み込み・更新する領域についても、レイアウト機能で定義します。

SPA (Single Page Application) を構築する上で、欠かせない機能なのでしっかりと理解しましょう。

[公式ドキュメント : ASP.NET Core Blazor レイアウト](https://docs.microsoft.com/ja-jp/aspnet/core/blazor/layouts?view=aspnetcore-5.0)


### レイアウト例 : ヘッダー、ボディ、フッター

例えば、上から、ヘッダー、ボディ、フッターと並べられるレイアウト。

トップページ、ライティングページでよく採用されるレイアウトです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/4330de55-7d88-4d91-42ed-65dfc8d75c7a.png)


### レイアウト例 : 左にサイドメニュー

例えば、左側にメニューが設けられるレイアウト。

メニュー内で選択された項目に応じて、コンテンツを表示するレイアウトです。

最近のアプリケーションで、よく採用されるレイアウトかと思います。

例えば、Microsoft Teams などは、このレイアウトを採用していますね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/6ac4959b-cafb-d311-662b-aa0c32a51f10.png)



## レイアウトのサンプルコード

本記事では、ヘッダー、ボディ、フッター、そして左にサイドメニューがあるレイアウトを Blazor で実現してみました。

サンプルコードを元に解説します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/e96339fa-2e12-b45f-2ef9-af6ceb04da21.png)



### SampleLayout.blazor

```html
@inherits LayoutComponentBase

<div class="page">
    <!-- ヘッダー -->
    <header class="header">
        <h3>ヘッダー - Blazorレイアウトサンプル</h3>
    </header>


    <!-- サイドメニュー(左) -->
    <div class="menu">
        <ul>
            <li>Menu 1</li>
            <li>Menu 2</li>
            <li>Menu 3</li>
        </ul>
    </div>

    <!-- コンテンツ -->
    <div class="content">
        @Body
    </div>

    <!-- フッター -->
    <footer class="footer">
       フッター
    </footer>

</div>


@code {

}


```

### SampleLayout.blazor.css

```css
.page {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: 60px 1fr 26px;
    grid-template-areas : 
        "header header"
        "menu   content"
        "footer footer"
    ;
}

.header {
    grid-area: header;
    background-color: orange;
}

.menu {
    grid-area: menu;
    background-color: lightgreen;
}

.content {
    grid-area: content;
    background-color: whitesmoke;
}

.footer {
    grid-area: footer;
    background-color: skyblue;
}

```


### HTML + CSS の基礎知識が必要

上記サンプルコードから分かるように、レイアウトの構築には、HTML + CSS の知識が必要となります。

本記事ではBlazor 固有の機能について解説していきます。


## Blazor のレイアウト固有機能

#### @inherits LayoutComponentBase

Blazor のレイアウト機能を利用するためには、LayoutComponentBase を継承する必要があります。

レイアウト機能を実装する場合は、忘れずに定義しましょう。

```cs
@inherits LayoutComponentBase

```


#### @Body

メインコンテンツを表示する領域には、@Body を配置します。

@Body には、例えば、メニューから "画面1" や "画面2" をクリックした際に、それぞれの画面コンテンツが表示されます。

この動きは、ルーティング機能により実装します。

Blazor はルーティング機能により、画面の一部領域のみ描画を更新することが出来ます。

[公式ドキュメント : ASP.NET Core Blazor のルーティング](https://docs.microsoft.com/ja-jp/aspnet/core/blazor/fundamentals/routing?view=aspnetcore-5.0)


#### 作成したレイアウトを App.razor で定義

作成したレイアウトは、App.razor にて定義しましょう。

アプリケーションの起動時に、App.razor に定義したレイアウトが表示されるようになります。

```xml

<Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(SampleLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(SampleLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

```


## まとめ 

本記事では、Blazor アプリケーションのレイアウトについて解説しました。

次回の記事では、画面遷移 (ルーティング) 、コンポーネントについての解説記事の執筆を予定しています。


## 開発全般に関するご相談はお任せください！

インフラジスティックス・ジャパンでは、各プラットフォームの特別技術トレーニングの提供や、開発全般のご支援を行っています。

「古い技術やサポート終了のプラットフォームから脱却する必要があるが、その移行先のプラットフォームやフレームワークの検討が進まない、知見がない。」

「新しい開発テクノロジーを採用したいが、自社内にエキスパートがいない。日本語リソースも少ないし、開発を進められるか不安。」

「自社のメンバーで開発を進めたいが、これまで開発フェーズを外部ベンダーに頼ってきたため、ツールや技術に対する理解が乏しい。」

「UIを刷新したい。UIデザインやUI/UXに関する検討の進め方が分からない。外部のデザイン会社に頼むと、開発が難しくなるのではないか、危惧している。」

といったご相談を承っています。

お問い合せは[こちら](https://jp.infragistics.com/about-us/contact-us#contactform)からお気軽にご相談ください。