1 / 45

ASP.NET MVC 3 と NuGet で始める高速 Web アプリ開発

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 で パッケージをインストールして使える. アジェンダ.

travis-travis
Download Presentation

ASP.NET MVC 3 と NuGet で始める高速 Web アプリ開発

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

  4. Razor (レイザー)

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

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

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

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

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

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

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

  12. Razor の基本的な文法

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

  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> コードブロック これは？？

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

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

  17. ASPX との違い

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

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

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

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

  22. パフォーマンスを比較 • 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

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

  24. Web ヘルパー

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

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

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

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

  29. NuGet (ぬげっと)

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

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

  32. 実際に利用してみる

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

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

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

  36. パッケージ ID を確認

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

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

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

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

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

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

  43. まとめ

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

More Related