C# におけるメソッドのように、HTML も切り離して呼び出す方法を御紹介いたします。
始めに
ASP.NET Core とは、C# と HTML の組み合わせでウェブアプリが作れるフレームワークです。
本稿では ASP.NET Core の中でも、「Razor ページ」という仕組みを取り上げます。
HTML はネストが深くなる！
以下が、Razor ページのトップページに当たる部分のコード（初期状態）です。
インデントが、すごい事になっていますね。
HTML はこういう物ではありますが、せっかく C# を組み込めるのであれば C# のメソッドのようにネストを切り離したくなりませんか？
というわけで、やってみましょう。
最もネストの深い <header> 内をメソッド化
まずは、最もインデントが下がっている<header>内をメソッド化します。
<header>内にあった HTML タグ部を、HeaderContainer()というメソッドに切り出しました。
まずは、メソッド側から見て行きましょう。
@functions
ASP.NET Core では、 ディレクティブ（@{}）という機能でコードを生成します。
functionsキーワードのない@のみのディレクティブでも生成できますが、その場合はドキュメントタグ<summary>が無効となります。
async Task
タグヘルパーを含むコードをメソッド化する場合、必ず非同期処理（async）でTask型を返す必要があります。
<header>部では、asp-で始まる属性がタグヘルパーです。
await
呼び出し元では、非同期処理メソッドを呼び出すためにawaitキーワードを使用しています。
続けて <footer> 内もメソッド化
最も深いネストは前項で解消しましたが、せっかくなので<footer>部もメソッド化します。
<footer>内にあった HTML タグ部を、FooterContainer()というメソッドに切り出しました。
呼び出し元のawaitキーワードには前項で触れたため、説明を省きます。
static readonly
@functions{}ディレクティブ内で、新たにApplicationName定数を定義しました。
開発中に変更する可能性がある定数には、constではなくstatic readonly修飾子を使います。
現時点ではこの定数が有意義に思えませんが、次項で意味を持ちます。
@Html.Raw()
©はエンコードせず HTML として表記したいので、Raw()メソッドを使用します。
前項でWebApplication1と書かれていた部分は、先程定義した定数ApplicationNameに置き換えます。
このページ以外でも同定数を呼び出したい場合にはより良い方法がありますが、本項では省略いたします。
この一行には様々な種類のテキストが混在しているため、HTML 以外の部分を一旦全てRow()で囲みます。
特殊文字$と中かっこ{}を併用する事で、ApplicationNameも正確に定数として読み取られます。
ついでに <head> 内もメソッド化
最後に<head>内もメソッド化して、統一感を持たせましょう。
<head>内にあった HTML タグ部を、HeadTitle()というメソッドに切り出しました。
まずは、メソッド側から見て行きましょう。
void
前項まではメソッド化した部分にasp-タグヘルパーが含まれていたため、非同期処理を行う必要がありました。
HeadTitle()内にはタグヘルパーが含まれていないため、値を返さないvoid型の同期処理で記述できます。
前項で定義したApplicationName定数も、ここで再利用しています。
終わりに
ちなみに、IDE 上では下図のような見た目になります。
シンタックスハイライトによって@シンボルが黄色に強調されるため、メソッド化した部分は一目瞭然ですね。
また「大まかなページデザインは前半の HTML 部、細部の要素は後半の@functions{}部」と分離できています。
ブラウザ上でソースを表示するとメソッド化部分がずれていますが、これは初期状態からあるRenderBody()部分でも起きている事です。
長所短所について調査不足ではありますが、一つの方法として御紹介いたしました。
以上、HTML 部分を関数のように扱う方法でした。
