BlazorでのWebアプリケーション開発手法１【C#】B14_任意のパラメータにする

これまでのレクチャーで、計測画面（MeasurePage）を開くための URL を、パラメータなし・1個・2個・3個という4つのバリエーションで用意しました。@page ディレクティブは複数書くことができるため、この4パターンを並べておくことで、どの個数のパラメータで呼ばれても対応できる状態になっています。

図1　4つの @page ディレクティブ（0個・1個・2個・3個のパラメータパターン）

@page “/measure”
@page “/measure/{MeasureArea}”
@page “/measure/{MeasureValue}/{MeasureArea}”
@page “/measure/{MeasureValue}/{MeasureDate}/{MeasureArea}”

Home 画面にはこれらの URL パターンに対応するリンクとボタンが並んでおり、サイドメニューの「計測」からはパラメータ0個の URL（/measure）で計測画面が開きます。

図2　Home画面。サイドメニュー「計測」と、引数1〜3個へのリンク・ボタン

パターンが足りないとどうなるか

ここで試しに、パラメータ0個のパターン（1行目の @page “/measure”）をコメントアウトしてみます。Razor構文のコメントは @* … *@ で囲む形になり、対象行を選択してコメントアウト用のボタン（またはショートカット）を押すと自動的にこの形に変換されます。

図3　1行目の @page “/measure” をコメントアウト

この状態で実行すると、パラメータ1個・2個・3個の URL は問題なく開きますが、サイドメニューの「計測」（パラメータ0個の /measure）を押すと Error: 404 になってしまいます。

図4　パラメータ0個の /measure にアクセスすると404エラー

サイドメニューから呼ばれる可能性がある以上、パラメータ0個の URL も必要なわけで、呼ばれる可能性のある URL パターンはすべて用意しておく必要があります。ただし、それとは別に「パラメータを任意にする」という書き方もできます。

プロパティ名の後ろに ? をつけて任意にする

試しに、パラメータ2個・3個のパターンをコメントアウトし、パラメータ0個と1個の2パターンだけが有効な状態にして確認してみます。1個パターンの @page ディレクティブの、プロパティ名（MeasureArea）の直後に ?（クエスチョンマーク）を付けます。

図5　{MeasureArea} の後ろに ? を追加して {MeasureArea?} にする

@page "/measure/{MeasureArea?}"

? を付けると、そのパラメータは任意（あってもなくてもよい）という扱いになります。これにより、この1行だけでパラメータ0個でも1個でも呼び出せるようになります。実際に /measure/宇都宮 のように1個渡すと「宇都宮」が計測場所に正しく表示され、

図6　/measure/宇都宮 でアクセスすると計測場所に「宇都宮」と表示される

パラメータなしの /measure でアクセスした場合も、エラーにならず計測場所が空欄の状態で開きます。

図7　/measure （パラメータなし）でも正しく開き、計測場所は空欄になる

3つのパラメータすべてを任意にした場合

同じ要領で、一番パラメータの多い3個パターンの @page ディレクティブも、MeasureValue・MeasureDate・MeasureArea の3つすべてに ? を付けてみます。

図8　3個パラメータ版の全プロパティに ? を追加

@page "/measure/{MeasureValue?}/{MeasureDate?}/{MeasureArea?}"

これで1行だけで、パラメータが0個でも1個でも2個でも3個でも呼び出せることになります。実際に試してみると、パラメータ0個（/measure）はきちんと動作します。

図9　全項目を任意にした状態でパラメータ0個でも正しく動作

ところが、パラメータ1個（/measure/宇都宮）で試すと、「宇都宮」は本来計測場所に入ってほしいのに、計測値の欄に表示されてしまいます。

図10　パラメータ1個で呼ぶと「宇都宮」が計測値に入ってしまい、意図した動きにならない

パラメータ2個（計測値と計測場所のつもりで /measure/123.45 m/s/立川 のように呼ぶ）の場合も、「立川」が計測日時の欄に入ってしまい、これも思っていた動きとは違います。

図11　パラメータ2個で呼ぶと「立川」が計測日時に入ってしまう

これは、任意パラメータが URL の並び順（先頭から MeasureValue → MeasureDate → MeasureArea の順）でそのまま埋まっていくためです。1個だけ指定した場合は、その1個目が MeasureValue に入り、こちらが渡したかった MeasureArea には入りません。2個の場合も同様に、先頭から MeasureValue・MeasureDate の位置に入ってしまいます。逆に、3個すべて指定した場合は、順番どおりに MeasureValue・MeasureDate・MeasureArea に入るため正しく動作します。

図12　パラメータ3個（順番どおり）で呼ぶと正しく表示される

つまり、この書き方が有効なのは、パラメータを渡す際の並び順が常に一定（1個の時は必ず MeasureValue、2個の時は必ず MeasureValue・MeasureDate…というように、常に先頭から順番に埋めていく呼び出し方をする）である場合に限られます。1個の時は MeasureArea だけを渡したい、2個の時は MeasureValue と MeasureArea を渡したい、というように渡し方の組み合わせが順番どおりにならない場合は、これまでどおりそれぞれの組み合わせに対応する @page ディレクティブを個別に用意する必要があります。

まとめ

最終的には、元の4パターン（0個・1個・2個・3個）の @page ディレクティブに戻し、任意パラメータ（?）の使い方を踏まえたうえで、必要な URL パターンを用意する形にしました。

図13　最終的な @page ディレクティブ（0個〜3個の4パターン）

@page "/measure"
@page "/measure/{MeasureArea}"
@page "/measure/{MeasureValue}/{MeasureArea}"
@page "/measure/{MeasureValue?}/{MeasureDate?}/{MeasureArea?}"

プロパティ名の後ろに ? を付けると、その URL パラメータを任意（省略可能）にできること、ただし複数のパラメータをまとめて任意にする場合は、渡す順番が常に先頭から一致している必要があることを押さえたうえで、呼ばれる可能性のある URL パターンをすべてカバーできるように組み立てるようにしてください。