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

最初に全体を押さえよう ASP.NET MVC オーバービュー株式会社シーエスアイ　 CLR/H・せきゅぽろ代表長田　直樹 (おさだなおき) cs.gogo-asp.net/blogs/naoki/twitter.com/naoki0311

セッションの目的とゴール • 目的 • ASP.NET の全体像を知る • ASP.NETMVC の概要をおさえる • ゴール • ASP.NET アプリケーションの特色を話せる • ASP.NET MVC のアーキテクチャの説明できる • 本日全てのセッションの足掛かり部分を会得する

Agenda • ASP.NET と Visual Studio • ASP.NET MVCによるサイト構築例 • ASP.NET MVC 概要～Rails を追いかける～ • まとめ

ASP.NET と Visual Studio まずはおさらい

ASP.NETの歴史～ASP.NETMVC は実は最近の登場～ ASP.NET Web Form 1.0 / 1.1 • Visual Studio.NET • Visual Studio.NET 2003 • .NET 対応の ASP として登場出始めという事で痒い所に手が届き辛い時代 2002年～2003年頃

ASP.NETの歴史～ASP.NETMVC は実は最近の登場～ ASP.NET Web Form 1.0 / 1.1 ASP.NET Web Form 2.0 • Visual Studio2005 • サーバーコントロールの拡充 • データソースコントロール等 • AJAX 対応 Web アプリの需要が高まり、AJAX も実用へ 2005年～2008年頃

ASP.NETの歴史～ASP.NETMVC は実は最近の登場～ ASP.NET Web Form 1.0 / 1.1 ASP.NET Web Form 2.0 ASP.NET Web Form3.5/3.5 SP1 • Visual Studio 2008 • LINQ 対応 • SP1にて • ADO.NET Entity Framework 対応 • WCF Data Services 対応 • ASP.NET 動的データ対応 Web Form が一種の完成形へ RESTful な URL や Web 標準が ”特に “ 意識されやすくなる

ASP.NETの歴史～ASP.NETMVC は実は最近の登場～ ASP.NET Web Form 3.5 / 3.5 SP1 ASP.NET MVC 1.0 • Visual Studio 2008 • MVC 開発のサポート • RESTfulな URL • HTML ヘルパー対応 • 単体テストの容易性 Web Form では対応しきれないニーズに応える形で誕生

ASP.NETの歴史～ASP.NETMVC は実は最近の登場～ ASP.NET Web Form 3.5 / 3.5 SP1 ASP.NET MVC 1.0 ASP.NET MVC 2.0 • Visual Studio 2010 /2008 • .NET 3.5 / 4 両方に対応 • 検証機能の強化 • 強く型付されたヘルパー • エリア機能 • jQueryの統合業務で活用できるレベルに到達！ ASP.NET Web Form4

ASP.NETの歴史～ASP.NETMVC は実は最近の登場～ ASP.NET Web Form 3.5 / 3.5 SP1 ASP.NET MVC 1.0 ASP.NET MVC 2.0（ASP.NET Web Form 4） ASP.NET MVC 3 • Visual Studio 2010 • jQuery UI などの統合 • Razor 対応 • Tools Updateにて • Entity Framework 4.1 統合 • スキャフォールディング強化 HTML5 対応や携帯電話アプリへの需要クラウドへのデプロイなど…

ASP.NETとVisual Studioフレームワーク構成図 .NET Framework 4 ASP.NET 4 Web フォーム ASP.NET MVC 2,3 ASP.NET AJAX 動的データ jQuery

本来 Web 開発に必要な知識 • HTTP • URI • HTML • REST

ASP.NETとは？Web 開発のフレームワーク • 動的 Web アプリケーションの開発・実行基盤 • サーバー側で動的に HTML を生成 (ASP, PHP 等と同じ) • さまざまな形態の Web 開発に対応 • 個人規模 Web サイト ⇔大規模 Web アプリケーション ASPX Razor クライアント処理ロジック動的生成 Web ブラウザー ASP.NET サーバー HTML

