連載：マイクロソフト技術による標準化志向Web開発ことはじめ 第4回　Razorビュー・エンジンとヘルパー、そしてWebMatrixの登場 マイクロソフト　井上 章 2011/03/04

Page1 Page2

　前回は、ASP.NET MVCが持つ動的なHTMLコード生成機能の中心となる「ビュー・エンジン」について、Web標準やHTML5への対応といった視点で解説した。今回は、ASP.NET MVC 3から使用できるようになった新しいRazorビュー・エンジン（ASP.NET Webページ）とヘルパー・ライブラリについて解説する。また、Webサイト作成ツールとして新しく登場したWebMatrixとASP.NET MVCの関係についても紹介する。

■ASP.NET MVC 3とRazorビュー・エンジン

　2011年1月にリリースされたASP.NET MVC 3の一番の特徴は、「Razor（レイザー）」と呼ばれる新しいWebページ記法（＝構文）を用いてビューを記述できるようになったことだ。これまでのWebフォーム・ビュー・エンジン（.aspxファイル）に加えて、Razorビュー・エンジン（.cshtml／.vbhtmlファイル）が新たに追加され、両者を選択して使い分けることができる。

　次の図は、新規プロジェクトの作成時にビュー・エンジンを選択しているところだ。

図　ASP.NET MVC 3新規プロジェクト作成時のビュー・エンジンの選択

ASP.NET MVC 3では、これまでのWebフォーム・ビュー・エンジン（.aspxファイル。画面では「ASPX」）と、新たに追加されたRazorビュー・エンジン（.cshtml／.vbhtmlファイル）を選択して使い分けられる。

　そして、Razorビュー・エンジンを選択することで、「Razor」と呼ばれる新しいビュー記述構文を使用して、これまでよりもシンプルにビューを記述することが可能となる。次のコードは、Razor構文によるビューの記述例だ。

@{   var Title = "Hello Razor"; } <h1>@Title</h1> <ul> @foreach (var item in Model) {   <li>@item.Name</li> } </ul> <p>Time is @DateTime.Now</p>

Razor構文によるビューの記述例（.cshtml）

　Razor構文の一番の特徴は、「@」（アットマーク）を使って変数やコード・ブロックを記述することだろう。Webフォーム・ビュー・エンジン（.aspxファイル）ではコード・ナゲット（<% ... %>）を使ってコード・ブロックを記述したが、Razor構文では上記の例のように「@」の1文字で済んでしまう。シンプルかつ少ないキー入力でWebページを記述できるうえに、Visual Studio 2010ではASP.NET MVC 3をセットアップすることで、（次の画面のように）コード・エディタでRazor構文のコード・ハイライトやIntelliSenseが有効になるため、とても軽快にビューのコーディングが可能になる。

図　Visual Studio 2010のRazor構文のサポート

Visual Studio 2010ではASP.NET MVC 3をセットアップすることで、Razor構文のコード・ハイライトやIntelliSenseが有効になる。

■HTMLコード生成エンジン「ASP.NET Webページ」

　上記のように、Razor構文で記述したビュー定義ファイル（.cshtml／.vbhtml）と、それをHTMLコードに変換する処理エンジンを、通称「ASP.NET Webページ」（英語名： ASP.NET Web Pages）と呼んでいる。このASP.NET Webページは独立したコンポーネントとして提供されており*1、Razorビュー・エンジンの主要コンポーネントとしてASP.NET MVC 3と同時にセットアップされる。また、この後で紹介するWebMatrixという新しいWebサイト作成ツールでも、Razor構文で書かれたASP.NET Webページ・ファイルのHTMLコード生成エンジンとして使用される。

*1　ASP.NET Webページのコンポーネントはこちらからダウンロード可能となっている。

　ASP.NET Webページの内容をまとめたのが次の図である。

図　ASP.NET Webページの役割と、WebMatrix、ASP.NET MVC 3との関係

Razor構文で記述されたファイルのレンダリング・エンジンであるASP.NET Webページは、ASP.NET MVC 3とWebMatrixの両者で共通コンポーネントとして使用される。

■ASP.NETベースのWeb開発をより簡単に学ぶことができる新ツール「WebMatrix」の登場

