.razor 内でディレクティブを書く順番 #Blazor

Blazor でコンポーネントを実装するには、普通は .razor ファイル、すなわち、Razor コンポーネントとしてソースコードを記述することでしょう。.razor ファイル内では、@page や @namespace、@using、@inject、@inherits、@implements、@attribute といったディレクティブを使用できます。基本的にこれらディレクティブは、書く順番に制約はありません。例えば次のように .razor ファイルを記述できます。

MyComponent.razor

@inject IFizz Fizz
@implements IDisposable
@using Foo
@page "/"
@inherits Bar
@namespace Buzz
@attribute [Authorize]
...

しかしながら、"書く順番に制約はない" とはいうものの、どのディレクティブから順に書いたら良いか、一定のガイドラインがあったほうが気持が楽になりませんか? 自分は気持が楽になります。ということで、自分は下記の順番でこれらディレクティブを記述するようにしています。

MyComponent.razor

@page "/"
@namespace Buzz
@using Foo
@attribute [Authorize]
@inherits Bar
@implements IDisposable
@inject IFizz Fizz
...

どうしてこの順序にしているか、というと、それは、".razor ファイルは、ある種の C# ソースコードである" との認識からです。つまり、Razor コンポーネントとは ComponentBase から派生したクラスであり、.razor ファイルは C# コードに変換されて最終的にアセンブリファイルにコンパイルされる、ということです。詳しくは下記投稿を参照ください。

そのため、上記ディレクティブを含むコードは、以下のような C# ソースコードに変換されます。

MyComponent.razor.g.cs

namespace Buzz
{
    using Foo;

    [Authorize]
    [Route("/")]
    public class MyComponent : Bar, IDisposable
    {
        [Inject]
        public IFizz Fizz { get; init; }
        ...

すなわち、

@namespace はファイル先頭の名前空間宣言 namespace となり、
@using は続く using となり、
@page は、コンポーネントクラスを修飾する Route 属性となり、
@attribute は指定された属性でコンポーネントクラスを修飾し、
@inherits と @implements はクラス宣言に並記され、
そして @inject は [Inject] 属性が付与されたプロパティ

になります。

このように、.razor ファイルが C# ソースコードに変換された後の、各ディレクティブに対応する箇所の出現順を再現するように、自分は .razor ファイル内でのディレクティブの出現順・記載順を決めています。

MyComponent.razor.g.cs

namespace Buzz   // ← @namespace Buzz
{
    using Foo;   // ← @using Foo

    [Authorize]  // ← @attribute [Authorize]
    [Route("/")] // ← @page "/"
    public class MyComponent : Bar, IDisposable // ← @inherits Bar, @inmplements IDisposable
    {
        [Inject]
        public IFizz Fizz { get; init; } // ← @inject IFizz Fizz
        ...

ただ、ひとつ例外があって、それは @page ディレクティブです。これだけは自分のこのやり方の中での例外扱いで、@page ディレクティブだけは常に、.razor の一番先頭行に記述するようにしています。これには理論だった理由はなく、自分の直感的にそのほうが心地よかったためです。

繰り返しになますが、基本的に .razor ファイル内での各ディレクティブの出現順・記載順には制約はありません。ですがそれ故に、記載順をどうしたらいいかモヤッとしていた方に、この自分のやり方が参考になれば幸いです。

Happy Coding! :)