slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
ASP.NET MVC 3 と NuGet で始める高速 Web アプリ開発 PowerPoint Presentation
Download Presentation
ASP.NET MVC 3 と NuGet で始める高速 Web アプリ開発

Loading in 2 Seconds...

play fullscreen
1 / 45

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


  • 205 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'ASP.NET MVC 3 と NuGet で始める高速 Web アプリ開発' - travis-travis


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide1
ASP.NET MVC 3 と NuGetで始める高速 Web アプリ開発

Microsoft MVP for ASP.NET/IIS

芝村達郎(しばむらたつろう)

d.hatena.ne.jp/shiba-yantwitter.com/shibayan

slide2
本セッションの趣旨
  • 対象者
    • Web Forms で ASPX は使ったことがある
    • Razor の名前は知ってます
    • NuGet?聞いたこともないですよ?
  • ゴール
    • Razor の基本的な文法を理解
    • NuGetでパッケージをインストールして使える
slide3
アジェンダ
  • Razor
    • ASPX との違い
    • Web ヘルパー
  • NuGet
    • 実際に利用してみる
    • パッケージを作成、発行
  • まとめ
razor
Razor とは
  • ASP.NET MVC 3 の新しいビューエンジン
    • バージョン 2 までは ASPX のみ利用可能
  • HTML 中に C#, VB のコードをシームレスに記述可能
    • 簡単に習得することが可能
    • 今まで以上に素早くビューを作成できる
razor1
Razor の特徴
  • ASPX と比較してタイプ数が少ない
    • 開発者はロジックに注力できる
  • 出力される HTML がシンプル
    • ビューステートなどを出力しない
  • 変数は展開時に HTML エンコードされる
    • XSS などの攻撃を未然に防ぐ
razor2
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>

razor3
Razor の基礎
  • 全ては「@」から始まる
    • 変数の展開
    • if, foreachなどの制御構造
    • コードブロック
    • メソッドの定義
    • Web ヘルパーの定義
    • コメント
    • etc…
slide9
基本的な文法(1)
  • 変数の展開
    • @変数名
  • if, foreachなどの制御構造
    • @if (…) { … }, @foreach (…) { … }
  • コードブロック
    • @{ … }
slide10
基本的な文法(2)
  • メソッドの定義
    • @functions { メソッド定義 }
  • Web ヘルパーの定義
    • @helper ヘルパー名(引数1,…) { … }
  • コメント
    • @* クライアントに出力されない文字列 *@
slide11
基本的な文法(3)
  • 変数展開時にコード範囲を指定
    • @(変数名)
    • Generic で型名を指定する場合に必要
  • セクション
    • @section 名前 → @RenderSection(名前)
    • ASPX の ContentPlaceHolderに近い
slide13
コードとテキスト
  • コードブロック
    • if, foreachなど制御構造のブロック
    • C#, VB コードを記述可能
  • テキストブロック
    • コードブロック以外の全て
    • テキストとしてクライアントに出力
slide14
コードブロックの例

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

コードブロック

これは??

slide15
テキストとして出力する
  • HTML タグを使う
    • タグと内部の文字列をテキストとして扱う
  • <text> タグを使う
    • 出力にタグ自体は含まれない
  • @: 記法を使う
    • @: 以降の文字列をテキストとして扱う
slide16
間違えないためのヒント
  • Visual Studio を活用する
    • コードブロックには背景色が付いている
slide18
ASPX のおさらい
  • ASP.NET Web Forms で主に利用
    • MVC 2 まではデフォルトのビューエンジン
  • コードナゲットを使って制御構造の記述や変数の展開を行う
    • コードナゲットにもいくつかの種類がある
    • 用途によって使い分けが必要
slide19
コードナゲットの例

<html>

<headrunat="server">

<title><%: ViewBag.Title%></title>

</head>

<body>

<%-- コードブロック --%>

<%foreach (varproduct inModel) {%>

<%-- HTML エンコードして出力 --%>

<h2>商品名:<%:product.Name%></h2>

<%-- HTML エンコードせずに出力 --%>

<p>説明:<%=product.Description%></p>

<%} %>

