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>１＋２＝ @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 記事ランキング

本日 月間
＠IT