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

こんにちは！

テクニカルコンサルティングチームの古堅です。

本記事では、ASP.NET Core Blazor (以下 Blazor) のレイアウト機能について解説します！

レイアウトについて

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

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

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

docs.microsoft.com

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

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

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

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

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

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

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

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

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

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

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

SampleLayout.blazor

@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

.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 を継承する必要があります。

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

@inherits LayoutComponentBase

@Body

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

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

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

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

docs.microsoft.com

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

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

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

<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に関する検討の進め方が分からない。外部のデザイン会社に頼むと、開発が難しくなるのではないか、危惧している。」

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

お問い合せはこちらからお気軽にご相談ください。