デプロイ先は選択へ～Windows Azure も加わりました～ ASP.NET Windows Azure Platform Web Form ASP.NET AJAX ASP.NET 動的データ Windows Server + IIS ビルドデプロイ ASP.NET MVC アプリケーション jQuery 詳しくは、勇さんのセッションで！

ASP.NET MVCによる サイト構築例まだまだ増加中！

StackOverflow.comアーキテクチャー • トラフィック • 1600万ページビュー / 月 • 300 万ユニークビジター / 月 • 600万ビジター /月

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オンライン

ASP.NET MVC 概要～Rails を追いかける～ Rails のカルチャーに沿って概要を紹介

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月） • HTML ベースの UI 開発が容易に • UI と処理ロジックが疎結合に • 単体テスト (TDD) が容易に • URL ルーティングが可能に

ASP.NET MVC 3~Tools Updateはマイナーバージョンアップに近い~ • ASP.NET MVC 3 Tools Update • ランタイム (System.Web.Mvc.dll) は変更なし • プロジェクトテンプレートの機能強化 • プロジェクト作成・コントローラー作成などが変化！ Windows 認証OK HTML5 に沿うテンプレート

jQueryもASP.NETへ～スクリプトファイルが凄いことに！～jQueryもASP.NETへ～スクリプトファイルが凄いことに！～ • jQuery が標準搭載 • AJAX・UI・検証など一通り標準で揃ってます • ASP.NETMVC 開発者はjQuery の知識も必須になる • HTML5 アプリ開発時のサポートとなるModernizrスクリプトも有

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

後だし必勝の法則！ • Rails/Django/Tapestry などのメジャーなフレームワークを研究し、概念を取り込んでいる http://weblogs.asp.net/scottgu/archive/2008/05/27/asp-net-mvc-preview-3-release.aspx

RailsCulture & Future～ASP.NET MVC も勿論実装！～ • CoC • DRY • DynamicLanguages • ObjectRelationalMapping • TestingTools • MVC

CoC DRY DynamicLanguagesObjectRelationalMapping TestingTools • MVC

Convention over ConfigurationCoC～規約は設定に勝る～ • 単純な命名ルールでマッピング可能 Controller と Viewフォルダに関する CoCの関係 Controller と View メソッドとファイルに関するCoCの関係

Do Not Repeat YourselfDRY原則～重複の削除（現実的には削減…？）～ • Global.asaxの利用 • コントローラー上での属性の指定 • スキャフォールディングなどなど

DynamicLanguages～IronRuby・IronPython～ • Dynamic Language Runtime上で動作する動的言語をサポート！ • 現実的には C#/ VB が多い… 最新は IronRuby 1.1.3で、 Ruby 1.9.2とVS 2010対応が含まれている最新は IronPython 2.7で、 Python 2.7とVS 2010対応が含まれている

ObjectRelationalMapping～エンティティの活用～ • ADO.NET Entity Framework • Entity Framework 4.1CodeFirst • LINQ to SQL • 発展形として WCF Data Services もある

WCF Data ServicesRestfulなデータ提供サービス • CRUD 操作できる RESTfulなサービス • サービス層から DAL へ直接アクセス可能 • データ共有プロトコルの Odataを使用クライアントサーバー WCF Data Services アプリケーション EF 越しにDB にアクセス OData 詳しくは、小野さんのセッションで！

CoC DRY DynamicLanguagesObjectRelationalMapping • TestingTools • MVC

TestingTools～基本は限られてはいる～ • MSTest • Nunit • Behavior Driven Development もできる！ • SpecFlow+WatiN • 元祖 mvcConfでも出ていました

Model View Controller Controller 2. Controller が Model を初期化 1. Controller がリクエストを受信 3. ビジネスロジックを実行 HTTP Request Model 入力と制御 4. Controller が View を呼び出すプレゼンテーション View HTTP Response データ表現とビジネスロジック 5. View が Model を参照 6. View が　レスポンスを送信

