Mvc conf session_1_osada

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

最初に全体を押さえよう ASP.NET MVC オーバービュー

株式会社シーエスゕ CLR/H・せきゅぽろ代表長田直樹 (おさだなおき)

cs.gogo-asp.net/blogs/naoki/ twitter.com/naoki0311

http://cs.gogo-asp.net/blogs/naoki/





http://twitter.com/

セッションの目的とゴール

目的 ASP.NET の全体像を知る ASP.NET MVC の概要をおさえる

ゴール ASP.NET ゕプリケーションの特色を話せる ASP.NET MVC のゕーキテクチャの説明できる本日全てのセッションの足掛かり部分を会得する

2

Agenda

1. ASP.NET と Visual Studio

2. ASP.NET MVC によるサト構築例

3. ASP.NET MVC 概要～Rails を追いかける～

4. まとめ

3

ASP.NET と Visual Studio

まずはおさらい

4

•Visual Studio.NET •Visual Studio.NET 2003 •.NET 対応の ASP として登場

ASP.NETの歴史～ASP.NET MVC は実は最近の登場～

ASP.NET Web Form 1.0 / 1.1

2002年～2003年頃

出始めという事で痒い所に手が届き辛い時代



ASP.NET Web Form 2.0 •Visual Studio 2005 •サーバーコントロールの拡充 •データソースコントロール等 •AJAX 対応

Web ゕプリの需要が高まり、AJAX も実用へ

2005年～2008年頃

•Visual Studio 2008 •LINQ 対応

SP1にて •ADO.NET Entity Framework 対応 •WCF Data Services 対応 •ASP.NET 動的データ対応


7


Web Form が一種の完成形へ

RESTful な URL や Web 標準が ”特に “ 意識されやすくなる

ASP.NET Web Form 2.0

ASP.NET Web Form 3.5 / 3.5 SP1


8

ASP.NET MVC 1.0 •Visual Studio 2008 •MVC 開発のサポート •RESTful な URL •HTML ヘルパー対応 •単体テストの容易性

Web Form では対応しきれないニーズに応える形で誕生



9

ASP.NET MVC 1.0

ASP.NET MVC 2.0 •Visual Studio 2010 /2008

•.NET 3.5 / 4 両方に対応 •検証機能の強化 •強く型付されたヘルパー •エリゕ機能 •jQuery の統合

業務で活用できるレベルに到達！


ASP.NET Web Form 4


10

•Visual Studio 2010 •jQuery UI などの統合 •Razor 対応 •Tools Update にて

•Entity Framework 4.1 統合 •スキャフォールデゖング強化

HTML5 対応や携帯電話ゕプリへの需要

クラウドへのデプロなど…


ASP.NET MVC 1.0 ASP.NET MVC 2.0（ASP.NET Web Form 4）

ASP.NET MVC 3

ASP.NETとVisual Studio フレームワーク構成図

11

.NET Framework 4

ASP.NET 4

Web フォーム ASP.NET MVC 2, 3

ASP.NET AJAX

動的データ

本来 Web 開発に必要な知識

HTTP URI HTML REST

12

ASP.NETとは？ Web 開発のフレームワーク

動的 Web ゕプリケーションの開発・実行基盤サーバー側で動的に HTML を生成 (ASP, PHP 等と同じ)

さまざまな形態の Web 開発に対応個人規模 Web サト ⇔

大規模 Web ゕプリケーション

13

クライアント

Web ブラウザー

処理ロジック HTML

ASP.NET

ASPX

Razor

サーバー

動的生成

デプロ先は選択へ～Windows Azure も加わりました～

14

ASP.NET MVC

ASP.NET AJAX

ASP.NET 動的データ

jQuery

ASP.NET

Web Form

ゕプリケーション

ビルドデプロ

Windows Azure

Platform

Windows Server + IIS

詳しくは、勇さんのセッションで！

ASP.NET MVC による

サイト構築例

まだまだ増加中！

15

StackOverflow.com ゕーキテクチャー

トラフゖック 1600万ページビュー / 月 300 万ユニークビジター / 月 600万ビジター / 月

16

17

www.theshodo.com

サーバーサド ASP.NET MVC 3 Windows Azure SQL Azure Azure Storage Blob/Table クラゕントサド HTML5, CSS3, SVG IE9 新機能

その他の採用事例 Microsoft も Web Form から置き換えに…

みにもば携帯端末向け Twitter クラゕント

http://minimoba.jp/

MSDN / TechNetオンラン

18

http://minimoba.jp/

http://minimoba.jp/

ASP.NET MVC 概要～Rails を追いかける～

Rails のカルチャーに沿って概要を紹介

19

ASP.NET MVC 新しいWebゕプリ開発フレームワーク

ASP.NET MVC 1.0（2009年4月） Visual Studio 2008の追加コンポーネントとしてリリース

ASP.NET MVC 2（2010年4月） ASP.NET 4 (Visual Studio 2010) に標準搭載

ASP.NET MVC 3（2011年1月）

20

HTML ベースの UI 開発が容易に UI と処理ロジックが疎結合に単体テスト (TDD) が容易に URL ルーティングが可能に

