Mvc conf session_2_shibamura

mvcConf @:Japan
～ ASP.NET MVC ブートキャンプ～

ASP.NET MVC 3 と NuGet で始める
高速 Web アプリ開発
Microsoft MVP for ASP.NET/IIS
芝村達郎 (しばむらたつろう)
d.hatena.ne.jp/shiba-yan twitter.com/shibayan

本セッションの趣旨
 対象者
 Web Forms で ASPX は使ったことがある
 Razor の名前は知ってます
 NuGet ？聞いたこともないですよ？

 ゴール
 Razor の基本的な文法を理解
 NuGet でパッケージをインストールして使える
2

ゕジェンダ
 Razor
 ASPX との違い
 Web ヘルパー
 NuGet
 実際に利用してみる
 パッケージを作成、発行
 まとめ

3

Razor (レイザー)

4

Razor とは
 ASP.NET MVC 3 の新しいビューエンジン
 バージョン 2 までは ASPX のみ利用可能

 HTML 中に C#, VB のコードをシームレス
に記述可能
 簡単に習得することが可能
 今まで以上に素早くビューを作成できる

5

Razor の特徴
 ASPX と比較してタイプ数が少ない
 開発者はロジックに注力できる

 出力される HTML がシンプル
 ビューステートなどを出力しない

 変数は展開時に HTML エンコードされる
 XSS などの攻撃を未然に防ぐ
6

Razor で書いてみる
<html>
<head>
<title>@ViewBag.Title</title>
</head>
<body>
@* コードブロック *@
@foreach (var product in Model) {
@* HTML エンコードして出力 *@
<h2>商品名：@product.Name</h2>
@* HTML エンコードせずに出力 *@
<p>説明：@Html.Raw(product.Description)</p>
}
</body>
</html>
7

Razor の基礎
 全ては「@」から始まる
 変数の展開
 if, foreach などの制御構造
 コードブロック
 メソッドの定義
 Web ヘルパーの定義
 コメント
 etc…
8

基本的な文法(1)
 変数の展開
 @変数名

 if, foreach などの制御構造
 @if (…) { … }, @foreach (…) { … }

 @{ … }
9

 メソッドの定義
 @functions { メソッド定義 }

 Web ヘルパーの定義
 @helper ヘルパー名(引数1,…) { … }

 コメント
 @* クライゕントに出力されない文字列 *@
10

 変数展開時にコード範囲を指定
 @(変数名)
 Generic で型名を指定する場合に必要

 セクション
 @section 名前 → @RenderSection(名前)
 ASPX の ContentPlaceHolder に近い

11

Razor の基本的な文法

12

コードとテキスト
 if, foreach など制御構造のブロック
 C#, VB コードを記述可能

 テキストブロック
 コードブロック以外の全て
 テキストとしてクライゕントに出力

13

コードブロックの例
<html>
<head>
<title>@ViewBag.Title</title>
</head> コードブロック
<body>
@* コードブロック *@
@foreach (var product in Model) {
@* HTML エンコードして出力 *@
これは？？
<h2>商品名：@product.Name</h2>
@* HTML エンコードせずに出力 *@
<p>説明：@Html.Raw(product.Description)</p>
}
</body>
</html>
14

テキストとして出力する
 HTML タグを使う
 タグと内部の文字列をテキストとして扱う

 <text> タグを使う
 出力にタグ自体は含まれない

 @: 記法を使う
 @: 以降の文字列をテキストとして扱う
15

間違えないためのヒント
 Visual Studio を活用する
 コードブロックには背景色が付いている

16

ASPX との違い

17

ASPX のおさらい
 ASP.NET Web Forms で主に利用
 MVC 2 まではデフォルトのビューエンジン

 コードナゲットを使って制御構造の記述や
変数の展開を行う
 コードナゲットにもいくつかの種類がある
 用途によって使い分けが必要

18

コードナゲットの例
<html>
<head runat="server">
<title><%: ViewBag.Title %></title>
</head>
<body>
<%-- コードブロック --%>
<% foreach (var product in Model) {%>
<%-- HTML エンコードして出力 --%>
<h2>商品名：<%: product.Name %></h2>
<%-- HTML エンコードせずに出力 --%>
<p>説明：<%= product.Description %></p>
<% } %>
</body>
</html>
19

文法を比較
 ASPX  Razor
 コードナゲット  @ から始める
 制御構造はコードナ  制御構造は @ の
ゲット内に書く直後に書く
 コードブロック内に  コードブロック内に
タグが書けないタグが書ける
 (デザインビューが  (デザインビューが
利用可能) 利用不可能)
20

機能を比較
 ASPX  Razor
 サーバコントロール  サーバコントロール
が使えるが使えない
 部分ビュー利用可能  部分ビュー利用可能