Model / View / Controller実装コード例 Model の準備 Model と Controller publicclassHomeController : Controller { MyModelServicemyModel = newMyModelService(); publicActionResultEdit(int id) { MyDatamd = myModel.GetData(id); returnView(md); } } HTTP リクエストによるメソッドの実行 (例: Home/Edit/5) ロジックの実行とデータ取得 View の呼び出し HTML タグ生成とデータの埋め込み View (.aspx) • <html> • <p><%:Html.TextBox("data", Model.data) %></p> • </html>

Model 検証機能DataAnnotationを利用してサーバーとクライアントサイド検証を実現！ • 属性指定で簡単検証 • カスタム属性やリモート属性も！１３ Entity Data Model Controller（サーバーサイド） View （クライアントサイド）検証適用検証宣言２エンティティ型の Partial クラス（DataAnnotation宣言）

Model 検証機能～実装コード例：ポイントはメタデータクラスにあり～ Model // モデルクラスに関連付けるメタデータクラスの指定 • [MetadataType(typeof(publishers_validation))] • publicpartial classpublishers • { • } • // publishersエンティティ型のプロパティを記載 • public class publishers_validation • { • [Required] • [StringLength(5,ErrorMessage="2文字で入力してください。")] • public stringpub_name { get; set; } • } DataAnnotationを指定したクラスを記載モデルクラス名を部分クラスで記載属性を指定属性を指定該当のプロパティ

View HTMLを自由自在に操作～Web フォームよりも Web 標準に対応しやすい～ • 意図した HTML が生成されるので Web標準に対応しやすい • 結果として HTML5 対応も Web フォームに比べて容易 • ViewState や、サーバーコントロールによるもソース出力が無いのでクリーンなソース！ • 携帯用サイトも作成しやすい • ※Web フォームを否定しているわけではありません！詳しくは、勇さん、竹原さんのセッションで！

View HTMLヘルパーメソッド～入力や検証の記載をフォロー～ • ビューとコントローラー間のデータの受け渡しを簡単に実現するメソッド • 値をもとに HTML 出力 • 強い型付によりインテリセンスの利用も可能 • 検証機能も有り簡単に利用可能 HTML タグ生成とデータの埋め込み View (.aspx) • <html> • <p><%:Html.TextBox("data", Model.data) %></p> • </html>

@ View Razor (レイザー) !

View Razorより早く！より効率的に！ • ページ記述のための新しい構文 (記法) • 便利なヘルパーライブラリと容易な拡張 • C# (.cshtml), Visual Basic (.vbhtml) をサポート @{ var title = "Hello Razor"; } <h1>@title</h1> <ul> @foreach (var item inproducts) { <li>@item.Name</li> } </ul> <p>Time is @DateTime.Now</p> .cshtml 詳しくは、芝村さんのセッションで！

Controller アクションフィルター活用必須の宣言フィルター • コントローラー呼び出しの前後に宣言されたフィルタ属性のコードを適用！ • HandleError、Authorize、OutputCacheなどの他に、カスタムフィルターも作成できる Controller • [OutputCache(Duration=60,VaryByParam =“none”)] • public ActionResult Edit() • { • … • return View(); }

Controller & View モデルバインダ―ビューとコントローラー間にモデルを渡す仕組み • WPF / Silverlight で実現しているデータバインディングを ASP.NET MVC で実現する仕組み • 基本的にHttpContext から値を取り出してモデルクラスを復元 • いろいろなデータをもとに値を復元できる詳しくは、小野さんのセッションで！

URLルーティングURLを自由自在に操作！ • アプリケーション内の URL をここで設定 Global.asax public static voidRegisterRoutes(RouteCollectionroutes) { 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へとルーティング

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

NuGetでパッケージをゲット！RubyでいうところのGemNuGetでパッケージをゲット！RubyでいうところのGem • Visual Studio の拡張機能 (Package Manager) • オープンソースライブラリの容易な利用 • GUI / コンソールの 2 通りの利用方法 • NuGet gallery を利用したヘルパーの公開http://nuget.org/ 詳しくは、芝村さんのセッションで！

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