ASP.NET Core Blazor WebAssembly - コンポーネントとルーティング (画面遷移)【フロントエンド開発入門者向け】

こんにちは！

本記事では、[ASP.NET Core Blazor ](https://docs.microsoft.com/ja-jp/aspnet/core/blazor/?view=aspnetcore-5.0)(以下 Blazor) のコンポーネントの基礎と画面遷移について解説します！



## コンポーネントとは

コンポーネントは、部品や構成要素という意味の単語ですが、

Blazor では、画面の構成部品としてコンポーネントを作成し、配置することで画面を構築します。

前回の記事では、レイアウトの構築について解説しましたが、

本記事では、前回構築したレイアウトに対して、コンポーネントの作成から定義するまでの流れについて解説します。

https://qiita.com/furugen/items/17f12f12b462f21fe0b5


## コンポーネントの作成手順

### ヘッダーのコンポーネントを作成

まずは、ヘッダーのコンポーネントを作成してみましょう。

コンポーネントを作成するために、Visual Studio で右クリック > 追加(D) > Razor コンポーネントを選択します。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/9496674e-0187-3339-bcc4-81655b760a30.png)


コンポーネントの名前を設定して、"追加(A)"をクリックします。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/ebed17df-9d16-4d89-ba19-eb0fdd859d40.png)


以上の手順でコンポーネントが作成されます。

下記は、デフォルトで作成されるコンポーネントのコードです。


#### HeaderComponent.razor

```html

<h3>HeaderComponent</h3>

@code {

}

```


### メニュー、フッターのコンポーネントも作成

他にもメニュー、フッターコンポーネントも作成します。

#### MenuComponent.razor

```html

<ul>
    <li>Top</li>
    <li>PageA</li>
    <li>PageB</li>
</ul>

@code {

}

```


#### FooterComponent.razor

```html

<h3>FooterComponent</h3>

@code {

}


```



## 作成したコンポーネントをレイアウトに設定

それでは、前回構築したレイアウトに、今回作成したコンポーネントを定義します。


### 変更前 (前回作成したレイアウト)


```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>


```


### 変更後 (本記事で作成したコンポーネントを配置)
```html

@inherits LayoutComponentBase

<div class="page">
    <!-- ヘッダー -->
    <header class="header">
         <!-- 作成したヘッダーコンポーネントを配置 -->
        <HeaderComponent></HeaderComponent>
    </header>


    <!-- サイドメニュー(左) -->
    <div class="menu">
         <!-- 作成したメニューコンポーネントを配置 -->
        <MenuComponent></MenuComponent>
    </div>

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

    <!-- フッター -->
    <footer class="footer">
         <!-- 作成したフッターコンポーネントを配置 -->
        <FooterComponent></FooterComponent>
    </footer>

</div>



```


## ルーティング (画面遷移)

次に、ルーティング (画面遷移)を実装していきます。

URL に応じたコンポーネントが、レイアウトで定義した @Body タグ の位置で表示されます。

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


### ルーティング (画面遷移) に対応したコンポーネントの作成方法について

ルーティング (画面遷移) に対応されたコンポーネントであっても、作成手順は、"コンポーネントの作成手順"で紹介して手順と同様ですが、

コンポーネントの作成後に、URL マッピングの定義を行います。

### URL マッピングを @page で設定

URL 対してマッピングは、@page タグで定義します。

例えば、下記のコードは、 "/" および "/Top" が指定された場合に表示するコードです。

@page は、単一、複数どちらも定義できます。

```html

@page "/"
@page "/Top"

<h3>TopPage</h3>

@code {

}

```

### ページ遷移方法について

次に、作成したコンポーネントを表示するためのリンクを設定します。

標準のHTMLタグでも定義することは出来ますが、本記事では、 Blazor が標準で提供している NavLink コンポーネントを使用します。


### NavLink を設定

本記事で作成したメニューコンポーネントに、以下のように NavLink を設定しましょう。


```html

<ul>
    <li>
        <NavLink href="./Top" Match="NavLinkMatch.Prefix">
            Top
        </NavLink>
    </li>
    <li>
        <NavLink href="./PageA" Match="NavLinkMatch.Prefix">
            PageA
        </NavLink>
    </li>
    <li>
        <NavLink href="./PageB" Match="NavLinkMatch.Prefix">
            PageB
        </NavLink>
    </li>
</ul>

@code {

}

```

href プロパティには、遷移先の URL を設定します。

また、Match プロパティを設定すると、現在表示中の URL に対して、CSS を設定出来ます。

デフォルトでは "active" クラスが付与されますので、下記のように "active" クラスを定義することでスタイルを設定出来ます。

```css

li .active {
    text-decoration : solid;
    font-weight : bold;
    text-decoration-line : underline;
}

```


> デフォルトで付与される "active" クラス名は、NavLink コンポーネントの ActiveClass プロパティを定義することにより、変更することもできます。
> 
[ActiveClass](https://docs.microsoft.com/ja-jp/dotnet/api/microsoft.aspnetcore.components.routing.navlink.activeclass?view=aspnetcore-5.0#Microsoft_AspNetCore_Components_Routing_NavLink_ActiveClass)




## 本記事で作成したアプリケーション

以上の手順をもって、画面遷移を実装したアプリケーションは下記となります。

![Blazor画面遷移.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/df07ef85-53a8-3e56-96b0-82df8c38fa00.gif)



## まとめ 

本記事では、Blazor アプリケーションのコンポーネントと画面遷移について解説しました。

次回の記事では、データバインディングに関する記事を執筆予定です。


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

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

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

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

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

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

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

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