(ascx フゔイル) (cshtml フゔイル)
 ContentPlaceHolder  @section
 ヘルパー定義の  ヘルパー定義用の
サポートはない記法あり
21

パフォーマンスを比較
 ASP.NET MVC 3 Razor performance
 http://stackoverflow.com/questions/382896
1/asp-net-mvc-3-razor-performance

 RC 2 リリースビルドでのテスト結果
 ASPX: 4100 request/second
 Razor: 3940 request/second

22

まだ ASPX を選びますか？
 ASPX よりも格段に書きやすい
 デザインビューは使えないが、完成済みの
HTML にコードを埋め込むのが一般的
 コードナゲットの <% %> は打ちにくい

 Razor にパフォーマンス問題は存在しない
 少しの差はあっても、メリットの方が大きい

23

Web ヘルパー

24

Web ヘルパーとは
 HTML を出力する再利用可能なメソッド
 Razor の @helper 記法を利用する
 C#, VB でロジックを作成

 Razor を使って HTML の出力に特化
 タグをメソッド中に直接書いて出力

 外部 Web サービスとの連携目的が中心
25

サンプル Web ヘルパー
@* はてなブックマーク数を画像で表示するヘルパー *@
@helper HatenaBookmark(string url = null)
{
url = url ?? Request.Url.AbsoluteUri;
<a href="http://b.hatena.ne.jp/entry/@url">
<img src="http://b.hatena.ne.jp/entry/image/@url" />
</a>
}

@* 実際に使用する例 *@
@HatenaBookmark("http://d.hatena.ne.jp/shiba-yan/")

26

Web ヘルパーの定義と利用

demo ...

27

代表的な Web ヘルパー
 Microsoft が出しているヘルパー
 ASP.NET Web Helpers
 Xbox ゲーマーカード、Bing 検索など
 Twitter.Helper
 キーワード検索
 Facebook.Helper
 「いいね！」ボタンなど

 これ以外にも NuGet に多数登録
28

NuGet (ぬげっと)

29

NuGet とは
 .NET 用のパッケージマネージャ
 Ruby で例えると gem に近い

 MVC 3 のインストールと同時に入る
 Visual Studio 2010 の拡張としてインストール

 複数のフレームワークバージョンに対応
 .NET 1.1, 2.0, 4.0, Silverlight 4 など
30

NuGet の特徴
 1000 以上のパッケージが登録済み
 jQuery, Modernizr, Entity Framework など

 数クリックでインストール可能
 GUI が用意されているので初めての人でも安心

 パッケージのゕップデート機能
 インストール済みのパッケージを簡単に更新
31

実際に利用してみる

32

パッケージをインストールする
 Add Library Package Reference
 GUI の管理ツール
 パッケージの一覧表示、検索、更新が可能
 1 クリックでインストール

 Package Manager Console
 PowerShell を利用した管理ツール
 パッケージ ID が分かっている場合に便利
33

GUI でインストールパッケージを選択して
インストール

表示を切り替え

パッケージの
情報

34

CUI でインストール
 Install-Package (パッケージ ID)
 指定されたパッケージをインストール

 Update-Package (パッケージ ID)
 指定されたパッケージを最新版へ更新

パッケージ ID は NuGet.org で
確認できます
35

パッケージ ID を確認

36

パッケージの追加と利用

37

パッケージを作成、発行

38

パッケージを公開したい
 こんなに便利なヘルパーを作った
 みんなにも使ってもらいたい！

 標準のモデル検証は種類がイマイチ
 自分で検証属性を作りました！

NuGet で公開しましょう！！
39

作成の手順
1. nuget.org でユーザー登録する
2. NuGet Command Line をダウンロード
 http://nuget.codeplex.com/ から
3. nuspec フゔイルを作成する
 ゕセンブリ、プロジェクトから作成可能
 スクラッチで書くことも出来る
4. nupkg フゔイルを作成して Web へ発行

40

ユーザー登録
 http://nuget.org/ から登録

 登録してもすぐに反映されない
 中の人に Twitter 経由で頼む
 ログイン可能になるまで待ち続ける

 ゕクセスキーを取得する
 パッケージの登録時に必要となる
41

パッケージの作成、発行

42

今すぐ使いましょう！
 Razor の生産性は非常に高い
 HTML に特化された記法
 既存の言語 (C#, VB) とのシームレスな連携

 NuGet で便利なライブラリをゲット！
 ソーシャル連携で Twitter と Facebook は必須
と言ってもいい
 Web ヘルパー使えば 1 行書くだけ！
44

© 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the
part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Mvc conf session_2_shibamura

More Related Content

What's hot (20)

Similar to Mvc conf session_2_shibamura (20)

Mvc conf session_2_shibamura