mvcConf @:Japan ～ ASP.NET MVC ブートキャンプ ～ の資料です

1. mvcConf @:Japan
～ ASP.NET MVC ブート キャンプ ～
最初に全体を押さえよう
ASP.NET MVC オーバービュー
株式会社シーエスゕ゗
CLR/H・せきゅぽろ代表
長田 直樹 (おさだ なおき)
cs.gogo-asp.net/blogs/naoki/ twitter.com/naoki0311

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

3. Agenda
1. ASP.NET と Visual Studio
2. ASP.NET MVC によるサ゗ト構築例
3. ASP.NET MVC 概要～Rails を追いかける～
4. まとめ
3

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

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

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

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

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

9. ASP.NETの歴史
～ASP.NET MVC は実は最近の登場～
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 Form 4
9

10. ASP.NETの歴史
～ASP.NET MVC は実は最近の登場～
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 などの統合
HTML5 対応や
•Razor 対応
携帯電話ゕプリへの需要
•Tools Update にて
クラウドへの
•Entity Framework 4.1 統合
デプロ゗など…
•スキャフォールデゖング強化
10

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

12. 本来 Web 開発に必要な知識
HTTP
URI
HTML
REST 12

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

14. デプロ゗先は選択へ
～Windows Azure も加わりました～
ASP.NET Windows
Web Form Azure
ASP.NET AJAX Platform
ASP.NET
動的データ
Windows
ビルド デプロ゗ Server
ASP.NET MVC + IIS
ゕプリケーション
jQuery
14

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

16. 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 新機能 17

18. その他の採用事例
Microsoft も Web Form から置き換えに…
 みにもば
 携帯端末向け Twitter クラ゗ゕント
 http://minimoba.jp/
 MSDN / TechNetオンラ゗ン
18

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

20. 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 ルーティング が可能に
20

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

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

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

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

25. Rails Culture & Future
～ASP.NET MVC も勿論実装！～
 CoC
 DRY
 DynamicLanguages
 ObjectRelationalMapping
 TestingTools
 MVC
25

26. CoC
DRY
DynamicLanguages
ObjectRelationalMapping
TestingTools
MVC
26

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

28. CoC
DRY
DynamicLanguages
ObjectRelationalMapping
TestingTools
MVC
28

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

30. CoC
DRY
DynamicLanguages
ObjectRelationalMapping
TestingTools
MVC
30

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

32. CoC
DRY
DynamicLanguages
ObjectRelationalMapping
TestingTools
MVC
32

33. ObjectRelationalMapping
～エンテゖテゖの活用～
 ADO.NET Entity Framework
 Entity Framework 4.1 Code First
 LINQ to SQL
 発展形として WCF Data Services もある
33

34. WCF Data Services
Restfulなデータ提供サービス
 CRUD 操作できる RESTful なサービス
 サービス層から DAL へ直接ゕクセス可能
 データ共有プロトコルの Odata を使用
OData
34

35. CoC
DRY
DynamicLanguages
ObjectRelationalMapping
TestingTools
MVC
35

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

37. CoC
DRY
DynamicLanguages
ObjectRelationalMapping
TestingTools
MVC
37

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

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

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

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

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

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

44. View
Razor (レイザー) ! 44

45. Razor View
より早く！より効率的に！
 ページ記述のための新しい 構文 (記法)
@{ var title = "Hello Razor"; } .cshtml
<h1>@title</h1>
<ul>
@foreach (var item in products) {
<li>@item.Name</li>
}
</ul>
<p>Time is @DateTime.Now</p>
 便利なヘルパー ラ゗ブラリと容易な拡張
 C# (.cshtml), Visual Basic (.vbhtml) をサポート
45

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

47. モデルバ゗ンダ―
Controller
& View
ビューとコントローラー間にモデルを渡す仕組み
 WPF / Silverlight で実現しているデータバ゗ン
デゖングを ASP .NET MVC で実現する仕組み
 基本的にHttpContext から値を取り出してモデル
クラスを復元
 いろいろなデータをもとに値を復元できる

48. URLルーテゖング
URLを自由自在に操作！
 ゕプリケーション内の URL をここで設定
Global.asax
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute( 特定 URL ルートの
"Default", // ルート名 処理を停止させる
"{controller}/{action}/{id}", // パラメーター付きの URL
new { controller = "Home", action = "Index", id =
UrlParameter.Optional } // パラメーターの既定値
);
ルーテゖングルートをルートコレクションに追加
}
上記では http://xxx/Home/Index へとルーテゖング 48

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

50. NuGetでパッケージをゲット！
RubyでいうところのGem
 Visual Studio の拡張機能 (Package Manager)
 オープン ソース ラ゗ブラリの容易な利用
 GUI / コンソール の 2 通りの利用方法
 NuGet gallery を利用したヘルパーの公開
http://nuget.org/
50

51. まとめ
51

52. Webフォーム V.S. MVC
ご利用は計画的に
Web フォーム
D & D 配置
容易な UI 開発  豊富なサーバー コントロール
 イベント駆動型プログラミング
ASP.NET MVC
Web 標準志向
 HTML ベースの UI 開発 テスト駆動開発 52
 MVC パターン

53. Web フォーム V.S. MVC
特徴と使い分け
 ASP.NET MVC と Web フォーム は使い分けの判断が重要
 プロジェクトの要求、ゕプリケーションの仕様、
エンジニゕのスキル、開発手法、チーム編成など ...
Web フォーム ASP.NET MVC
豊富なコントロール を使用可能 HTML ベース の UI 開発
゗ベント駆動型プログラミング ゕクション メソッドによるリクエスト処理
ViewState やポストバック処理を多用する ViewState やポストバック処理を使用しない
ロジックの検証に Web サーバーが不要
ロジックの検証に Web サーバーが必要
(テスト駆動開発をサポート)
53

54. まとめ
～一歩進んだ Web 開発のために～
標準技術を生かした Web 開発
ASP.NET の豊富な機能を生かした Web 開発
54

55. appendix.
55

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

57. ASP.NETの歴史
～ASP.NET MVC は実は最近の登場～
ASP.NET Web Form 1.0/1.1
•Visual Studio ASP.NET Web Form 2.0
.NET
•Visual Studio •Visual Studio ASP.NET Web Form 3.5
.NET 2003 2005
•サーバーコント •Visual Studio ASP.NET Web Form 4
ロールの拡充 2008
•.NET 対応の •LINQ 対応 •Visual Studio
ASP として登場 •データソース 2010
コントロール等
•AJAX 対応 ASP.NET MVC 1.0
Web ゕプリの需要が •MVC開発 ASP.NET MVC 2.0
高まり、AJAX も実用へ のサポート
•検証機能の ASP.NET MVC 3
強化など
RESTful な URL •jQuery の •Razor の追加など
Web 標準準拠のソースが 統合 HTML5 対応への需要
重視されやすくなる クラウドへのデプロ゗など…
57

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