BlazorでのWebアプリケーション開発手法１【C#】B01_新しいWebページを追加する方法

今回からは新しくプロジェクトを作り直して、Blazorの解説を進めていきます。まずは新しいプロジェクトを作成するところから始め、続けてこの回のテーマである「新しいWebページの追加方法」を解説します。

プロジェクトの新規作成

Visual Studioを起動し、「新しいプロジェクトの作成」を選択します。以前使用した「Blazor Web App」のテンプレートが「最近使用したプロジェクト テンプレート」に表示されていればそれを選択します。表示されていない場合は、テンプレートの検索欄で「Blazor」と入力して検索し、一覧から「Blazor Web App」を選択してください。

図1　「新しいプロジェクトの作成」画面。「Blazor Web App」テンプレートを選択する

「次へ」を押すと、プロジェクト名を入力する画面になります。名前は自由に付けてよいですが、今回は「Ander99」としました。保存先のフォルダーも任意の場所を選択し、「次へ」に進みます。

図2　プロジェクト名を入力する画面。今回は「Ander99」という名前にした

続けて「追加情報」画面が表示されます。フレームワークは「.NET 9.0」、Interactive render modeは「Server」、Interactivity locationは「Per page/component」になっていることを確認します。また「Include sample pages」にチェックが入っていることも確認しておきます。これらの設定を確認したら「作成」を押します。

図3　追加情報画面。フレームワークは.NET 9.0、Interactive render modeはServer、Interactivity locationはPer page/componentになっていることを確認する

プロジェクトが作成されたら、ソリューションエクスプローラーで構成を確認しておきます。まずは概要ページを閉じて、一度実行してみます。

図4　作成直後のソリューションエクスプローラー

実行すると「Hello, world!」の画面が表示されます。ここまで動作していれば準備は完了です。

図5　実行して表示された初期画面。「Hello, world!」と表示されていればOK

新しいページを追加する

ここからが本題です。今回は新しいWebページの追加方法を解説します。ページを追加する場所は「Components」フォルダー配下の「Pages」フォルダーです。今回は例として、何かを計測してその値を表示するような画面を作っていきます。

「Pages」フォルダーを右クリックし、「追加」から「Razorコンポーネント」を選択します。「新しい項目」メニューから同じように「Razorコンポーネント」を探して追加しても結果は同じです。基本的に、新しいWebページを作りたいときは「追加」から「Razorコンポーネント」を選ぶと覚えておいてください。

図6　「Pages」フォルダーを右クリックし、「追加」から「Razorコンポーネント」を選択する

図7　「新しい項目の追加」ダイアログ。「Razorコンポーネント」が選択された状態で表示される

名前の入力を求められるので、今回は計測用の画面ということで「MeasurePage」という名前にしました。語尾に「Page」と付けておくと、これがWebページであることが分かりやすくなります。ただし名前の付け方自体に厳密なルールがあるわけではなく、開発メンバー間で共有できていれば問題ありません。名前を入力したら「追加」を押します。

図8　Razorコンポーネントの名前を「MeasurePage」として追加する

これでソリューションエクスプローラーの「Pages」フォルダー配下に「MeasurePage.razor」が作成されます。作成された直後は、中身は見出しタグだけのシンプルな状態です。

図9　作成直後の「MeasurePage.razor」。中身は<h3>MeasurePage</h3>のみ

ここで、ページとして機能させるためにファイルの先頭にURLを指定する記述を追加します。1行目に @page “/measure” のようにダブルクォーテーションでパスを指定します。あわせて見出しの文字列も「計測画面」に書き換えておきます。

図10　1行目に @page “/measure” を追加し、見出しを「計測画面」に変更する

@page "/measure"

<h3>計測画面</h3>

@code {

}

この状態で実行してみます。ただし、この新しく作ったページはまだサイドメニューには追加していないため、メニューからは開けません。アドレスバーに直接URLを入力して確認します。今回のパスは「/measure」としたので、アプリのURLの末尾に「/measure」を付けてEnterキーを押します。

図11　デバッグ実行中の「MeasurePage.razor」。@page “/measure” と見出し「計測画面」の記述が確認できる

図12　アドレスバーの末尾に「/measure」を直接入力する

Enterキーを押すと、「計測画面」という見出しが表示された画面に遷移します。これで、今作成したページが「/measure」というURLで表示できることが確認できました。

図13　「/measure」にアクセスして「計測画面」が表示されたところ

新しいWebページの追加は、このように「Pages」フォルダーへ「Razorコンポーネント」を追加し、@pageディレクティブでURLを指定するという手順で行います。