pageディレクティブとは？Blazorでのルーティングの基本｜ASP.NET×Blazor入門 5.1

5.1 @pageディレクティブの意味

Blazorのコンポーネントには、@page という特別なディレクティブを使ってURLとの紐づけを行うことができます。一見すると単なる“ルーティング用のマーク”のように見えますが、実はこの一行こそが、Blazorにとっての「画面」の定義そのものなのです。

たとえば、以下のようなコードを見てみましょう。

@page "/hello"

<h3>Hello, Blazor!</h3>

このコンポーネントは、アプリのURLが /hello だったときに表示される画面を定義しています。言い換えると、URL = コンポーネントという構造がBlazorのルーティングの基本ルールです。

Blazorはアプリの起動時に、すべての@pageディレクティブをスキャンしてURLパターンを収集します。その後、実際のURLと照合して、最も一致するパターンを持つコンポーネントを表示します。

ここで重要なのは、URLの解釈は正確に文字列マッチで行われるということ。 @page "/hello" という定義がある場合、/Hello や /hello/ などは別物として扱われます。

実は1つのコンポーネントに複数の@pageディレクティブを持たせることもできます。たとえばこんな書き方も可能です。

@page "/hello"
@page "/greetings"

<h3>こんにちは！</h3>

この場合、/helloと/greetingsのどちらにアクセスしても、同じコンポーネントが表示されます。リダイレクトを行うほどでもない軽微な別名を扱いたい場合などに便利です。

@pageを付けることでそのコンポーネントが「ページ」として振る舞うようになりますが、逆に言えば@pageが付いていない限り、そのコンポーネントは画面遷移の対象にはなりません。

つまり、Blazorでは画面としてアクセスできるコンポーネントと、再利用されるUI部品としてのコンポーネントが、 @pageの有無で明確に区別されているのです。

次のセクションでは、このルーティングの仕組みに「パラメータ」を加えて、より柔軟な画面定義を行う方法について見ていきましょう。 → 5.2 パラメータ付きルーティング

2025-04-21

開発に関するインプットをアウトプットしています。

システム開発や技術検証、要件定義の作成、アーキテクチャ設計、テスト設計、運用設計まで、一気通貫で支援しています。企画段階の「まず相談したい」レベルから、実装・運用まで幅広く対応できますので、お気軽にお問い合わせください。