BlazorでのWebアプリケーション開発手法１【C#】A05_サンプルプログラムの構成

前回のレクチャーでは、Blazor Serverアプリの新規作成とプロジェクトの起動までを確認した。今回はその続きとして、起動したサンプルアプリの画面構成と、それに対応するプロジェクトのコード構成を確認していく。

サンプルアプリの画面構成

アプリを起動すると、次のようなサンプル画面が表示される。左側にはナビゲーションメニューが配置されており、そこから3つの画面に切り替えることができる。

図1　起動直後のHome画面（Hello, world!）

1つ目はメインとなるHome画面（Hello, world!）、2つ目はCounter画面である。Counter画面は「Click me」ボタンをクリックするとカウントが増えていくだけの単純な画面だが、ボタンの配置方法・クリックイベントの実装・画面の更新方法を確認するのに適したサンプルであり、後のレクチャーで改めて詳しく取り上げる。

図2　Counter画面。ボタンをクリックするとカウントが加算される

3つ目のWeather画面は、天気データを一覧表示するページである。一覧形式でデータを表示したい場合の実装例として参考になる画面である。

図3　Weather画面。データの一覧表示のサンプルとなっている

プロジェクトのフォルダ構成

続いてプログラムコード側の構成を確認する。ソリューションエクスプローラーを見ると、プロジェクトの中に Components フォルダがあり、その中に Layout フォルダと Pages フォルダが存在する。

図4　Components配下にLayoutとPagesが存在する

Pages フォルダの中には、先ほど確認した Counter.razor と Home.razor（メインページ）に加えて、一覧表示を行う Weather.razor、そしてエラー画面用の Error.razor が格納されている。

図5　Pagesフォルダの中身（Counter／Error／Home／Weather）

MainLayoutとNavMenuの役割

一方の Layout フォルダには MainLayout.razor と NavMenu.razor が格納されている。NavMenu.razor は、画面左側に表示されているナビゲーションメニューそのものを構成しているファイルである。

図6　Layoutフォルダの中身（MainLayout.razor／NavMenu.razor）

MainLayout.razor はアプリ全体のレイアウトを定義しているファイルで、サイドバーに NavMenu を配置し、メイン領域に About リンクとページ本体（@Body）を表示するという構成になっている。実際のコードは次のとおりである。

図7　MainLayout.razorのコード

@inherits LayoutComponentBase
 
<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>
 
    <main>
        <div class="top-row px-4">
            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
        </div>
 
        <article class="content px-4">
            @Body
        </article>
    </main>
</div>

サイドバーの中に <NavMenu /> が置かれ、メイン領域の上部に About リンクが、その下の <article> 内に @Body（各ページの内容）が展開される、という役割分担になっていることがわかる。

Aboutリンクのカスタマイズ

この構成を確認する例として、About リンクの遷移先を書き換えてみる。href の値を Microsoft のドキュメントURLから、任意のURL（ここでは筆者のサイトのURL）に変更する。

<!-- 変更前 -->
<a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
 
<!-- 変更後 -->
<a href="https://peacockanderson.com" target="_blank">About</a>

図8　hrefの値を変更してビルドする

この状態でアプリを実行し、About リンクをクリックすると、変更後のURLへ画面遷移することが確認できる。

図9　About押下で変更後のURLに遷移した結果

まとめ

このように、アプリ全体に共通するレイアウト部分（MainLayout.razor・NavMenu.razor）と、各画面固有のプログラム（Pages フォルダ配下の各 .razor ファイル）とが明確に分かれているのが Blazor プロジェクトの基本構成である。次回以降のレクチャーでは、この Pages フォルダ配下の各ページを実際に紐解きながら、画面の作り方を一つずつ確認していく。