「ASP.NET Core Blazor」入門ハンドブック（を目指す）その２（Razor構文編）
前回の記事
さて、前回はBlazor用のテンプレートプロジェクトを作成してデバッグ実行してみるというところまでやりました。
しかしこれだけでは何のありがたみも面白味もありません。
この記事では「BlazorによってどのようにHTML内にコードを埋め込むことができるのか」を説明します。
前提知識
こういう技術的記事は前提とする知識をあらかじめ言っておくのがいいらしい。
- C#で「for文」とか「if文」とか基本的なロジックを書くことができる
- HTMLで文字列を表示したりボタンを表示することができる
- JavaScriptでHTMLで表示したボタン押下時の処理を書くことができる
- Webアプリケーションを作りかけたことがある
これくらいでしょうか。
この記事に興味がある人ならばだいたい大丈夫だと思います。
Razor構文
HTML内にC#を埋め込むための文法を「Razor構文」と呼びます。
この「Razor構文」というものはもともとかなり前からC#のWEBアプリケーションフレームワークである「ASP.NET」というものに含まれていたものです。
ただしこの時はRazor構文をあらかじめサーバー側で解釈してHTML＋javascriptとしたものをブラウザに送っていたという程度のものだったようです（詳しくは知らないがまあ今となってはどうでもいいでしょう）
普通のHTML文書の中に「＠」で始まるコードを書くとそれがC#のプログラムだと解釈されていろいろやってくれます。
例えば以下のように書くことができます。
@for(var i = 0;i < count;i++) { <p>@i 番目の文字列</p> }
このコードを見てもらうとだいたい雰囲気をつかんでもらえると思いますが、「@for」から始まる文がC#の繰り返し文で、その中に「<p>@i 番目の文字列</p>」といったようにHTMLを記述することができます。
さらにそのHTML要素の中でもC#の変数である「@i」という書き方ができるのもわかります。
このように、BlazorではRazor構文を使ってHTMLの中にC#コードを埋め込むことができます。
ちなみにBlazorというのも「Web」＋「Razor」から来た造語らしいです。
Razorファイル
Razor構文はRazorファイルという「*.razor」という拡張子のついたファイルに記述する必要があります。
（「*.cshtml」というファイルも存在しますがこれはレガシーだという話をどこかで見た気がする）
この「*.razor」というファイルを一つのクラスとして考え、Razor構文ではそのメンバ関数やメンバ変数などを記述していくという解釈をすると考えやすいでしょう。
以下にこの記事で説明したい事項を詰め込んだRazorファイルを記述します。
例文
見ての通りなんの感情も入っていないコードですが、以下ではこの例文をもとにしてRazor構文を見ていきます。
1行目「@page "/sample"」
「@page」で始まる記述のことを「pageディレクティブ」と呼んでいるようです。
このように書いて実行すると、例えば「localhost:12345/sample」というアドレスからこのRazorファイルによって記述されたページにアクセスすることができます。（12345の部分は環境に応じて変化します）
すなわち、pageディレクティブではページのルーティングを設定することができます。
2行目「@using System.Collections.Generic」
この行は通常のC#の「using」と同じことをしています。
4～13行目「@code { ～～ }」
この部分のように先頭に「@code」と記述し波かっこでくくったブロックによってメンバ変数やメンバ関数を定義することができます。
13行目で「StateHasChanged();」としていますが、これはもとからRazor構文内で利用することのできる関数で、ページ内の変数などが書き換えられたことを明示的に通知しページの再描画を促します。
これを記述せずとも自動で更新されることもありますが、どのようなタイミングで更新されるのかは把握できていないです。（おそらくボタンクリック時に更新するようになってる？）
15行目「」
この部分ではHTMLのbutton要素を表示しています。
そして「@onclick = "AddText"」という部分ではボタンがクリックされた時のイベントにあらかじめ定義しておいた「AddText」という関数を設定しています。
17～20行目「@foreach { ～～ }」
この部分ではC#のforeach文を使ってメンバ変数である「Texts」の要素をそれぞれpタグによって出力しています。
「Texts」の中身はボタンクリック時に「AddText」関数で追加されていきますから、それと同時に行数が増えていきます。