ASP.NET MVC 3 ~Tools Updateはマナーバージョンゕップに近い~

ASP.NET MVC 3 Tools Update ランタム (System.Web.Mvc.dll) は変更なしプロジェクトテンプレートの機能強化

プロジェクト作成・コントローラー作成などが変化！

21

Windows 認証OK

HTML5 に沿うテンプレート

jQuery もASP.NETへ～スクリプトフゔルが凄いことに！～

jQuery が標準搭載 AJAX・UI・検証など一通り

標準で揃ってます

ASP.NET MVC 開発者は jQuery の知識も必須になる

HTML5 ゕプリ開発時のサポートとなる Modernizr スクリプトも有

22

Demo ～ASP.NET MVC の構成を見てみよう～

23

後だし必勝の法則！

Rails/Django/Tapestry などのメジャーなフレームワークを研究し、概念を取り込んでいる

24

http://weblogs.asp.net/scottgu/archive/2008/05/27/asp-net-mvc-preview-3-release.aspx













Rails Culture & Future ～ASP.NET MVC も勿論実装！～

CoC DRY DynamicLanguages ObjectRelationalMapping TestingTools MVC

25

26

CoC DRY

DynamicLanguages ObjectRelationalMapping

TestingTools MVC

Convention over Configuration CoC～規約は設定に勝る～

単純な命名ルールでマッピング可能

27

Controller と View フォルダに関する CoC の関係

Controller と View メソッドとファイルに関するCoC の関係

28

CoC

DRY DynamicLanguages

ObjectRelationalMapping TestingTools

MVC

Do Not Repeat Yourself DRY原則～重複の削除（現実的には削減…？）～

Global.asax の利用コントローラー上での属性の指定スキャフォールデゖング

などなど

29

30

CoC DRY


TestingTools MVC

DynamicLanguages ～IronRuby・IronPython～

Dynamic Language Runtime上で動作する動的言語をサポート！現実的には C# / VB が多い…

31

最新は IronPython 2.7で、 Python 2.7と VS 2010対応が含まれている

最新は IronRuby 1.1.3で、 Ruby 1.9.2と VS 2010対応が含まれている

32

CoC DRY

DynamicLanguages

ObjectRelationalMapping TestingTools

MVC

ObjectRelationalMapping ～エンテゖテゖの活用～

ADO.NET Entity Framework Entity Framework 4.1 Code First

LINQ to SQL

発展形として WCF Data Services もある

33

WCF Data Services Restfulなデータ提供サービス

CRUD 操作できる RESTful なサービスサービス層から DAL へ直接ゕクセス可能データ共有プロトコルの Odata を使用

34

OData

詳しくは、小野さんのセッションで！

35

CoC DRY


TestingTools MVC

TestingTools ～基本は限られてはいる～

MSTest Nunit

Behavior Driven Development もできる！ SpecFlow+WatiN 元祖 mvcConf でも出ていました

36

37

CoC DRY


TestingTools MVC

Model View Controller

38

HTTP Request

1. Controller がリクエストを受信

2. Controller が Model を初期化

4. Controller が View を呼び出す

5. View が Model を参照

6. View がレスポンスを送信

Model

Controller

View HTTP Response

入力と制御

プレゼンテーション

データ表現とビジネスロジック

3. ビジネスロジックを実行

Model / View / Controller 実装コード例

39

View (.aspx)

Model と Controller public class HomeController : Controller { MyModelService myModel = new MyModelService(); public ActionResult Edit(int id) { MyData md = myModel.GetData(id); return View(md); } }

<html> <p><%: Html.TextBox("data", Model.data) %></p> </html>

Model の準備

HTTP リクエストによるメソッドの実行

(例: Home/Edit/5 )

View の呼び出しロジックの実行と

データ取得

HTML タグ生成とデータの埋め込み

検証機能 DataAnnotationを利用してサーバーとクラゕントサド検証を実現！

属性指定で簡単検証カスタム属性や

リモート属性も！ 40

Entity Data Model

エンテゖテゖ型の Partial クラス

（DataAnnotation 宣言）

Controller （サーバーサド）

View （クラゕントサド）

検証適用

検証宣言

１

２

３

Model

検証機能～実装コード例：ポントはメタデータクラスにあり～

41

Model // モデルクラスに関連付けるメタデータクラスの指定 [MetadataType(typeof(publishers_validation))] public partial class publishers { } // publishersエンテゖテゖ型のプロパテゖを記載 public class publishers_validation { [Required] [StringLength(5, ErrorMessage="2文字で入力してください。")] public string pub_name { get; set; } }

DataAnnotation を指定したクラスを記載モデルクラス名を部分クラスで記載

属性を指定

該当のプロパテゖ

属性を指定

Model

HTMLを自由自在に操作～Web フォームよりも Web 標準に対応しやすい～

意図した HTML が生成されるので Web 標準に対応しやすい結果として HTML5 対応も Web フォームに比べ

て容易 ViewState や、サーバーコントロールによる

もソース出力が無いのでクリーンなソース！携帯用サトも作成しやすい

• ※Web フォームを否定しているわけではありません！

