はじめに
ASP.NET や Blazor でフロントエンド開発を行っている方であれば、Razor という名前を一度は耳にしたことがありますよね？
Razor は C# のコードと HTML を組み合わせて記述できる テンプレートエンジン。
本記事では、次の疑問に答えながら Razor の基本から実用テクニックを解説する。
あまり覚えることも少ないし、一回書いてしまえばあとは応用効くので、構えずに読んでみてください。
- Razor で何ができるのか
-
@記号の役割は何か - 部品化（部分ビュー）はどう行うのか
Razor とは？
Razor は Microsoft が開発した 軽量なビューエンジン です。C# でロジックを記述しながら、HTML と組み合わせて Web ページを生成できる。
| 特徴 | 説明 |
|---|---|
@ 記号で C# を埋め込める |
HTML 内にシームレスに C# を挿入できる |
拡張子 .cshtml / .razor
|
ASP.NET MVC は .cshtml、Blazor は .razor を使用 |
| IntelliSense 対応 | Visual Studio / VS Code で補完が効く |
| SEO に強い | サーバーサイドレンダリングのためクローラーに認識されやすい |
基本の構文
@{
var title = "Razor 入門";
}
<h1>@title</h1>
条件分岐
@if (Model.IsLogin)
{
<p>ようこそ、@Model.UserName さん</p>
}
else
{
<p>ログインしてください。</p>
}
ループ処理
@foreach (var item in Model.Items)
{
<li>@item.Name</li>
}
コメントの書き方
@* これは Razor のコメントです *@
コンポーネント・部分ビューの活用
Razor ではビューの共通化や再利用を目的として 部分ビュー や Razor コンポーネント を使用できる。
部分ビューの例（ASP.NET MVC）
@Html.Partial("_UserProfile", Model.User)
Blazor の Razor コンポーネント例
<!-- ProfileCard.razor -->
<h3>@User.Name</h3>
<p>@User.Bio</p>
<!-- 親コンポーネント -->
<ProfileCard User="@user" />
よくある落とし穴
| 事象 | 原因と対策 |
|---|---|
@ 記号がそのまま表示される |
@@ と書くと @ 文字が出力されるため注意 |
| HTML タグ構造が崩れる |
if や foreach 内のタグ閉じ忘れに注意 |
| 名前の衝突 | ViewModel、ViewBag、ローカル変数で同名を避ける |
まとめ
Razor は ASP.NET アプリケーションにおける重要な技術要素。
- C# と HTML を自然に混在できる
- サーバーサイドレンダリングにより SEO に強い
- 再利用性の高い UI 設計が可能
Blazor や ASP.NET Core MVC を学習する際には、Razor の理解が必須。
Razor構文慣れたら使いやすいので、がんばって習得してください。
三項演算子で長くなりがちなので、適宜if文とかで分岐したほうが見やすい場合もあります。
@で呼び出す変数とかは初期値入ってないとよく落ちるので、イニシャライズ処理ちゃんとしてくださいね～。