Embed Size (px)
DESCRIPTION
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 で パッケージをインストールして使える. アジェンダ. - PowerPoint PPT Presentation
Citation preview
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 で書いてみる
7
<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>
Razor の基礎 全ては「 @ 」から始まる
変数の展開 if, foreach などの制御構造 コードブロック メソッドの定義 Web ヘルパーの定義 コメント etc…
8
基本的な文法 (1) 変数の展開
@ 変数名
if, foreach などの制御構造 @if (…) { … }, @foreach (…) { … }
コードブロック @{ … }
9
基本的な文法 (2) メソッドの定義
@functions { メソッド定義 }
Web ヘルパーの定義 @helper ヘルパー名 ( 引数 1,…) { … }
コメント @* クライアントに出力されない文字列 *@
10
基本的な文法 (3) 変数展開時にコード範囲を指定
@( 変数名 ) Generic で型名を指定する場合に必要
セクション @section 名前 → @RenderSection( 名前 ) ASPX の ContentPlaceHolder に近い
11
Razor の基本的な文法
12
コードとテキスト コードブロック
if, foreach など制御構造のブロック C#, VB コードを記述可能
テキストブロック コードブロック以外の全て テキストとしてクライアントに出力
13
コードブロックの例
14
<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>
これは？？
コードブロック
テキストとして出力する HTML タグを使う
タグと内部の文字列をテキストとして扱う
<text> タグを使う 出力にタグ自体は含まれない
@: 記法を使う @: 以降の文字列をテキストとして扱う
15
間違えないためのヒント Visual Studio を活用する
コードブロックには背景色が付いている
16
ASPX との違い
17
ASPX のおさらい ASP.NET Web Forms で主に利用
MVC 2 まではデフォルトのビューエンジン
コードナゲットを使って制御構造の記述や変数の展開を行う コードナゲットにもいくつかの種類がある 用途によって使い分けが必要
18
コードナゲットの例
19
<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>
文法を比較 ASPX
コードナゲット 制御構造はコードナ
ゲット内に書く コードブロック内に
タグが書けない ( デザインビューが
利用可能 )
Razor @ から始める 制御構造は @ の
直後に書く コードブロック内に
タグが書ける ( デザインビューが
利用不可能 )
20
機能を比較 ASPX
サーバコントロールが使える
部分ビュー利用可能 (ascx ファイル )
ContentPlaceHolder
ヘルパー定義のサポートはない
Razor サーバコントロール
が使えない 部分ビュー利用可能
(cshtml ファイル ) @section ヘルパー定義用の
記法あり
21
パフォーマンスを比較 ASP.NET MVC 3 Razor performance
http://stackoverflow.com/questions/3828961/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 ヘルパー
26
@* はてなブックマーク数を画像で表示するヘルパー *@@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/")
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) 指定されたパッケージを最新版へ更新
35
パッケージ ID は NuGet.org で確認できます
パッケージ ID を確認
36
パッケージの追加と利用
37
パッケージを作成、発行
38
パッケージを公開したい こんなに便利なヘルパーを作った
みんなにも使ってもらいたい！
標準のモデル検証は種類がイマイチ 自分で検証属性を作りました！
39
NuGet で公開しましょう！！
作成の手順1. nuget.org でユーザー登録する2. NuGet Command Line をダウンロード
http://nuget.codeplex.com/ から3. nuspec ファイルを作成する
アセンブリ、プロジェクトから作成可能 スクラッチで書くことも出来る
4. nupkg ファイルを作成して Web へ発行
40
ユーザー登録 http://nuget.org/ から登録
登録してもすぐに反映されない 中の人に Twitter 経由で頼む ログイン可能になるまで待ち続ける
アクセスキーを取得する パッケージの登録時に必要となる
41
パッケージの作成、発行
42
まとめ
43
今すぐ使いましょう！ 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.
