読者です 読者をやめる 読者になる 読者になる

miso_soup3 Blog

主に ASP.NET 関連について書いています。

ASP.NET MVC のビューは ASPX ではなく Razor を

ASP.NET MVC 深夜連絡 ASP.NET MVC Advent Calendar 2013

f:id:miso_soup3:20131202030220p:plain

ASP.NET MVC で開発を始める際は、ASPX ではなく Razor を使用しよう!!という記事です。
最初に ASPX と Razor について簡単に紹介してから、Razor を推す理由を書きます。

ASPX と Razor

ASP.NET MVC では、2つのビューエンジンを選択することができます。

  • Web フォームビューエンジン
  • Razor ビューエンジン

それぞれのビューエンジンには適切な構文があり、ここでは ASPX 構文、Razor 構文と呼称することにします。
前者の ASPX 構文は、ASP.NET Web Forms でも使用されている構文です。
後者の Razor 構文は、ASP.NET MVC 3 から登場し、Web Pages(WebMatrix)でも使用されています。

ASPX
f:id:miso_soup3:20131202021942p:plain

Razor
f:id:miso_soup3:20131202021950p:plain

ビューエンジンの選択

ASP.NET MVC 4 までは、プロジェクト作成時に次のように選択できます。
f:id:miso_soup3:20131202022110p:plain

ですが、ASP.NET MVC 5(Visual Studio 2013)からはそのような選択は用意されておりません。デフォルトで Razor が選択されるようになっています。(ビュー作成時には選択できます)

ASPX より Razor を

特に理由がない場合は、Razor をお勧めします。Razor は ASPX よりも勝る次の2つのメリットがあるからです。
(ASP.NET MVC 2 以下で開発する場合は、Razor は使用できませんので ASPX にせざるを得ません。)

  • シンプルで記述が楽
  • コーディングミスによる HTML エスケープ忘れを防ぐ

一方 ASPX のメリットは…無いと考えます。
Razor の方が便利であるという状況にも関わらず ASPX を選択する理由は、次のことが挙げられます。

  • ASP.NET Web Forms を経験しており、ASPX の書き方に慣れているから

つまり”Razor の学習コスト”が Razor のメリットよりも高いと捉えられる場合です。
が、私は Razor の楽ちんさは学習コストを上回ると思います。

Razor の学習コスト

正確な数値ではなく体感で言いますが、Razor の学習コストを 1 とすると、Razor のメリットは 10 に値し、開発期間が長いほど増します。
また、Razor の学習コストに対して、そんなに身構える必要はありません。日本語のドキュメントは豊富にありますし、Razor 構文は”なんとなく”書いても、優秀な構文の仕組みが正しい記述へ誘導してくれます。

…適当に言えば、「@ で書き始めればいいだけで簡単」です。

では更に Razor 推しとして、先に挙げた2つのメリットについて具体的なコードと一緒に確認してみます。

シンプルで記述が楽

if 文で比べてみます。

ASPX の場合
f:id:miso_soup3:20131202024302p:plain

Razor の場合
f:id:miso_soup3:20131202034035p:plain

ASPX の方が黄色のチカチカが激しいです。
ASPX の方は、C# や VB のコードは <% %> で囲む必要がありますが、Razor の方は、構文かどうかを判断するので少ない記述量で済みます。

コーディングミスによる HTML エスケープ忘れを防ぐ

HTML エスケープの記述で比べてみます。

f:id:miso_soup3:20131202030230p:plain

ASPX では、<%: だと HTML エスケープが行われ、<%= だと HTML エスケープが行われません。
(※ <%: の書き方はASP.NET 4 より有効です。それ以前は <%= Server.HtmlEncode(...) %> と書く必要があります。)
「:」なのか「=」なのか大変ややこしく感じます。

一方 Razor では、デフォルトで HTML エスケープされるようになっています。
HTML エスケープを避けるには、@Html.Raw(...)と書く必要があります。

おしまい

以上、ASPX ではなく Razor を使用しよう!!という記事でした。
補足ですが、1つのプロジェクト内で ASPX と Razor を共存させることは可能です。

おまけ

Razor 構文のキーワードを一覧にしてみました。解説は先ほど紹介したサイトに掲載されています。これら全てを引き出しとして持っておけば、快適にビュー開発を行うことができると思います。

@: ...
<text>...</text>
@{...}
@(...)
@* ... *@ 
@Html.Raw(...)
@* *@ と <!-- --> の違いとは
HTML エスケープとは
HTML エスケープ二重防止とは
@functions { }
@using 
@model 

by 深夜連絡 ASP.NET MVC な Web アプリ Advent Calendar 2013 1 日目