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

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

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

2 本セッションの趣旨  対象者  Web Forms で ASPX は使ったことがある  Razor の名前は知ってます  NuGet ？聞いたこともないですよ？  ゴール  Razor の基本的な文法を理解  NuGet でパッケージをインストールして使える 2

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

4 Razor (レイザー) 4

5 Razor とは  ASP.NET MVC 3 の新しいビューエンジン  バージョン 2 までは ASPX のみ利用可能  HTML 中に C#, VB のコードをシームレス に記述可能  簡単に習得することが可能  今まで以上に素早くビューを作成できる 5

6 Razor の特徴  ASPX と比較してタイプ数が少ない  開発者はロジックに注力できる  出力される HTML がシンプル  ビューステートなどを出力しない  変数は展開時に HTML エンコードされる  XSS などの攻撃を未然に防ぐ 6

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

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

9 基本的な文法(1)  変数の展開  @変数名  if, foreach などの制御構造  @if (…) { … }, @foreach (…) { … }  コードブロック  @{ … } 9

10 基本的な文法(2)  メソッドの定義  @functions { メソッド定義 }  Web ヘルパーの定義  @helper ヘルパー名(引数1,…) { … }  コメント  @* クライアントに出力されない文字列 *@ 10

11 基本的な文法(3)  変数展開時にコード範囲を指定  @(変数名)  Generic で型名を指定する場合に必要  セクション  @section 名前 → @RenderSection(名前)  ASPX の ContentPlaceHolder に近い 11

12 Razor の基本的な文法 12

13 コードとテキスト  コードブロック  if, foreach など制御構造のブロック  C#, VB コードを記述可能  テキストブロック  コードブロック以外の全て  テキストとしてクライアントに出力 13

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

15 テキストとして出力する  HTML タグを使う  タグと内部の文字列をテキストとして扱う  タグを使う  出力にタグ自体は含まれない  @: 記法を使う  @: 以降の文字列をテキストとして扱う 15

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

17 ASPX との違い 17

18 ASPX のおさらい  ASP.NET Web Forms で主に利用  MVC 2 まではデフォルトのビューエンジン  コードナゲットを使って制御構造の記述や 変数の展開を行う  コードナゲットにもいくつかの種類がある  用途によって使い分けが必要 18

19 コードナゲットの例 19 商品名： 説明：

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

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

22 パフォーマンスを比較  ASP.NET MVC 3 Razor performance  http://stackoverflow.com/questions/382896 1/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

23 まだ ASPX を選びますか？  ASPX よりも格段に書きやすい  デザインビューは使えないが、完成済みの HTML にコードを埋め込むのが一般的  コードナゲットの は打ちにくい  Razor にパフォーマンス問題は存在しない  少しの差はあっても、メリットの方が大きい 23

24 Web ヘルパー 24

25 Web ヘルパーとは  HTML を出力する再利用可能なメソッド  Razor の @helper 記法を利用する  C#, VB でロジックを作成  Razor を使って HTML の出力に特化  タグをメソッド中に直接書いて出力  外部 Web サービスとの連携目的が中心 25

26 サンプル Web ヘルパー 26 @* はてなブックマーク数を画像で表示するヘルパー *@ @helper HatenaBookmark(string url = null) { url = url ?? Request.Url.AbsoluteUri; } @* 実際に使用する例 *@ @HatenaBookmark("http://d.hatena.ne.jp/shiba-yan/")

27 Web ヘルパーの定義と利用 demo... 27

28 代表的な Web ヘルパー  Microsoft が出しているヘルパー  ASP.NET Web Helpers  Xbox ゲーマーカード、Bing 検索など  Twitter.Helper  キーワード検索  Facebook.Helper  「いいね！」ボタンなど  これ以外にも NuGet に多数登録 28

29 NuGet (ぬげっと) 29

30 NuGet とは .NET 用のパッケージマネージャ  Ruby で例えると gem に近い  MVC 3 のインストールと同時に入る  Visual Studio 2010 の拡張としてインストール  複数のフレームワークバージョンに対応 .NET 1.1, 2.0, 4.0, Silverlight 4 など 30

31 NuGet の特徴  1000 以上のパッケージが登録済み  jQuery, Modernizr, Entity Framework など  数クリックでインストール可能  GUI が用意されているので初めての人でも安心  パッケージのアップデート機能  インストール済みのパッケージを簡単に更新 31

32 実際に利用してみる 32

33 パッケージをインストールする  Add Library Package Reference  GUI の管理ツール  パッケージの一覧表示、検索、更新が可能  1 クリックでインストール  Package Manager Console  PowerShell を利用した管理ツール  パッケージ ID が分かっている場合に便利 33

34 GUI でインストール 34 表示を切り替え パッケージを選択して インストール パッケージの 情報

35 CUI でインストール  Install-Package (パッケージ ID)  指定されたパッケージをインストール  Update-Package (パッケージ ID)  指定されたパッケージを最新版へ更新 35 パッケージ ID は NuGet.org で 確認できます

36 パッケージ ID を確認 36

37 パッケージの追加と利用 37

38 パッケージを作成、発行 38

39 パッケージを公開したい  こんなに便利なヘルパーを作った  みんなにも使ってもらいたい！  標準のモデル検証は種類がイマイチ  自分で検証属性を作りました！ 39 NuGet で公開しましょう！！

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

41 ユーザー登録  http://nuget.org/ から登録 http://nuget.org/  登録してもすぐに反映されない  中の人に Twitter 経由で頼む  ログイン可能になるまで待ち続ける  アクセスキーを取得する  パッケージの登録時に必要となる 41

42 パッケージの作成、発行 42

43 まとめ 43

44 今すぐ使いましょう！  Razor の生産性は非常に高い  HTML に特化された記法  既存の言語 (C#, VB) とのシームレスな連携  NuGet で便利なライブラリをゲット！  ソーシャル連携で Twitter と Facebook は必須 と言ってもいい  Web ヘルパー使えば 1 行書くだけ！ 44

45 © 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.