ASP.NET Razor PagesのRazor構文をゼロから理解しよう！初心者向けガイド
生徒
「先生、ASP.NETでWebページを作るときに、HTMLの中でプログラムを書けるって本当ですか？」
先生
「はい、それがRazor構文です。HTMLにC#のコードを埋め込んで動的なWebページを作ることができます。」
生徒
「でも、どうやってHTMLとC#を区別するんですか？」
先生
「Razor構文では、@マークを使ってC#のコードをHTMLの中に書くことができます。これがRazorの基本です。」
1. Razor構文とは？
Razor構文とは、ASP.NET Razor Pagesで使われる特殊な書き方で、HTMLとC#コードを一つのファイル内で混ぜて書くことができる構文です。動的Webページを簡単に作れるのが特徴で、@マークを使うことで、C#の変数や条件分岐、ループ処理をHTMLに組み込めます。
2. @マークの基本的な使い方
Razor構文では、@を使うとC#のコードを開始できます。例えば、文字列や数字を表示するときに便利です。
@("こんにちは、世界！")
この場合、ブラウザには「こんにちは、世界！」と表示されます。HTMLとC#を繋ぐ橋渡しのような役割です。
3. 変数を使った簡単な例
Razor構文では、C#の変数を使って値をHTMLに埋め込むことができます。
@{
var name = "太郎";
}
<p>こんにちは、@name さん！</p>
この場合、ブラウザには「こんにちは、太郎さん！」と表示されます。変数を使って動的に内容を変えるのがRazor構文の便利なポイントです。
4. 条件分岐の例（if文）
Razor構文ではif文を使って条件に応じてHTMLの内容を切り替えることもできます。
@{
var score = 75;
}
@if(score >= 80)
{
<p>合格です！</p>
}
else
{
<p>もう少し頑張りましょう。</p>
}
この場合、スコアが75なので「もう少し頑張りましょう。」と表示されます。ユーザーごとに内容を変えるWebページを作るのに役立ちます。
5. ループ処理の例（for文）
Razor構文では、for文を使って繰り返し処理もできます。例えばリストの中身を順番に表示する場合です。
@{
var fruits = new List<string> { "リンゴ", "バナナ", "オレンジ" };
}
@for(int i = 0; i < fruits.Count; i++)
{
- @fruits[i]
}
ブラウザには、リスト形式で果物が表示されます。同じHTMLを繰り返し生成できる便利な方法です。
6. Razor構文でのコメント
Razor構文ではHTMLとは別にC#コード用のコメントも書けます。@*で開始し、*@で閉じます。
@* ここはRazorのコメントです *@
<p>この文章はブラウザに表示されます。</p>
コメントはコード内で説明を書くのに便利ですが、ブラウザには表示されません。コードの理解を助けるメモとして使えます。
7. HTMLタグ内でのRazor構文の使い方
Razor構文はHTMLの属性内でも使えます。例えばリンクのURLやクラス名を動的に変更できます。
@{
var pageClass = "highlight";
}
<div class="@pageClass">
このDIVはCSSクラスによって強調表示されます。
</div>
このように、HTMLの見た目や動作をプログラムで柔軟に変えられるのがRazor構文の魅力です。
8. Razor構文の便利なTips
Razor構文は、HTMLとC#を自然に組み合わせるために作られているので、次の点に注意すると便利です：
- @を使うことでC#コードを開始
- 複数行のC#コードは
@{ }で囲む - HTMLの中に直接C#変数を埋め込める
- if文やfor文を使って動的な内容を作成できる
- コメントは
@*～*@で書く
これらを覚えると、初心者でも簡単に動的Webページを作れるようになります。