View

詳しくは、勇さん、竹原さんのセッションで！

HTMLヘルパーメソッド～入力や検証の記載をフォロー～

ビューとコントローラー間のデータの受け渡しを簡単に実現するメソッド値をもとに HTML 出力強い型付によりンテリセンスの利用も可能検証機能も有り簡単に利用可能

43

View

View (.aspx) <html> <p><%: Html.TextBox("data", Model.data) %></p> </html>

HTML タグ生成とデータの埋め込み

44

Razor (レイザー) !

View

Razor より早く！より効率的に！

ページ記述のための新しい構文 (記法)

便利なヘルパーラブラリと容易な拡張 C# (.cshtml), Visual Basic (.vbhtml) をサポート

45

@{ var title = "Hello Razor"; } <h1>@title</h1> <ul> @foreach (var item in products) { <li>@item.Name</li> } </ul> <p>Time is @DateTime.Now</p>

.cshtml

詳しくは、芝村さんのセッションで！

View

ゕクションフゖルター活用必須の宣言フゖルター

コントローラー呼び出しの前後に宣言されたフゖルタ属性のコードを適用！

HandleError、Authorize、OutputCacheなどの他に、カスタムフゖルターも作成できる

46

Controller

Controller [OutputCache(Duration=60, VaryByParam =“none”)] public ActionResult Edit() { … return View(); }

モデルバンダ― ビューとコントローラー間にモデルを渡す仕組み

WPF / Silverlight で実現しているデータバンデゖングを ASP.NET MVC で実現する仕組み

基本的にHttpContext から値を取り出してモデルクラスを復元いろいろなデータをもとに値を復元できる

Controller & View

詳しくは、小野さんのセッションで！

URLルーテゖング URLを自由自在に操作！

ゕプリケーション内の URL をここで設定

48

Global.asax

public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.MapRoute( "Default", // ルート名 "{controller}/{action}/{id}", // パラメーター付きの URL new { controller = "Home", action = "Index", id = UrlParameter.Optional } // パラメーターの既定値 ); }

特定 URL ルートの処理を停止させる

ルーテゖングルートをルートコレクションに追加上記では http://xxx/Home/Index へとルーテゖング

http://xxx/Home/Index



Demo ～実際にMVCアプリを作ってみよう～

49

NuGetでパッケージをゲット！ RubyでいうところのGem

Visual Studio の拡張機能 (Package Manager) オープンソースラブラリの容易な利用 GUI / コンソールの 2 通りの利用方法 NuGet gallery を利用したヘルパーの公開

http://nuget.org/

50

詳しくは、芝村さんのセッションで！

まとめ

51

Webフォーム V.S. MVC ご利用は計画的に

52

Web フォーム

豊富なサーバーコントロール

イベント駆動型プログラミング

ASP.NET MVC

HTML ベースの UI 開発

MVC パターン

D & D 配置容易な UI 開発

Web 標準志向テスト駆動開発

Web フォーム V.S. MVC 特徴と使い分け

ASP.NET MVC と Web フォームは使い分けの判断が重要プロジェクトの要求、ゕプリケーションの仕様、

エンジニゕのスキル、開発手法、チーム編成など ...

53

Web フォーム ASP.NET MVC

豊富なコントロールを使用可能 HTML ベースの UI 開発

ベント駆動型プログラミングゕクションメソッドによるリクエスト処理

ViewState やポストバック処理を多用する ViewState やポストバック処理を使用しない

ロジックの検証に Web サーバーが必要ロジックの検証に Web サーバーが不要 (テスト駆動開発をサポート)

まとめ～一歩進んだ Web 開発のために～

54

標準技術を生かした Web 開発

ASP.NET の豊富な機能を生かした Web 開発

appendix.

55

ASP.NET MVC学習コンテンツ

ASP.NET MVC 3 開発入門 - ンデックス http://d.hatena.ne.jp/shiba-yan/20110208/1297096899

Edtter(HOL込) http://edtter.codeplex.com/

ASP.NET MVC Music Store チュートリゕル http://msdn.microsoft.com/ja-jp/asp.net/gg315881

56

http://d.hatena.ne.jp/shiba-yan/20110208/1297096899




http://edtter.codeplex.com/

http://edtter.codeplex.com/

http://msdn.microsoft.com/ja-jp/asp.net/gg315881




•Visual Studio 2010

•Visual Studio 2008 •LINQ 対応

•Visual Studio .NET •Visual Studio .NET 2003 •.NET 対応の ASP として登場


57

ASP.NET Web Form 1.0/1.1


•Visual Studio 2005 •サーバーコントロールの拡充 •データソースコントロール等 •AJAX 対応 ASP.NET MVC 1.0


•MVC開発のサポート

ASP.NET Web Form 4

ASP.NET MVC 2.0 •検証機能の強化など •jQuery の統合

ASP.NET MVC 3

•Razor の追加など

Web ゕプリの需要が高まり、AJAX も実用へ

RESTful な URL Web 標準準拠のソースが

重視されやすくなる HTML5 対応への需要

クラウドへのデプロなど…

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

Documents

Mvc conf session_1_osada