C# Razor構文 基礎文法 総まとめ

デジタルアドバンテージ 一色 政彦
2011/10/18

0. まえがき

 本稿では、「Razor構文(C#)」についての基礎文法を簡潔にまとめる。「Razor構文、どう書くんだっけ?」という場合のリファレンスとして活用していただけるとうれしい(なお、本稿はエッセンスしか解説しておらず、すべてを学べるわけではないので、じっくり学ぶには「連載:ASP.NET MVC入門【バージョン3対応】 第5回 新しいビュー・エンジン「Razor」の基本を理解しよう」を参照してほしい)。

1. Razor構文(C#)の概要

Razor構文とは何か?

 Razor構文(Razor syntax)とは、ASP.NET MVCや(WebMatrixで採用されている)ASP.NET WebページなどのWeb開発技術用のビュー・エンジンの1つである「Razorビュー・エンジン」向けの文法のことで、C#言語(.cshtmlファイル)用とVisual Basic言語(.vbhtmlファイル)用の2種類がある。

 その構文は、クラシックASP(Active Server Pages)に近く、「HTMLページ内にRazor構文でコードを埋め込む」という開発スタイルである。ASP.NET Webフォームのコード・ナゲット(=「<% ... %>」という構文でプログラミング・コードを埋め込む方法)と比べて、タイプ量が少なく、シンプルな記述となるのが特徴だ。

【コラム】Razor構文を手軽に試せるサービス

 Razor構文の挙動を確かめたいときには、「Razor Do It」というWeb上のサービスが便利だ。具体的には、以下の画面を参照されたい。

[Title]欄に今回の入力内容を表すタイトルを入力して
[Razor]欄にRazorコード(この例では「@DateTime.Now」)を含むHTMLコードを入力し、
コンボボックスから「cshtml」(=C#)を選択して、
[Execute]ボタンをクリックする

Razorビュー・エンジンにより処理された結果が表示される
(この例では「@DateTime.Now」が「2011/09/28 16:23:51」に変換される)
Razor Do It」のサイト

2. Razor構文(C#)の基礎文法

インライン式:単一のプロパティ/メソッド/フィールド変数の値の出力

 Razor構文で、メソッドやプロパティ、フィールド変数などの値を、HTMLコードとして動的に出力したい場合には、それらの先頭に「@」を付けるだけである。

 このようなインライン式の終了位置は、C#における識別子名として使えない文字の出現によって決まる(半角/全角スペースや「:」などの、「英数字・日本語文字」以外の文字のほとんどが区切りとなる。「.<英数字>」や「[」などはインライン式の一部と見なされる)。つまり下記のコード例では、「<」で始まるHTMLタグの前までがC#コードとなる。

<p>プロパティ:@DateTime.Now</p>
<p>メソッド:  @DateTime.Now.ToLongDateString() ←スペースで終了</p>
<p>フィールド:@DateTime.MaxValue:←全角コロンでコード終了</p>
インライン式

 複数のトークンを組み合わせて1つのインライン式とすることもできる。その場合、下記のように「@(」で式ブロックを開始して、「)」で終了する。

<p>@("現在の時刻:" + DateTime.Now)</p>
複数のトークンで構成されたインライン式

コード・ブロック:複数の文からなるブロックの記述

 複数の文で構成されるコード・ブロックを記述したい場合は、下記のように「@{」でコード・ブロックを開始して、「}」で終了する。

@{
  int year = DateTime.Now.Year;
  string msg = (DateTime.IsLeapYear(year)) ? "うるう年" : "平年";
}
コード・ブロック

 コード・ブロック内の変数(上記の例では「year」や「msg」)は、後続のインライン式もしくはコード・ブロック内で使用できる(次のコードはその例である)。

<p>コード・ブロック内の変数を、後述のインライン式で出力:@msg</p>
コード・ブロック内の変数を、後述のインライン式/コード・ブロック内で使用

コード・ブロック内での変数や文字列の出力

 上記の例では、コード・ブロック内の変数を別のインライン式で出力しているが、同じコード・ブロックの中からも出力できる。具体的には下記のように、HTMLタグ(例えば「<p>〜</p>」など)で囲んだブロック内に、インライン式やコード・ブロックなどを含むHTMLコードを記述すればよい。

@{
  string msg = DateTime.Now.ToLongDateString();
  <p>コード・ブロック内の変数を、HTMLタグ付きで出力:@msg</p>
}
HTMLタグにより、コード・ブロック内で文字列と変数を出力

 前後にHTMLタグを含めたくない場合には、「<text>〜</text>」タグで囲んだブロック内に、インライン式やコード・ブロックなどを含むHTMLコードを記述する。

@{
  string msg = DateTime.Now.ToLongDateString();
  <text>コード・ブロック内の変数を、textタグで出力:@msg</text>
}
<text>タグにより、コード・ブロック内で文字列と変数を出力

 「<text>〜</text>」タグには複数行のHTMLコードが記述できるが、単に文字列を1行出力したい場合には、もっとシンプルに記述できる。具体的には、「@:」で始めて1行のHTMLコードを記述する。

@{
  string msg = DateTime.Now.ToLongDateString();
  @:この1行が、そのまま出力される。<br>変数も使える:@msg
}
「@:」により、コード・ブロック内で1行の文字列と変数を出力

コメント

 Razor構文のHTMLコード内に、最終的なHTMLコードには出力されないコメントを含めたい場合、下記のように「@*」でコメント・ブロックを開始して、「*@」で終了する。

@* この部分はコメントになる *@
@*
  当然、複数行で記述することもできる
*@
HTMLコード内でのコメント

 このコメント記述方法は、コード・ブロック内でも有効だ。

@{
  @* この部分はコメントになる *@
  // 当然、C#のコメントも使える
  /* C#における複数行のコメント */
}
コード・ブロックでのコメント

「@」のエスケープ処理

 ここまでの説明どおり、Razor構文は「@」を先頭に使った文法を採用している。従って、HTMLコード内で「@」で始まるテキストを記述する場合、その先頭の「@」が誤認識されないようにエスケープ処理を行う必要がある。これは、次のコード例のように「@」を2個連続して記述する。

<p>@@isshiki宛にツイートしてください。</p>
「@」のエスケープ処理(「@isshiki……」をエスケープ処理するコード例)

名前空間のインポート

 Razorエンジンでは大半の名前空間をデフォルトでインポートしてくれるが、そこでインポートされていない名前空間のクラスを利用するには、次のコード例のように「@using <名前空間>」を記述する。

@using System.Text.RegularExpressions;
@{
  string str= "こんにちは";
  if (Regex.IsMatch(str, @"^\p{IsHiragana}*$"))
  {
    @:全部、ひらがなです。
  }
  else
  {
    @:ひらがなではない文字が含まれています。
  }
}
名前空間のインポート(Regexクラスを使うために、System.Text.RegularExpressions名前空間をインポートしている)

条件分岐

 コード・ブロックの中でC#の条件分岐式(if文やswitch文など)を利用できるが、条件分岐のみのシンプルなC#コードを記述したい場合には、Razor構文のifコード・ブロックやswitchコード・ブロックを使用することもできる(次のコードを参照)。

@* ifコード・ブロック *@
@{int num = 1;}
@if (num > 0) {
  <p>正の数</p>
} else if (num == 0) {
  <p>0</p>
} else {
  <p>負の数</p>
}

@* switchコード・ブロック *@
@{int i = 1;}
@switch (i) {
  case 1:
    <p>「1」です。</p>
    break;
  default:
    <p>「1」以外です。</p>
    break;
}
条件分岐

繰り返し処理

 Razor構文では、条件分岐だけでなく、繰り返し処理用のforコード・ブロックやforeachコード・ブロック、whileコード・ブロックも利用できる(次のコードを参照)。

@* forコード・ブロック *@
@for (int i = 0; i < 3; i++) {
  <p>for文のループの「@i」回目です。</p>
}

@* foreachコード・ブロック *@
@{int[] items = {1,2,3};}
@foreach (var item in items) {
  <p>foreach文のループで処理される個別項目の値は「@item」です。</p>
}

@* whileコード・ブロック *@
@{var j = 0;}
@while (j < 3) {
  <p>for文のループの「@j」回目です。</p>
  j++;
}
繰り返し処理

関数

 Razor構文では、インライン式やコード・ブロックで呼び出すメソッドやプロパティを定義するためのfunctionsコード・ブロック(=関数)も使用できる(次のコードを参照)。

@functions {

  // メソッドの定義
  int Sum(int a, int b)
  {
    return a + b;
  }

  // プロパティの定義
  int _num = 0;
  int Num
  {
    get
    {
      return _num;
    }
    set
    {
      _num = value;
    }
  }
}

<p>1+2= @Sum(1, 2)</p>
<p>プロパティの値: @Num</p>
関数

そのほかの重要なRazor構文の機能:レイアウト/ヘルパー

 Razor構文を使ううえで押さえておきたい機能がいくつかあるので、最後に簡単に紹介する。

 1つは、共通のサイト・テンプレートを定義できる「レイアウト・ページ」である。詳しくは、「“Razor”の紹介 − ASP.NET向け新ビュー・エンジン − @IT」の「レイアウト/マスターページのシナリオ − 基礎」の節を参照されたい。

 もう1つは、Webアプリケーションにさまざまな機能を付加してくれる「ヘルパー」である。詳しくは「Razorビュー・エンジンとヘルパー、そしてWebMatrixの登場 − @IT」の「NuGetとヘルパー・ライブラリの活用」の節や、「第5回 新しいビュー・エンジン「Razor」の基本を理解しよう − @IT」の「ビュー開発を効率化する『ビュー・ヘルパー』」の節を参照してほしい。また、ヘルパーを自作する場合には「@helper」で始まるコードを記述するが、詳しくは「.NET開発の新標準「NuGet」入門(後編) − @IT」の「NuGetパッケージの作成」の節を参照してほしい。End of Article

インデックス・ページヘ  「.NET開発『虎の巻』」


Insider.NET フォーラム 新着記事
  • 第2回 簡潔なコーディングのために (2017/7/26)
     ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
     Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回 明瞭なコーディングのために (2017/7/19)
     C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator (2017/7/18)
     Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Insider.NET 記事ランキング

本日 月間