　ここで、簡単に「WebMatrix」について紹介しておく（WebMatrixの詳しい使用方法などは＠IT: 新ツール「WebMatrix」でのASP.NET Webページ開発を試してみたなどを参照のこと）。

　ASP.NET MVC 3のリリースと同時期に、Webサイト作成のための新しい無償ツール「WebMatrix」がリリースされたことは、ご存じの方も多いだろう。次の図は、WebMatrixを起動したときに表示される最初の画面だ。

図　Webサイト作成ツール「WebMatrix」の起動画面

WebMatrixでは、起動画面の4つのシンプルなメニューから、簡単にWebサイトの作成をスタートできる。

　このWebMatrixは、これからWeb開発を学び始めたい方や、これまでテキスト・エディタなどを使ってHTMLマークアップ・ベースの静的なWebサイトを作成していた方が、新たに動的なWebサイト（＝サーバ側で動的にHTMLコードを生成する仕組み、例えばASP.NETなどを使ったWebサイト）の開発を始めるのに適したツールだ。

　Visual StudioやExpressionに加えて、このWebMatrixが登場したことで、初学者からプロ・デベロッパー、そしてWebデザイナーまで、多岐にわたるエンジニア層にそれぞれ適したツールが提供される形となり、より幅広い種類のWeb開発をASP.NETベースで行えるようになっている。

　これまで、Visual StudioとASP.NETを使ったWeb開発は、それらの技術を習得するのにハードルが高すぎて難しいと思われていた部分があった。そこにWebMatrixが登場したことで、ASP.NETベースのWeb開発を始めやすくなったことは間違いないであろう。

■Visual StudioとWebMatrixのポジショニング

　それでは、Visual StudioとWebMatrixという2つのツールをどのように使い分ければよいのだろうか。

　前述のとおり、ASP.NET MVC 3で使用できるようなったRazor構文を使ったASP.NET Webページの処理エンジンは、WebMatrixでも共通コンポーネントとして使用される。すでにお気付きの方もいるだろうが、このようにHTMLコードの生成エンジンを共通化することで、WebMatrix側で作成したWebページ・ファイルをASP.NET MVC 3側で使用できる*2。

*2　もちろん、MVCのデザイン・パターンに沿ってWebページ・ファイルでモデル・データを参照する場合など、一部修正が必要になる部分もある。

　これにより、WebMatrixで作成したWebサイトを容易にASP.NET MVC 3ベースのWebアプリケーションとしてアップグレードすることが可能になるため、HTML／CSSベースの静的なWebサイトからASP.NET Webページを使った動的なWebサイトへ、さらにはASP.NET MVC 3ベースの高機能なWebアプリケーションへと、Web開発者のスキル・セットやWebサイトの種類など、さまざまな用途に沿って適切なツールや開発フレームワークを選択していくことができるのだ。

　また、開発スキルの面でも、まずはWebMatrixを使ってRazor構文によるWebページの作成を習得し、その次の段階としてVisual Studioを使用してASP.NET MVC 3を使った開発を習得していくといったスキル・アップの流れが作れるのは、これからASP.NETを学ぶエンジニアには大変有効だろう。

　次の図は、WebMatrixとVisual Studioの使い分けをまとめたものである。

図　マイクロソフトが提供する各Web開発ツールのポジショニング

ASP.NET MVC 3とWebMatrixの登場で、HTML／CSSベースの静的なWebサイトからASP.NET Webページを使った動的なWebサイトへ、さらにはASP.NET MVC 3ベースの高機能なWebアプリケーションへと、Web開発者のスキル・セットやWebサイトの種類など、さまざまな用途に沿って適切なツールや開発フレームワークを選択していくことができるようになっている。

　次のページでは、RazorベースのWebパーツ「ヘルパー」の使用方法について簡単に紹介する。

INDEX
	［連載］マイクロソフト技術による標準化志向Web開発ことはじめ
	第4回　Razorビュー・エンジンとヘルパー、そしてWebMatrixの登場
	1．ASP.NET MVC 3とRazorビュー・エンジン／Visual StudioとWebMatrix
	2．NuGetとヘルパー・ライブラリの活用

「マイクロソフト技術による標準化志向Web開発ことはじめ」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）