</body>

</html>

slide20
文法を比較
  • ASPX
    • コードナゲット
    • 制御構造はコードナゲット内に書く
    • コードブロック内にタグが書けない
    • (デザインビューが利用可能)
  • Razor
    • @ から始める
    • 制御構造は @ の直後に書く
    • コードブロック内にタグが書ける
    • (デザインビューが利用不可能)
slide21
機能を比較
  • ASPX
    • サーバコントロールが使える
    • 部分ビュー利用可能(ascxファイル)
    • ContentPlaceHolder
    • ヘルパー定義のサポートはない
  • Razor
    • サーバコントロールが使えない
    • 部分ビュー利用可能 (cshtmlファイル)
    • @section
    • ヘルパー定義用の記法あり
slide22
パフォーマンスを比較
  • 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
slide23
まだ ASPX を選びますか?
  • ASPX よりも格段に書きやすい
    • デザインビューは使えないが、完成済みの HTML にコードを埋め込むのが一般的
    • コードナゲットの <% %> は打ちにくい
  • Razor にパフォーマンス問題は存在しない
    • 少しの差はあっても、メリットの方が大きい
slide25
Web ヘルパーとは
  • HTML を出力する再利用可能なメソッド
    • Razor の @helper 記法を利用する
    • C#, VB でロジックを作成
  • Razor を使って HTML の出力に特化
    • タグをメソッド中に直接書いて出力
  • 外部 Web サービスとの連携目的が中心
slide26
サンプル 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/")

slide28
代表的な Web ヘルパー
  • Microsoft が出しているヘルパー
    • ASP.NET Web Helpers
      • Xbox ゲーマーカード、Bing 検索など
    • Twitter.Helper
      • キーワード検索
    • Facebook.Helper
      • 「いいね!」ボタンなど
  • これ以外にも NuGetに多数登録
nuget
NuGetとは
  • .NET 用のパッケージマネージャ
    • Ruby で例えると gem に近い
  • MVC 3 のインストールと同時に入る
    • Visual Studio 2010 の拡張としてインストール
  • 複数のフレームワークバージョンに対応
    • .NET 1.1, 2.0, 4.0, Silverlight 4 など
nuget1
NuGetの特徴
  • 1000 以上のパッケージが登録済み
    • jQuery, Modernizr, Entity Framework など
  • 数クリックでインストール可能
    • GUI が用意されているので初めての人でも安心
  • パッケージのアップデート機能
    • インストール済みのパッケージを簡単に更新
slide33
パッケージをインストールする
  • Add Library Package Reference
    • GUI の管理ツール
    • パッケージの一覧表示、検索、更新が可能
    • 1 クリックでインストール
  • Package Manager Console
    • PowerShell を利用した管理ツール
    • パッケージ ID が分かっている場合に便利
slide34
GUI でインストール

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

表示を切り替え

パッケージの情報

slide35
CUI でインストール
  • Install-Package (パッケージ ID)
    • 指定されたパッケージをインストール
  • Update-Package (パッケージ ID)
    • 指定されたパッケージを最新版へ更新

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

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

NuGetで公開しましょう!!

slide40
作成の手順
  • nuget.org でユーザー登録する
  • NuGet Command Line をダウンロード
    • http://nuget.codeplex.com/から
  • nuspecファイルを作成する
    • アセンブリ、プロジェクトから作成可能
    • スクラッチで書くことも出来る
  • nupkgファイルを作成して Web へ発行
slide41
ユーザー登録
  • http://nuget.org/から登録
  • 登録してもすぐに反映されない
    • 中の人に Twitter 経由で頼む
    • ログイン可能になるまで待ち続ける
  • アクセスキーを取得する
    • パッケージの登録時に必要となる
slide44
今すぐ使いましょう!
  • Razor の生産性は非常に高い
    • HTML に特化された記法
    • 既存の言語 (C#, VB) とのシームレスな連携
  • NuGetで便利なライブラリをゲット!
    • ソーシャル連携で Twitter と Facebook は必須と言ってもいい
    • Web ヘルパー使えば 1 行書くだけ!