SlideShare a Scribd company logo
1 of 63
Download to read offline
マイクロソフト株式会社
デベロッパー & プラットフォーム統括本部
エバンジェリスト
井上 章(いのうえ あきら)
http://blogs.msdn.com/chack/
http://twitter.com/chack411/
1
ASP.NET MVC と jQuery で
実践する標準志向 Web 開発
アジェンダ
~ 本日の内容 ~
2
• JavaScript と jQuery
• ASP.NET MVC ~ 概要・入門編 ~
• ASP.NET MVC ~ 活用・応用編 ~
• 事例紹介
• まとめ
JavaScript と jQuery
3
注目される JavaScript
Technology Radar January 2010
• Language 分野で
高い注目度
出典: Technology Radar January 2010 © ThoughtWorks
https://www1.vtrenz.net/imarkownerfiles/ownerassets/
1013/Technology%20Radar%20Jan%202010.pdf
While JavaScript first appeared in
1995, it is only in the past couple of
years that libraries such as Prototype
and jQuery have helped the
language become more accessible to
a wider developer audience. As
developers continue to embrace
JavaScript for developing rich user
web applications, we increasingly
hold JavaScript in the same level of
esteem as any other production
language, ensuring that scripts are
adequately tested, refactored and
maintained.
JavaScript の実装
オーバー ビュー
• JavaScript にはさまざまな実装が存在
– ECMAScript (ECMA-262 言語仕様)
として標準化
• 最新は ECMAScript 5
ECMA-262 5th Edition, December 2009
– JScript
• ECMA-262 3rd Edition のマイクロソフト実装
JavaScript と Visual Studio
デバッグ対応
ブレーク
ポイント
ツールヒント
による変数の
ウォッチ
スクリプト
ドキュメント
イミディエイト
ウィンドウ
ブレーク
ポイント一覧
ウォッチ
ウィンドウ
jQuery のサポート
Visual Studio と jQuery
• 高速・軽量な JavaScript ライブラリ
– DOM 操作 / CSS 操作 / Ajax 処理を容易に
– オープンソース
• jQuery 公式サイト http://jquery.com/
– 最新バージョンは 1.4.3
• Visual Studio と jQuery
– jQuery 1.4.1 が標準搭載
• Web フォーム や MVC プロジェクト
で標準採用
• インテリセンスとコードスニペット
にも対応 (詳細は Appendix を参照)
$(function() {
$('#button1').click(function() {
$('#div1').fadeIn('slow');
});
});
8
ASP.NET 4 構成
フレームワーク関係図
9
.NET Framework 4
ASP.NET 4
Web フォーム
ASP.NET
MVC 2
ASP.NET AJAX
動的データ
注目される ASP.NET MVC
Technology Radar January 2010
• 高い注目度 (Tool 分野)
• 試用から採用へ
出典: Technology Radar January 2010 © ThoughtWorks
https://www1.vtrenz.net/imarkownerfiles/ownerassets/
1013/Technology%20Radar%20Jan%202010.pdf
This is an exciting development in
the .NET space from Microsoft, both
in the programming model and in
the open source license under which
Microsoft has released the library.
ASP.NET MVC is similar to MVC
frameworks on the Java platform
and is a move away from the
ASP.NET Web Forms approach to one
that supports greater levels of
automated testing.
10
What is MVC ?
デザイン パターン
• Model
データとビジネス ロジック を表現
• View
Model から取得したデータを
プレゼンテーション (UI) へ出力する
• Controller
ユーザーからの入力を受付け
View と Model を制御する
M
C
V
11
MVC オーバービュー
Web アプリにおける MVC パターン
12
HTTP Request
1. Controller が
リクエストを受信
2. Controller が
Model を初期化
3. ビジネス ロジック
を実行
4. Controller が View
を呼び出す
5. View が Model
を参照
6. View がレスポンス
を送信
Model
Controller
ViewHTTP Response
入力と制御
プレゼンテーション
データ表現と
ビジネス ロジック
ASP.NET MVC 2
新しい Web アプリ開発フレームワーク
• 2010 年 3 月 RTM リリース (for VS 2008 SP1)
• Visual Studio 2010 に標準搭載
• オープン ソース (CodePlex)
各モジュールが 疎結合 に
単体テスト (TDD) が容易に
HTML ベース のページ開発が容易に
URL ルーティング が可能に
13
View の特徴と HTML 生成
埋め込みコード ブロックの利用
• View における HTML 生成 (View エンジン) は
既定で Web フォーム (.aspx) を使用
– System.Web.Mvc.WebFormViewEngine クラス
– 基本的に Web サーバー コントロールは使用しない
(ポストバックや ViewState は使用しない)
– ヘルパー メソッドで HTML タグ ブロックを生成
View (.aspx)
<html>
<div><%: DateTime.Now.ToString() %></div>
<div><%: Html.TextBox("data", Model.data) %></div>
</html>
埋め込み
コード ブロック
14
HTML ヘルパー メソッド
HTML 生成を助ける関数群
メソッド名 概要
ActionLink アクション名などから a タグを生成
BeginForm form タグを生成
TextBox
input タグによる入力フィールドを生成
TextBoxFor
…
…<%: Html.ActionLink("Go to Home", "Index") %>
<%: Html.TextBox("message", model.Message) %>
<%: Html.TextBoxFor(model => model.Message) %>
使用例
15
Controller と View の命名ルール
コンセプト「規約は設定に勝る」
• CoC (Convention over Configuration)
• 命名ルールによってモジュール間の結合を疎に
– コードや設定ファイルなどで関連付けない
public class HomeController : Controller
{
public ActionResult Index()
{
ViewData["Message"] = "MVC";
return View();
}
}
アクション名
Controller 名
Controller クラス
16
テスト駆動開発 (TDD)
Controller Action の単体テストが容易に
• 単体テストには IIS などの Web サーバー は不要
• Visual Studio 2008/2010 Professional 以上が必要
• NUnit, MBUnit, XUnit なども利用可能
• テスト プロジェクトも同時に作成可能
– テスト コードの雛型が自動生成
[TestMethod]
public void Index() {
HomeController ctrl = new HomeController();
ViewResult result = ctrl.Index() as ViewResult;
ViewDataDictionary viewData = result.ViewData;
Assert.AreEqual("Hello", viewData["Message"]);
}
17
URL ルーティング
クリーン URL で SEO 対策
• ASP.NET MVC では既定でルーティングが有効
– System.Web.Routing 名前空間
static void RegisterRoutes(RouteCollection routes) {
routes.MapRoute(
"Default",
"{controller}/{action}/{id}",
new { controller = "Car",
action = "List",
id = UrlParameter.Optional }
);
}
void Application_Start() {
RegisterRoutes(RouteTable.Routes);
}
例: http://example.com/Products/Car/Details/5
ルーティング定義
既定値
(省略時の値)
18
ASP.NET MVC における AJAX
非同期処理と部分更新の実装方法
• AJAX ヘルパー メソッド を利用
• jQuery を利用
19
<%: Ajax.ActionLink("データの表示...", "ShowData",
new AjaxOptions {UpdateTargetId = "results"}) %>
<% using (Ajax.BeginForm("UpdateList",
new AjaxOptions {UpdateTargetId = "results"})) { %>
...
<% } %>
Data Annotation バリデーション
Model 中心の入力検証
• 宣言型で コードすっきり バリデーション
Model
View
public class MyData {
[DisplayName("年齢")]
[Required(ErrorMessage = "{0}を入力してね")]
[Range(0, 100)]
public int Age { get; set; }
}
<%: Html.TextBoxFor(model => model.Age) %>
<%: Html.ValidationMessageFor(model => model.Age) %>
Controller
public ActionResult Create(MyData myData) {
if (ModelState.IsValid) { … }
}
属性ベースで
検証ルールを指定
エラー メッセージも
指定可能
モデル バインドと
検証実行 20
RenderPartial と RenderAction
View の部分レンダリング
• RenderPartial
– 部分 View をレンダリング
• RenderAction
– コントローラー アクションの実行結果をレンダリング
View (.aspx)
<html>
<% RenderPartial(…); %>
</html>
View (.ascx)
<div>…</div>
View (.aspx)
<html>
<% RenderAction(…); %>
</html>
Controller
ActionResult Ad()
M
M
M
M
Html.RenderPartial(ViewName, … )
Html.RenderAction(ActionName, … )
※ M は Model の略 21
セキュリティ対策
ASP.NET MVC でも忘れずに
• Controller 実行時の認証の要求
– [Authorize] 属性 (ActionFilter)
• HTML Encoding 構文 (WebFormViewEngine)
– <%: SomeStringData %>
• Cross Site Scripting (XSS)
– Microsoft Web Protection Library
http://wpl.codeplex.com/
• Cross Site Request Forgeries (CSRF)
– Html.AntiForgeryToken()
– [ValidateAntiForgeryToken]
• JSON Hijacking
– JsonResult
– return Json(data, JsonRequestBehavior.DenyGet);
22
23
MVC フレームワークの拡張
多くの拡張ポイントと容易なカスタマイズ
odel
ontroller iew Response
ModelBinder
ActionFilter
ActionResult
ViewEngine
HtmlHelper
ValidationAttribute
Request
Routing
24
View エンジンのカスタマイズ (1)
ViewEngine = HTML 生成テンプレート エンジン
• View エンジンの変更 (Razor, NHaml, Spark, ...)
• オリジナル View エンジンの作成
• View の検索パスの変更
などのカスタマイズが可能
View Engine
ontroller iew ResponseRequest
25
HTML5 対応や
携帯向けサイトの
HTML 生成が容易
View エンジンのカスタマイズ (2)
さまざまな View エンジンの記法
• WebFormViewEngine (.aspx 既定)
• NHaml - http://code.google.com/p/nhaml/
– Rails Haml View エンジンの .NET 実装版
• Spark - http://sparkviewengine.com/
– Castle Project - MonoRail 向け View エンジン
<h1><%: product.ProductName %></h1>
<p><%: Html.ActionLink("Add...", "Add") %></p>
%h1= product.ProductName
%p= Html.ActionLink("Add...", "Add")
<h1>${ product.ProductName }</h1>
<p>${ Html.ActionLink("Add...", "Add") }</p>
26
ASP.NET MVC 3
新機能 概要
• Beta (2010 年 10 月 6 日 リリース)
http://go.microsoft.com/fwlink/?LinkID=191795
• 新機能
– Razor, ASPX, … などの View エンジンの選択機能
– ダイナミック View / ViewModel プロパティ
– グローバル Action Filters
– JsonValueProviderFactory と JSON モデル バインド
– ValidationAttribute と IValidatableObject
– 新しい ActionResult 型 と Permanent Redirect
– Dependency Injection (DI) サポート
• ランタイム
– ASP.NET 4 & Visual Studio 2010 以降
27
MVC 3 と Razor View エンジン
Small, Simple, Seamless
• 新しい "Razor 構文" View エンジンの追加
– Razor プロジェクト テンプレート
– [ View の追加 ] ダイアログ での View エンジン選択
• View 毎に使用するエンジンを選択可能
– Razor View 拡張子 (※変更の可能性あり)
• .cshtml (C#) / .vbhtml (VB)
28
.cshtml
"Razor" 構文
Small, Simple, Seamless
• Web ページ (View) の新しい記述構文
– シンプル & クリーン
– タイピング量とコード サイズの低減 (vs. PHP, ASPX)
– 便利な HTML ヘルパーと容易な拡張
– C#, Visual Basic をサポート
@{ string title = "Hello Razor"; }
<h1>@title</h1>
<ul>
@foreach (var item in Model) {
<li>@item.Message</li>
}
</ul>
<p>Time is @DateTime.Now</p>
<p>@Html.ActionLink("Add...", "Add")</p> 29
ASP.NET MVC 事例紹介
30
StackOverflow.com
アーキテクチャー
• トラフィック
– 1600 万 ページ ビュー / 月
– 300 万 ユニーク ビジター / 月
– 600 万 ビジター / 月
• プラットフォーム・テクノロジー
– ASP.NET MVC
– SQL Server 2008
– C#
– Visual Studio 2008 Team Suite
– jQuery
– LINQ to SQL
出典: Stack Overflow Architecture
http://highscalability.com/stack-overflow-architecture
31
国内採用事例のご紹介
こちらも続々と増えてます ...
• 現場入退場管理システム「デイリ」
– 携帯コールによる遠隔地の現場労働時間管理システム
– コムテックス株式会社様 開発
– http://www.ctx.co.jp/deiri_pr/index.html
– システム構成
• Windows Azure (Web Role + SQL Azure)
• ASP.NET MVC + jQuery
• ASP.NET メンバーシップ & ロール管理
• オンプレミス連携 (電話着信処理など)
32
まとめ
33
Web フォーム vs. MVC
特徴と使い分け
• ASP.NET MVC と Web フォーム は
適材適所で使い分けることが重要
• プロジェクトの要求、アプリケーションの仕様、
エンジニアのスキル、開発手法、チーム編成など ...
Web フォーム ASP.NET MVC
豊富なコントロール を使用可能 HTML ベース の UI 開発
イベント駆動型プログラミング
アクション メソッドによる
リクエスト処理
ViewState やポストバック処理を
多用する
ViewState やポストバック処理を
使用しない
ロジックの検証に Web サーバー
が必要
ロジックの検証に Web サーバー
が不要 (テスト駆動開発をサポート)
34
ASP.NET MVC 2
Small + Simple + Seamless = Smart !
ASPX, Razor, ...
M
C
V
35
Appendix.
36
View (Edit.aspx)
Model / View / Controller
実装コード例
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 タグ生成と
データの埋め込み
37
スキャフォールディング機能 (1)
Controller の追加
38
Controllers 上で
右クリック
[コントローラー]
を選択
コントローラー名
追加、更新、削除などの
各アクション メソッドを
自動生成
スキャフォールディング機能 (2)
View の追加
39
ビュー名
モデル クラス
の指定
生成するビューの種類
を選択
アクション メソッド
の上で右クリック
[ビューの追加]
を選択
ビュー データ の利用方法
モデル データをビューに渡すには ...
• ViewDataDictionary クラス
• ViewDataDictionary<TModel> クラス
40
public ActionResult Index() {
ViewData["Name"] = "ジャイケル・マクソン";
ViewData["Song"] = "サラリー";
return View();
} <p><%: ViewData["Name"] %></p>
<p><%: ViewData["Song"] %></p>
public ActionResult Index() {
var artist = new MyArtist();
artist.Name = "ジャイケル・マクソン";
artist.Song = "サラリー";
return View(artist);
} <p><%: ViewData.Model.Name %></p>
<p><%: ViewData.Model.Song %></p>
TempDataDictionary
でリクエスト間での
データ永続化も可
Web.config - <system.web><caching><outputCacheSettings>
出力キャッシュの利用
冗長なサーバー処理の回避
• OutputCacheAttribute (ActionFilter) を利用
– Controller Action の無駄な実行を制御
– アプリケーション パフォーマンスの改善
• キャッシュ プロファイル を利用した設定
– アプリケーションを再ビルドすることなく設定変更可
[OutputCache(Duration=3600, VaryByParam="id")]
public ActionResult Details(int id) {
return View(myModel.GetData(id));
}
id 毎に
1 時間キャッシュ
[OutputCache(CacheProfile="MyCache")]
public ActionResult Index() {…}
<outputCacheProfiles>
<add name="MyCache" duration="3600" … />
</outputCacheProfiles> 41
Templated Helpers
View の部分レンダリング
• データの表示や編集ための部分 View を生成
– DisplayForModel, EditorForModel 等のヘルパー
• テンプレート (部分 View)
として .ascx ファイルを用意
– データ型やクラスに基づいた
部分 View の定義
42
<%@ Page Inherits="ViewPage<MyData>" %>
<%: Html.DisplayForModel() %>
<%: Html.DisplayFor(m => m.Name, "NameTemplate") %>
A) データ型やクラスに基づいたテンプレートの利用
B) 名前付きテンプレートの利用
AsyncController
非同期コントローラーの利用
• AsyncController クラス
– 命名規約による容易な非同期処理の実装が可能
※ View 名には Async / Completed の文字は不要
• 利点
– Web サーバーの他のリクエスト
処理がブロックされない
– 時間のかかるネットワーク I/O
(Web API 呼び出し等) に有効
• 注意点
– 非同期処理はオーバーヘッドが大きい
– 同期処理においてボトル ネックになる部分に適用
:AsyncController object1:
1: 開始
2: 完了
他の処理
開始 : void ActionNameAsync()
終了 : ActionResult ActionNameCompleted()
43
ASP.NET MVC 2
その他の機能
• Areas (区分)
– 単一 MVC プロジェクト内で
アプリケーションを分割
– AreaRegistration.RegisterAllAreas()
• アクション メソッドのデフォルト値
• HTTP Method 属性
– HttpPost, HttpGet, HttpPut, HttpDelete
[HttpPost]
public ActionResult Create(MyData myData) { … }
ActionResult Index([DefaultValue(1)] int id)
ActionResult Index(int id = 1)
44
ActionFilter 拡張
アクション メソッド実行時の拡張ポイント
• アクション メソッドの実行前後に独自機能を追加
• ベース クラス
ActionFilterAttribute : FilterAttribute
• 既存の FilterAttribute 派生クラス
AuthorizeAttribute, ValidateAntiForgeryTokenAttribute,
ChildActionOnlyAttribute, RequireHttpsAttribute ...
使用例
public class LogAttribute : ActionFilterAttribute {
public override void OnActionExecuting(…) {…}
public override void OnResultExecuted(…) {…}
}
[Log]
public class HomeController : Controller {…}
Controller や Action に属性を指定
45
バインドなしの場合
バインドありの場合
ModelBinder とは ?
HTTP リクエスト データの自動バインド
• アクション メソッド 引数への自動バインド
• 既定のバインドは DefaultModelBinder
• 以下のオブジェクト型をバインド
– Model クラス
– プリミティブ型 (String, DateTime, ...)
– コレクション (ICollection<T>, IList<T>, ...)
ActionResult Create() {
string name = Request["Name"];
...
ActionResult Create(MyData myData) {
if (ModelState.IsValid) {
string name = myData.Name;
...
MyData へバインド
46
ModelBinder の登録
ModelBinder 拡張
カスタム機能の追加
• インターフェース : IModelBinder
• ベース クラス : DefaultModelBinder
主な拡張ポイント
object BindModel(…); // モデル バインド実行
object CreateModel(…); // モデル型オブジェクト生成
bool OnModelUpdating(…); // モデル更新開始
void OnModelUpdated(…); // モデル更新完了
bool OnPropertyValidating(…); // プロパティ検証開始
void OnPropertyValidated(…); // プロパティ検証完了
// Application_Start() で下記のいずれかで指定
ModelBinders.Binders.DefaultBinder = new MyBinder();
ModelBinders.Binders.Add(typeof(MyData),new MyBinder());
// または、引数の属性で指定
[ModelBinder(typeof(MyBinder))]
47
ASP.NET MVC 拡張ライブラリ
もっと活用したい ! あなたのために ...
• MVC Contrib
http://mvccontrib.codeplex.com/
– 様々な拡張ライブラリ群
– HTML Helper, Model Binder, Controller, Routing,
Action Result, Action Filter, Unit Test Helper, ...
• T4MVC
http://mvccontrib.codeplex.com/releases/view/41582
– T4 テンプレートを利用した自動コード生成
– View や Controller コード内のリテラル文字列を排除
– インテリセンス利用可 & 容易なコード メンテナンス
<% Html.RenderPartial("Banner"); %>
<% Html.RenderPartial(MVC.Home.Views.Banner); %>
48
ASP.NET MVC の採用事例
続々と増加中 ...
• StackOverflow.com
– http://stackoverflow.com/
• Ruth's Chris Steakhouse
– http://www.ruthschris.com/
• MarketWatch
– http://www.marketwatch.com/
• Kelley Blue Book
– http://www.kbb.com/
• CodePlex - Open Source Project
– http://www.codeplex.com/
• Windows Live
– http://home.live.com/
• Bing Shopping
– http://www.bing.com/shopping/
49
Orchard
新しい .NET ベース CMS
• Orchard (オーチャード)
– 2010 年 8 月 3 日 v.0.5 (Beta) リリース
– http://orchardproject.net/
– http://orchard.codeplex.com/ (ソース コード等)
• 軽量な CMS (Contents Management System)
– Web サイト、ブログ、
ドキュメント管理など ...
– ASP.NET MVC 2 ベース
– 容易なセットアップ (Web PI)
– 容易な拡張とカスタマイズ
(Visual Studio, WebMatrix)
50
最新テクノロジーと Web 開発
新しいプラットフォームも続々と ...
• WebMatrix (Beta)
– http://www.microsoft.com/web/webmatrix/
– 軽量な Web サイトを構築・管理する統合ツール
– オープンソースの Web アプリのインストールやカスタマイズ
• Visual Studio LightSwitch (Beta)
– http://www.microsoft.com/visualstudio/en-us/lightswitch/
– ベーシックな業務アプリケーションを迅速に構築
– 基本コードはテンプレートから自動生成
• Internet Explorer 9 (Beta)
– http://ie.microsoft.com/testdrive/
– Web 標準への準拠、次世代規格 HTML5, CSS3 への対応
51
インテリセンス と スニペット
Visual Studio 2010 入力支援機能
• インテリセンス
– オートコンプリート・オートコレクト
• コード スニペット
– コード ブロックのひな形を簡単に挿入
– HTML と JavaScript でも使用可能
– カスタム スニペットを作成して拡張可能
jQuery と インテリセンス
Visual Studio 2010 入力支援機能
• jQuery インテリセンス対応
– jquery-1.x.x-vsdoc.js ファイルを提供
• インテリセンス向けのコメント情報が記述される
• HTML では通常の jquery-1.x.x.js への参照を追
加
• IDE がプロジェクト内の –vsdoc ファイルを認識
• 外部 JavaScript ファイルでは ...
<script src="jquery-1.4.1.js"
type="text/javascript"></script>
/// <reference path="jquery-1.4.1.js" />
function FadeOut() {
$("#Text1").fadeOut();
... jQuery ファイル
への参照の追加
jQuery と スニペット
Visual Studio 2010 入力支援機能
• jQuery コードスニペット対応
– jQuery Code Snippets for Visual Studio 2010
http://jquerysnippets.codeplex.com/
– 上記を含め 131 ものスニペットを提供
対象 ショートカット 概要
HTML jq スクリプトタグと $(document).ready()
ショートカットを挿入
HTML jqscript jQuery ソースファイルへのスクリプト
タグを挿入
JavaScript func JavaScript の匿名関数を挿入
JavaScript jqclick click イベントハンドラを挿入
JavaScript jqfadein fadeIn 関数を挿入
Content Delivery Network
CDN から jQuery を利用する
• Microsoft Ajax Content Delivery Network
– ajax.microsoft.com ドメインで主要 JS ファイルをホスト
– jQuery などのスクリプトライブラリの利用を容易に
– 最小限のネットワーク ホップ数で効率的にロード
– ブラウザーキャッシュに格納されたスクリプトを
アプリケーション間で再利用
– 無償サービス
Web サーバー
ajax.microsoft.com
エッジ キャッシュ
サーバー
Microsoft Ajax CDN
ホストされる JavaScript ライブラリ
• jQuery 1.4.2
• jQuery 1.4.1
• jQuery 1.4
• jQuery 1.3.2
• jQuery Validate 1.7
• jQuery Validate 1.6
• jQuery Validate 1.5.5
• jQuery UI 1.8.5
• …
http://www.asp.net/
ajaxLibrary/CDN.ashx
<script type="text/javascript" src=
"http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js">
</script>
使用方法
Microsoft Web Platform ホーム
まずはここからスタート !
• Web プラットフォームの紹介
– サーバー
– フレームワーク
– データーベース
– ツール
• Web App Gallery
• ダウンロード
• プログラム紹介
• ホスティング情報
• 事例紹介
• などなど ...
57
www.microsoft.com/web
Web プラットフォーム インストーラー
コンポーネントやアプリの一括管理ツール (Web PI)
マイクロソフトの
コンポーネント
コミュニティの
コンポーネント
www.microsoft.com/web
58
WebsiteSpark
Web 開発会社様 支援プログラム
プログラム特典:
開発ツール
Visual Studio 2010 Professional x 3
Expression Studio 4 x 1
Expression Web 4 x 2
サーバー ソフトウェア(検証、デモ用)
Windows Web Server 2008 R2 x 3
SQL Server 2008 Web Edition x 3
※これらのソフトウェアは MSDN サブスクリプションの
ダウンロード サイトから提供させていただきます
技術サポート
技術サポートを 2 インシデント無償提供
その他
参加企業の露出機会の提供
技術資料、トレーニングマテリアルなどの提供
参加要件:
• Web 開発ビジネスを主業務としていること
(個人事業主を含む)
• 従業員数が 25 名以下であること
期間:最大 3 年間
費用:無料(プログラム終了時にプログラム提供料
として 100 米ドルお支払いいただきます)
www.microsoft.com/japan/web/websitespark
59
リファレンス #1
Microsoft Web Platform
http://www.microsoft.com/web/
MSDN ASP.NET デベロッパー センター
http://msdn.microsoft.com/ja-jp/asp.net/default.aspx
Microsoft Web 開発ガイドライン
http://msdn.microsoft.com/ja-jp/asp.net/ff602016.aspx
ASP.NET MVC チュートリアル
http://msdn.microsoft.com/ja-jp/asp.net/ff630143.aspx
ASP.NET MVC 2 サンプル ソース コード ~ Edtter ~
http://edtter.codeplex.com/
THE TRUTH IS OUT THERE ~ 井上 章のブログ ~
http://blogs.msdn.com/chack/
60
リファレンス #2
ASP.NET MVC: The Official Microsoft ASP.NET Site (英語)
http://www.asp.net/mvc
CodePlex - ASP.NET MVC (英語)
http://aspnet.codeplex.com/wikipage?title=MVC
ScottGu's Blog (英語)
http://weblogs.asp.net/scottgu/default.aspx
Scott Hanselman's Blog (英語)
http://www.hanselman.com/blog/
K. Scott Allen's Blog (英語)
http://odetocode.com/Blogs/scott/default.aspx
Phil Haack's Blog (英語)
http://haacked.com/Default.aspx
61
お疲れ様でした ...
62
63

More Related Content

What's hot

イマドキ!ユースケース別に見るAWS IoT への接続パターン
イマドキ!ユースケース別に見るAWS IoT への接続パターンイマドキ!ユースケース別に見るAWS IoT への接続パターン
イマドキ!ユースケース別に見るAWS IoT への接続パターンseiichi arai
 
マルチテナント化で知っておきたいデータベースのこと
マルチテナント化で知っておきたいデータベースのことマルチテナント化で知っておきたいデータベースのこと
マルチテナント化で知っておきたいデータベースのことAmazon Web Services Japan
 
Static Web AppsとBlazor WebAssemblyのすすめ
Static Web AppsとBlazor  WebAssemblyのすすめStatic Web AppsとBlazor  WebAssemblyのすすめ
Static Web AppsとBlazor WebAssemblyのすすめTomomitsuKusaba
 
backlogsでもCI/CDする夢を見る
backlogsでもCI/CDする夢を見るbacklogsでもCI/CDする夢を見る
backlogsでもCI/CDする夢を見るTakeru Maehara
 
XenDesktop 7.6とXenApp 7.6の移行および注意点について徹底解説
XenDesktop 7.6とXenApp 7.6の移行および注意点について徹底解説 XenDesktop 7.6とXenApp 7.6の移行および注意点について徹底解説
XenDesktop 7.6とXenApp 7.6の移行および注意点について徹底解説 Citrix Systems Japan
 
JenkinsとCodeBuildとCloud Buildと私
JenkinsとCodeBuildとCloud Buildと私JenkinsとCodeBuildとCloud Buildと私
JenkinsとCodeBuildとCloud Buildと私Shoji Shirotori
 
どうやって決める?kubernetesでのシークレット管理方法(Cloud Native Days 2020 発表資料)
どうやって決める?kubernetesでのシークレット管理方法(Cloud Native Days 2020 発表資料)どうやって決める?kubernetesでのシークレット管理方法(Cloud Native Days 2020 発表資料)
どうやって決める?kubernetesでのシークレット管理方法(Cloud Native Days 2020 発表資料)NTT DATA Technology & Innovation
 
WebSocketでカメラの映像を共有してみた
WebSocketでカメラの映像を共有してみたWebSocketでカメラの映像を共有してみた
WebSocketでカメラの映像を共有してみたonozaty
 
MuleSoft Anypoint Platformのコンセプトとサービス
MuleSoft Anypoint PlatformのコンセプトとサービスMuleSoft Anypoint Platformのコンセプトとサービス
MuleSoft Anypoint PlatformのコンセプトとサービスSalesforce Developers Japan
 
【de:code 2020】 レガシーシステムをデジタルの世界へ! Power Automate UI フロー入門
【de:code 2020】 レガシーシステムをデジタルの世界へ! Power Automate UI フロー入門【de:code 2020】 レガシーシステムをデジタルの世界へ! Power Automate UI フロー入門
【de:code 2020】 レガシーシステムをデジタルの世界へ! Power Automate UI フロー入門日本マイクロソフト株式会社
 
Oracleからamazon auroraへの移行にむけて
Oracleからamazon auroraへの移行にむけてOracleからamazon auroraへの移行にむけて
Oracleからamazon auroraへの移行にむけてYoichi Sai
 
やはりお前らのMVCは間違っている
やはりお前らのMVCは間違っているやはりお前らのMVCは間違っている
やはりお前らのMVCは間違っているKoichi Tanaka
 
劇的改善 Ci4時間から5分へ〜私がやった10のこと〜
劇的改善 Ci4時間から5分へ〜私がやった10のこと〜劇的改善 Ci4時間から5分へ〜私がやった10のこと〜
劇的改善 Ci4時間から5分へ〜私がやった10のこと〜aha_oretama
 
組織の問題も解決するアーキテクチャ BackendsForFrontends
組織の問題も解決するアーキテクチャ BackendsForFrontends組織の問題も解決するアーキテクチャ BackendsForFrontends
組織の問題も解決するアーキテクチャ BackendsForFrontendsPIXTA Inc.
 
ログ管理のベストプラクティス
ログ管理のベストプラクティスログ管理のベストプラクティス
ログ管理のベストプラクティスAkihiro Kuwano
 
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティスコンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、ReactのベストプラクティスとバッドプラクティスKohei Asai
 
いまさら学ぶMVVMパターン
いまさら学ぶMVVMパターンいまさら学ぶMVVMパターン
いまさら学ぶMVVMパターンYuta Matsumura
 
エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織Takafumi ONAKA
 

What's hot (20)

イマドキ!ユースケース別に見るAWS IoT への接続パターン
イマドキ!ユースケース別に見るAWS IoT への接続パターンイマドキ!ユースケース別に見るAWS IoT への接続パターン
イマドキ!ユースケース別に見るAWS IoT への接続パターン
 
GraphQL入門 (AWS AppSync)
GraphQL入門 (AWS AppSync)GraphQL入門 (AWS AppSync)
GraphQL入門 (AWS AppSync)
 
マルチテナント化で知っておきたいデータベースのこと
マルチテナント化で知っておきたいデータベースのことマルチテナント化で知っておきたいデータベースのこと
マルチテナント化で知っておきたいデータベースのこと
 
Static Web AppsとBlazor WebAssemblyのすすめ
Static Web AppsとBlazor  WebAssemblyのすすめStatic Web AppsとBlazor  WebAssemblyのすすめ
Static Web AppsとBlazor WebAssemblyのすすめ
 
backlogsでもCI/CDする夢を見る
backlogsでもCI/CDする夢を見るbacklogsでもCI/CDする夢を見る
backlogsでもCI/CDする夢を見る
 
XenDesktop 7.6とXenApp 7.6の移行および注意点について徹底解説
XenDesktop 7.6とXenApp 7.6の移行および注意点について徹底解説 XenDesktop 7.6とXenApp 7.6の移行および注意点について徹底解説
XenDesktop 7.6とXenApp 7.6の移行および注意点について徹底解説
 
ServiceとRepository
ServiceとRepositoryServiceとRepository
ServiceとRepository
 
JenkinsとCodeBuildとCloud Buildと私
JenkinsとCodeBuildとCloud Buildと私JenkinsとCodeBuildとCloud Buildと私
JenkinsとCodeBuildとCloud Buildと私
 
どうやって決める?kubernetesでのシークレット管理方法(Cloud Native Days 2020 発表資料)
どうやって決める?kubernetesでのシークレット管理方法(Cloud Native Days 2020 発表資料)どうやって決める?kubernetesでのシークレット管理方法(Cloud Native Days 2020 発表資料)
どうやって決める?kubernetesでのシークレット管理方法(Cloud Native Days 2020 発表資料)
 
WebSocketでカメラの映像を共有してみた
WebSocketでカメラの映像を共有してみたWebSocketでカメラの映像を共有してみた
WebSocketでカメラの映像を共有してみた
 
MuleSoft Anypoint Platformのコンセプトとサービス
MuleSoft Anypoint PlatformのコンセプトとサービスMuleSoft Anypoint Platformのコンセプトとサービス
MuleSoft Anypoint Platformのコンセプトとサービス
 
【de:code 2020】 レガシーシステムをデジタルの世界へ! Power Automate UI フロー入門
【de:code 2020】 レガシーシステムをデジタルの世界へ! Power Automate UI フロー入門【de:code 2020】 レガシーシステムをデジタルの世界へ! Power Automate UI フロー入門
【de:code 2020】 レガシーシステムをデジタルの世界へ! Power Automate UI フロー入門
 
Oracleからamazon auroraへの移行にむけて
Oracleからamazon auroraへの移行にむけてOracleからamazon auroraへの移行にむけて
Oracleからamazon auroraへの移行にむけて
 
やはりお前らのMVCは間違っている
やはりお前らのMVCは間違っているやはりお前らのMVCは間違っている
やはりお前らのMVCは間違っている
 
劇的改善 Ci4時間から5分へ〜私がやった10のこと〜
劇的改善 Ci4時間から5分へ〜私がやった10のこと〜劇的改善 Ci4時間から5分へ〜私がやった10のこと〜
劇的改善 Ci4時間から5分へ〜私がやった10のこと〜
 
組織の問題も解決するアーキテクチャ BackendsForFrontends
組織の問題も解決するアーキテクチャ BackendsForFrontends組織の問題も解決するアーキテクチャ BackendsForFrontends
組織の問題も解決するアーキテクチャ BackendsForFrontends
 
ログ管理のベストプラクティス
ログ管理のベストプラクティスログ管理のベストプラクティス
ログ管理のベストプラクティス
 
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティスコンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
 
いまさら学ぶMVVMパターン
いまさら学ぶMVVMパターンいまさら学ぶMVVMパターン
いまさら学ぶMVVMパターン
 
エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織
 

Viewers also liked

Va tutorial
Va tutorialVa tutorial
Va tutorialyg0808
 
OSC2010 TOKYO/Spring Asterisk Seminar
OSC2010 TOKYO/Spring Asterisk SeminarOSC2010 TOKYO/Spring Asterisk Seminar
OSC2010 TOKYO/Spring Asterisk SeminarKenichi 深海
 
2016年注目の.netテクノロジー
2016年注目の.netテクノロジー2016年注目の.netテクノロジー
2016年注目の.netテクノロジーMakoto Nishimura
 
C#スクリプティングをアプリケーションで使用する
C#スクリプティングをアプリケーションで使用するC#スクリプティングをアプリケーションで使用する
C#スクリプティングをアプリケーションで使用するPierre3 小林
 
[Tokyo NodeFest 2015] Hardware Hacking for Javascript Developers
[Tokyo NodeFest 2015] Hardware Hacking for Javascript Developers[Tokyo NodeFest 2015] Hardware Hacking for Javascript Developers
[Tokyo NodeFest 2015] Hardware Hacking for Javascript DevelopersTomomi Imura
 
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発Daizen Ikehara
 
スマホアプリにおけるマルチプレイアクションゲーム開発の実例紹介
スマホアプリにおけるマルチプレイアクションゲーム開発の実例紹介スマホアプリにおけるマルチプレイアクションゲーム開発の実例紹介
スマホアプリにおけるマルチプレイアクションゲーム開発の実例紹介aktsk
 
大規模Node.jsを支える ロードバランスとオートスケールの独自実装
大規模Node.jsを支える ロードバランスとオートスケールの独自実装大規模Node.jsを支える ロードバランスとオートスケールの独自実装
大規模Node.jsを支える ロードバランスとオートスケールの独自実装kidach1
 
Visual Studio 2013 と HTML5 で実現するマルチデバイス/マルチプラットフォーム アプリの開発
Visual Studio 2013 と HTML5 で実現するマルチデバイス/マルチプラットフォーム アプリの開発Visual Studio 2013 と HTML5 で実現するマルチデバイス/マルチプラットフォーム アプリの開発
Visual Studio 2013 と HTML5 で実現するマルチデバイス/マルチプラットフォーム アプリの開発Osamu Monoe
 
Azure Service Fabric 概要
Azure Service Fabric 概要Azure Service Fabric 概要
Azure Service Fabric 概要Daiyu Hatakeyama
 
.NET Coreとツール類の今
.NET Coreとツール類の今.NET Coreとツール類の今
.NET Coreとツール類の今Yuki Igarashi
 
Visual Studio ~ 過去、現在、そして未来
Visual Studio ~ 過去、現在、そして未来Visual Studio ~ 過去、現在、そして未来
Visual Studio ~ 過去、現在、そして未来Akira Inoue
 
Empower Every App, Every Developer ~ 統合開発プラットフォーム Visual Studio の進化 ~
Empower Every App, Every Developer ~ 統合開発プラットフォーム Visual Studio の進化 ~Empower Every App, Every Developer ~ 統合開発プラットフォーム Visual Studio の進化 ~
Empower Every App, Every Developer ~ 統合開発プラットフォーム Visual Studio の進化 ~Akira Inoue
 
【CEDEC2013】20対20リアルタイム通信対戦オンラインゲームのサーバ開発&運営技法
【CEDEC2013】20対20リアルタイム通信対戦オンラインゲームのサーバ開発&運営技法【CEDEC2013】20対20リアルタイム通信対戦オンラインゲームのサーバ開発&運営技法
【CEDEC2013】20対20リアルタイム通信対戦オンラインゲームのサーバ開発&運営技法モノビット エンジン
 
Consumer Driven Contractsで REST API/マイクロサービスをテスト #m3tech
Consumer Driven Contractsで REST API/マイクロサービスをテスト #m3techConsumer Driven Contractsで REST API/マイクロサービスをテスト #m3tech
Consumer Driven Contractsで REST API/マイクロサービスをテスト #m3techToshiaki Maki
 
ASP.NET 新時代に向けて ~ ASP.NET 5 / Visual Studio 2015 基礎解説
ASP.NET 新時代に向けて ~ ASP.NET 5 / Visual Studio 2015 基礎解説ASP.NET 新時代に向けて ~ ASP.NET 5 / Visual Studio 2015 基礎解説
ASP.NET 新時代に向けて ~ ASP.NET 5 / Visual Studio 2015 基礎解説Akira Inoue
 

Viewers also liked (20)

Va tutorial
Va tutorialVa tutorial
Va tutorial
 
THE OPEN
THE OPENTHE OPEN
THE OPEN
 
Aws 2014 lt
Aws 2014 ltAws 2014 lt
Aws 2014 lt
 
OSC2010 TOKYO/Spring Asterisk Seminar
OSC2010 TOKYO/Spring Asterisk SeminarOSC2010 TOKYO/Spring Asterisk Seminar
OSC2010 TOKYO/Spring Asterisk Seminar
 
2016年注目の.netテクノロジー
2016年注目の.netテクノロジー2016年注目の.netテクノロジー
2016年注目の.netテクノロジー
 
C#スクリプティングをアプリケーションで使用する
C#スクリプティングをアプリケーションで使用するC#スクリプティングをアプリケーションで使用する
C#スクリプティングをアプリケーションで使用する
 
[Tokyo NodeFest 2015] Hardware Hacking for Javascript Developers
[Tokyo NodeFest 2015] Hardware Hacking for Javascript Developers[Tokyo NodeFest 2015] Hardware Hacking for Javascript Developers
[Tokyo NodeFest 2015] Hardware Hacking for Javascript Developers
 
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
 
ReactiveSignalR
ReactiveSignalRReactiveSignalR
ReactiveSignalR
 
スマホアプリにおけるマルチプレイアクションゲーム開発の実例紹介
スマホアプリにおけるマルチプレイアクションゲーム開発の実例紹介スマホアプリにおけるマルチプレイアクションゲーム開発の実例紹介
スマホアプリにおけるマルチプレイアクションゲーム開発の実例紹介
 
大規模Node.jsを支える ロードバランスとオートスケールの独自実装
大規模Node.jsを支える ロードバランスとオートスケールの独自実装大規模Node.jsを支える ロードバランスとオートスケールの独自実装
大規模Node.jsを支える ロードバランスとオートスケールの独自実装
 
Net fringejp2016
Net fringejp2016Net fringejp2016
Net fringejp2016
 
Visual Studio 2013 と HTML5 で実現するマルチデバイス/マルチプラットフォーム アプリの開発
Visual Studio 2013 と HTML5 で実現するマルチデバイス/マルチプラットフォーム アプリの開発Visual Studio 2013 と HTML5 で実現するマルチデバイス/マルチプラットフォーム アプリの開発
Visual Studio 2013 と HTML5 で実現するマルチデバイス/マルチプラットフォーム アプリの開発
 
Azure Service Fabric 概要
Azure Service Fabric 概要Azure Service Fabric 概要
Azure Service Fabric 概要
 
.NET Coreとツール類の今
.NET Coreとツール類の今.NET Coreとツール類の今
.NET Coreとツール類の今
 
Visual Studio ~ 過去、現在、そして未来
Visual Studio ~ 過去、現在、そして未来Visual Studio ~ 過去、現在、そして未来
Visual Studio ~ 過去、現在、そして未来
 
Empower Every App, Every Developer ~ 統合開発プラットフォーム Visual Studio の進化 ~
Empower Every App, Every Developer ~ 統合開発プラットフォーム Visual Studio の進化 ~Empower Every App, Every Developer ~ 統合開発プラットフォーム Visual Studio の進化 ~
Empower Every App, Every Developer ~ 統合開発プラットフォーム Visual Studio の進化 ~
 
【CEDEC2013】20対20リアルタイム通信対戦オンラインゲームのサーバ開発&運営技法
【CEDEC2013】20対20リアルタイム通信対戦オンラインゲームのサーバ開発&運営技法【CEDEC2013】20対20リアルタイム通信対戦オンラインゲームのサーバ開発&運営技法
【CEDEC2013】20対20リアルタイム通信対戦オンラインゲームのサーバ開発&運営技法
 
Consumer Driven Contractsで REST API/マイクロサービスをテスト #m3tech
Consumer Driven Contractsで REST API/マイクロサービスをテスト #m3techConsumer Driven Contractsで REST API/マイクロサービスをテスト #m3tech
Consumer Driven Contractsで REST API/マイクロサービスをテスト #m3tech
 
ASP.NET 新時代に向けて ~ ASP.NET 5 / Visual Studio 2015 基礎解説
ASP.NET 新時代に向けて ~ ASP.NET 5 / Visual Studio 2015 基礎解説ASP.NET 新時代に向けて ~ ASP.NET 5 / Visual Studio 2015 基礎解説
ASP.NET 新時代に向けて ~ ASP.NET 5 / Visual Studio 2015 基礎解説
 

Similar to ASP.NET MVC と jQuery で実践する標準志向 Web 開発

jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発Akira Inoue
 
ASP.NET MVC 2 ~新機能の紹介~
ASP.NET MVC 2 ~新機能の紹介~ASP.NET MVC 2 ~新機能の紹介~
ASP.NET MVC 2 ~新機能の紹介~Yoshitaka Seo
 
マイクロソフトWeb開発の今と今後
マイクロソフトWeb開発の今と今後マイクロソフトWeb開発の今と今後
マイクロソフトWeb開発の今と今後Akira Inoue
 
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介david9142
 
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話Akira Inoue
 
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発Akira Inoue
 
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...Akira Inoue
 
今こそ知りたいSpring Web(Spring Fest 2020講演資料)
今こそ知りたいSpring Web(Spring Fest 2020講演資料)今こそ知りたいSpring Web(Spring Fest 2020講演資料)
今こそ知りたいSpring Web(Spring Fest 2020講演資料)NTT DATA Technology & Innovation
 
最新 ASP.NET Web 開発オーバービュー
最新 ASP.NET Web 開発オーバービュー最新 ASP.NET Web 開発オーバービュー
最新 ASP.NET Web 開発オーバービューAkira Inoue
 
Mvc conf session_2_shibamura
Mvc conf session_2_shibamuraMvc conf session_2_shibamura
Mvc conf session_2_shibamuraHiroshi Okunushi
 
ASP.NET MVCとEntity Frameworkで作ってみた
ASP.NET MVCとEntity Frameworkで作ってみたASP.NET MVCとEntity Frameworkで作ってみた
ASP.NET MVCとEntity Frameworkで作ってみたKentaro Inomata
 
MAF2013 Enterprise Windows 8 – Architecture for rapid development of WinRT apps
MAF2013 Enterprise Windows 8 – Architecture for rapid development of WinRT appsMAF2013 Enterprise Windows 8 – Architecture for rapid development of WinRT apps
MAF2013 Enterprise Windows 8 – Architecture for rapid development of WinRT appsShotaro Suzuki
 
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~Akira Inoue
 
SilverlightとSharePoint2010の紹介
SilverlightとSharePoint2010の紹介SilverlightとSharePoint2010の紹介
SilverlightとSharePoint2010の紹介Tadahiro Higuchi
 
Net advantage 2012 volume2 最新情報 xaml プラットフォーム編
Net advantage 2012 volume2 最新情報 xaml プラットフォーム編Net advantage 2012 volume2 最新情報 xaml プラットフォーム編
Net advantage 2012 volume2 最新情報 xaml プラットフォーム編Daizen Ikehara
 

Similar to ASP.NET MVC と jQuery で実践する標準志向 Web 開発 (20)

jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発
 
ASP.NET MVC 2 ~新機能の紹介~
ASP.NET MVC 2 ~新機能の紹介~ASP.NET MVC 2 ~新機能の紹介~
ASP.NET MVC 2 ~新機能の紹介~
 
マイクロソフトWeb開発の今と今後
マイクロソフトWeb開発の今と今後マイクロソフトWeb開発の今と今後
マイクロソフトWeb開発の今と今後
 
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
 
20100218
2010021820100218
20100218
 
Mvc conf session_1_osada
Mvc conf session_1_osadaMvc conf session_1_osada
Mvc conf session_1_osada
 
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
 
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
 
Ajax basic
Ajax basicAjax basic
Ajax basic
 
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
 
Angularreflex20141210
Angularreflex20141210Angularreflex20141210
Angularreflex20141210
 
今こそ知りたいSpring Web(Spring Fest 2020講演資料)
今こそ知りたいSpring Web(Spring Fest 2020講演資料)今こそ知りたいSpring Web(Spring Fest 2020講演資料)
今こそ知りたいSpring Web(Spring Fest 2020講演資料)
 
最新 ASP.NET Web 開発オーバービュー
最新 ASP.NET Web 開発オーバービュー最新 ASP.NET Web 開発オーバービュー
最新 ASP.NET Web 開発オーバービュー
 
ASP.NET MVC 1.0
ASP.NET MVC 1.0ASP.NET MVC 1.0
ASP.NET MVC 1.0
 
Mvc conf session_2_shibamura
Mvc conf session_2_shibamuraMvc conf session_2_shibamura
Mvc conf session_2_shibamura
 
ASP.NET MVCとEntity Frameworkで作ってみた
ASP.NET MVCとEntity Frameworkで作ってみたASP.NET MVCとEntity Frameworkで作ってみた
ASP.NET MVCとEntity Frameworkで作ってみた
 
MAF2013 Enterprise Windows 8 – Architecture for rapid development of WinRT apps
MAF2013 Enterprise Windows 8 – Architecture for rapid development of WinRT appsMAF2013 Enterprise Windows 8 – Architecture for rapid development of WinRT apps
MAF2013 Enterprise Windows 8 – Architecture for rapid development of WinRT apps
 
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
One ASP.NET ~ 今、ASP.NET に何が起こっているのか? ~
 
SilverlightとSharePoint2010の紹介
SilverlightとSharePoint2010の紹介SilverlightとSharePoint2010の紹介
SilverlightとSharePoint2010の紹介
 
Net advantage 2012 volume2 最新情報 xaml プラットフォーム編
Net advantage 2012 volume2 最新情報 xaml プラットフォーム編Net advantage 2012 volume2 最新情報 xaml プラットフォーム編
Net advantage 2012 volume2 最新情報 xaml プラットフォーム編
 

More from Akira Inoue

New Features in C# 10/11
New Features in C# 10/11New Features in C# 10/11
New Features in C# 10/11Akira Inoue
 
デモで楽しむ Visual Studio 2022 & .NET 6 最新アップデート
デモで楽しむ Visual Studio 2022 & .NET 6 最新アップデートデモで楽しむ Visual Studio 2022 & .NET 6 最新アップデート
デモで楽しむ Visual Studio 2022 & .NET 6 最新アップデートAkira Inoue
 
.NET 6 と Blazor で作るクロスプラットフォームアプリ概要
.NET 6 と Blazor で作るクロスプラットフォームアプリ概要.NET 6 と Blazor で作るクロスプラットフォームアプリ概要
.NET 6 と Blazor で作るクロスプラットフォームアプリ概要Akira Inoue
 
~ Build と言えば やっぱり Developer! ~ Microsoft 開発ツール最新アップデート
~ Build と言えば やっぱり Developer! ~ Microsoft 開発ツール最新アップデート~ Build と言えば やっぱり Developer! ~ Microsoft 開発ツール最新アップデート
~ Build と言えば やっぱり Developer! ~ Microsoft 開発ツール最新アップデートAkira Inoue
 
.NET の過去、現在、そして未来 ~ .NET 最新アップデート
.NET の過去、現在、そして未来 ~ .NET 最新アップデート.NET の過去、現在、そして未来 ~ .NET 最新アップデート
.NET の過去、現在、そして未来 ~ .NET 最新アップデートAkira Inoue
 
Cloud から IoT まで、なんでもおまかせ ~ .NET 5 正式リリース!
Cloud から IoT まで、なんでもおまかせ ~ .NET 5 正式リリース!Cloud から IoT まで、なんでもおまかせ ~ .NET 5 正式リリース!
Cloud から IoT まで、なんでもおまかせ ~ .NET 5 正式リリース!Akira Inoue
 
.NET の過去、現在、そして未来
.NET の過去、現在、そして未来.NET の過去、現在、そして未来
.NET の過去、現在、そして未来Akira Inoue
 
VS Code Live Share ~ 東京と大阪を繋いでみよう!
VS Code Live Share ~ 東京と大阪を繋いでみよう!VS Code Live Share ~ 東京と大阪を繋いでみよう!
VS Code Live Share ~ 東京と大阪を繋いでみよう!Akira Inoue
 
レガシー Web からの脱却 ~ 開発者が次に目指すべき Web アプリの姿とは?
レガシー Web からの脱却 ~ 開発者が次に目指すべき Web アプリの姿とは?レガシー Web からの脱却 ~ 開発者が次に目指すべき Web アプリの姿とは?
レガシー Web からの脱却 ~ 開発者が次に目指すべき Web アプリの姿とは?Akira Inoue
 
.NET の今と今後に思うこと (Tokyo Ver.)
.NET の今と今後に思うこと (Tokyo Ver.).NET の今と今後に思うこと (Tokyo Ver.)
.NET の今と今後に思うこと (Tokyo Ver.)Akira Inoue
 
.NET の今と今後に思うこと
.NET の今と今後に思うこと.NET の今と今後に思うこと
.NET の今と今後に思うことAkira Inoue
 
.NET 最新ロードマップと今押さえておきたい技術要素
.NET 最新ロードマップと今押さえておきたい技術要素.NET 最新ロードマップと今押さえておきたい技術要素
.NET 最新ロードマップと今押さえておきたい技術要素Akira Inoue
 
VS Code & Flaskで作るCloud NativeアプリとDevOps
VS Code & Flaskで作るCloud NativeアプリとDevOpsVS Code & Flaskで作るCloud NativeアプリとDevOps
VS Code & Flaskで作るCloud NativeアプリとDevOpsAkira Inoue
 
.NET Core と Docker コンテナー、そして Azure を使用したマイクロサービスのアーキテクチャ
.NET Core と Docker コンテナー、そして Azure を使用したマイクロサービスのアーキテクチャ.NET Core と Docker コンテナー、そして Azure を使用したマイクロサービスのアーキテクチャ
.NET Core と Docker コンテナー、そして Azure を使用したマイクロサービスのアーキテクチャAkira Inoue
 
本格化するクラウド ネイティブに向けて進化する開発プラットフォームと .NET
本格化するクラウド ネイティブに向けて進化する開発プラットフォームと .NET本格化するクラウド ネイティブに向けて進化する開発プラットフォームと .NET
本格化するクラウド ネイティブに向けて進化する開発プラットフォームと .NETAkira Inoue
 
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイル
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイルVisual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイル
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイルAkira Inoue
 
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイル
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイルVisual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイル
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイルAkira Inoue
 
.NET の今 ~ 最新アップデートと 2019 年の展望
.NET の今 ~ 最新アップデートと 2019 年の展望.NET の今 ~ 最新アップデートと 2019 年の展望
.NET の今 ~ 最新アップデートと 2019 年の展望Akira Inoue
 
.NET today and tomorrow
.NET today and tomorrow.NET today and tomorrow
.NET today and tomorrowAkira Inoue
 
.NET の今とミライ (.NET Conf 2018 Japan Keynote)
.NET の今とミライ (.NET Conf 2018 Japan Keynote).NET の今とミライ (.NET Conf 2018 Japan Keynote)
.NET の今とミライ (.NET Conf 2018 Japan Keynote)Akira Inoue
 

More from Akira Inoue (20)

New Features in C# 10/11
New Features in C# 10/11New Features in C# 10/11
New Features in C# 10/11
 
デモで楽しむ Visual Studio 2022 & .NET 6 最新アップデート
デモで楽しむ Visual Studio 2022 & .NET 6 最新アップデートデモで楽しむ Visual Studio 2022 & .NET 6 最新アップデート
デモで楽しむ Visual Studio 2022 & .NET 6 最新アップデート
 
.NET 6 と Blazor で作るクロスプラットフォームアプリ概要
.NET 6 と Blazor で作るクロスプラットフォームアプリ概要.NET 6 と Blazor で作るクロスプラットフォームアプリ概要
.NET 6 と Blazor で作るクロスプラットフォームアプリ概要
 
~ Build と言えば やっぱり Developer! ~ Microsoft 開発ツール最新アップデート
~ Build と言えば やっぱり Developer! ~ Microsoft 開発ツール最新アップデート~ Build と言えば やっぱり Developer! ~ Microsoft 開発ツール最新アップデート
~ Build と言えば やっぱり Developer! ~ Microsoft 開発ツール最新アップデート
 
.NET の過去、現在、そして未来 ~ .NET 最新アップデート
.NET の過去、現在、そして未来 ~ .NET 最新アップデート.NET の過去、現在、そして未来 ~ .NET 最新アップデート
.NET の過去、現在、そして未来 ~ .NET 最新アップデート
 
Cloud から IoT まで、なんでもおまかせ ~ .NET 5 正式リリース!
Cloud から IoT まで、なんでもおまかせ ~ .NET 5 正式リリース!Cloud から IoT まで、なんでもおまかせ ~ .NET 5 正式リリース!
Cloud から IoT まで、なんでもおまかせ ~ .NET 5 正式リリース!
 
.NET の過去、現在、そして未来
.NET の過去、現在、そして未来.NET の過去、現在、そして未来
.NET の過去、現在、そして未来
 
VS Code Live Share ~ 東京と大阪を繋いでみよう!
VS Code Live Share ~ 東京と大阪を繋いでみよう!VS Code Live Share ~ 東京と大阪を繋いでみよう!
VS Code Live Share ~ 東京と大阪を繋いでみよう!
 
レガシー Web からの脱却 ~ 開発者が次に目指すべき Web アプリの姿とは?
レガシー Web からの脱却 ~ 開発者が次に目指すべき Web アプリの姿とは?レガシー Web からの脱却 ~ 開発者が次に目指すべき Web アプリの姿とは?
レガシー Web からの脱却 ~ 開発者が次に目指すべき Web アプリの姿とは?
 
.NET の今と今後に思うこと (Tokyo Ver.)
.NET の今と今後に思うこと (Tokyo Ver.).NET の今と今後に思うこと (Tokyo Ver.)
.NET の今と今後に思うこと (Tokyo Ver.)
 
.NET の今と今後に思うこと
.NET の今と今後に思うこと.NET の今と今後に思うこと
.NET の今と今後に思うこと
 
.NET 最新ロードマップと今押さえておきたい技術要素
.NET 最新ロードマップと今押さえておきたい技術要素.NET 最新ロードマップと今押さえておきたい技術要素
.NET 最新ロードマップと今押さえておきたい技術要素
 
VS Code & Flaskで作るCloud NativeアプリとDevOps
VS Code & Flaskで作るCloud NativeアプリとDevOpsVS Code & Flaskで作るCloud NativeアプリとDevOps
VS Code & Flaskで作るCloud NativeアプリとDevOps
 
.NET Core と Docker コンテナー、そして Azure を使用したマイクロサービスのアーキテクチャ
.NET Core と Docker コンテナー、そして Azure を使用したマイクロサービスのアーキテクチャ.NET Core と Docker コンテナー、そして Azure を使用したマイクロサービスのアーキテクチャ
.NET Core と Docker コンテナー、そして Azure を使用したマイクロサービスのアーキテクチャ
 
本格化するクラウド ネイティブに向けて進化する開発プラットフォームと .NET
本格化するクラウド ネイティブに向けて進化する開発プラットフォームと .NET本格化するクラウド ネイティブに向けて進化する開発プラットフォームと .NET
本格化するクラウド ネイティブに向けて進化する開発プラットフォームと .NET
 
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイル
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイルVisual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイル
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイル
 
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイル
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイルVisual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイル
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイル
 
.NET の今 ~ 最新アップデートと 2019 年の展望
.NET の今 ~ 最新アップデートと 2019 年の展望.NET の今 ~ 最新アップデートと 2019 年の展望
.NET の今 ~ 最新アップデートと 2019 年の展望
 
.NET today and tomorrow
.NET today and tomorrow.NET today and tomorrow
.NET today and tomorrow
 
.NET の今とミライ (.NET Conf 2018 Japan Keynote)
.NET の今とミライ (.NET Conf 2018 Japan Keynote).NET の今とミライ (.NET Conf 2018 Japan Keynote)
.NET の今とミライ (.NET Conf 2018 Japan Keynote)
 

Recently uploaded

スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムスマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムsugiuralab
 
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略Ryo Sasaki
 
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A surveyToru Tamaki
 
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNetToru Tamaki
 
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...Toru Tamaki
 
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Yuma Ohgami
 
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)Hiroki Ichikura
 
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する       2024/04/19 の勉強会で発表されたものですSOPを理解する       2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものですiPride Co., Ltd.
 
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdfTSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdftaisei2219
 

Recently uploaded (9)

スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムスマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
 
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
 
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
 
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
 
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
 
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
 
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
 
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する       2024/04/19 の勉強会で発表されたものですSOPを理解する       2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
 
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdfTSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
 

ASP.NET MVC と jQuery で実践する標準志向 Web 開発

  • 1. マイクロソフト株式会社 デベロッパー & プラットフォーム統括本部 エバンジェリスト 井上 章(いのうえ あきら) http://blogs.msdn.com/chack/ http://twitter.com/chack411/ 1 ASP.NET MVC と jQuery で 実践する標準志向 Web 開発
  • 2. アジェンダ ~ 本日の内容 ~ 2 • JavaScript と jQuery • ASP.NET MVC ~ 概要・入門編 ~ • ASP.NET MVC ~ 活用・応用編 ~ • 事例紹介 • まとめ
  • 4. 注目される JavaScript Technology Radar January 2010 • Language 分野で 高い注目度 出典: Technology Radar January 2010 © ThoughtWorks https://www1.vtrenz.net/imarkownerfiles/ownerassets/ 1013/Technology%20Radar%20Jan%202010.pdf While JavaScript first appeared in 1995, it is only in the past couple of years that libraries such as Prototype and jQuery have helped the language become more accessible to a wider developer audience. As developers continue to embrace JavaScript for developing rich user web applications, we increasingly hold JavaScript in the same level of esteem as any other production language, ensuring that scripts are adequately tested, refactored and maintained.
  • 5. JavaScript の実装 オーバー ビュー • JavaScript にはさまざまな実装が存在 – ECMAScript (ECMA-262 言語仕様) として標準化 • 最新は ECMAScript 5 ECMA-262 5th Edition, December 2009 – JScript • ECMA-262 3rd Edition のマイクロソフト実装
  • 6. JavaScript と Visual Studio デバッグ対応 ブレーク ポイント ツールヒント による変数の ウォッチ スクリプト ドキュメント イミディエイト ウィンドウ ブレーク ポイント一覧 ウォッチ ウィンドウ
  • 7. jQuery のサポート Visual Studio と jQuery • 高速・軽量な JavaScript ライブラリ – DOM 操作 / CSS 操作 / Ajax 処理を容易に – オープンソース • jQuery 公式サイト http://jquery.com/ – 最新バージョンは 1.4.3 • Visual Studio と jQuery – jQuery 1.4.1 が標準搭載 • Web フォーム や MVC プロジェクト で標準採用 • インテリセンスとコードスニペット にも対応 (詳細は Appendix を参照) $(function() { $('#button1').click(function() { $('#div1').fadeIn('slow'); }); });
  • 8. 8
  • 9. ASP.NET 4 構成 フレームワーク関係図 9 .NET Framework 4 ASP.NET 4 Web フォーム ASP.NET MVC 2 ASP.NET AJAX 動的データ
  • 10. 注目される ASP.NET MVC Technology Radar January 2010 • 高い注目度 (Tool 分野) • 試用から採用へ 出典: Technology Radar January 2010 © ThoughtWorks https://www1.vtrenz.net/imarkownerfiles/ownerassets/ 1013/Technology%20Radar%20Jan%202010.pdf This is an exciting development in the .NET space from Microsoft, both in the programming model and in the open source license under which Microsoft has released the library. ASP.NET MVC is similar to MVC frameworks on the Java platform and is a move away from the ASP.NET Web Forms approach to one that supports greater levels of automated testing. 10
  • 11. What is MVC ? デザイン パターン • Model データとビジネス ロジック を表現 • View Model から取得したデータを プレゼンテーション (UI) へ出力する • Controller ユーザーからの入力を受付け View と Model を制御する M C V 11
  • 12. MVC オーバービュー Web アプリにおける MVC パターン 12 HTTP Request 1. Controller が リクエストを受信 2. Controller が Model を初期化 3. ビジネス ロジック を実行 4. Controller が View を呼び出す 5. View が Model を参照 6. View がレスポンス を送信 Model Controller ViewHTTP Response 入力と制御 プレゼンテーション データ表現と ビジネス ロジック
  • 13. ASP.NET MVC 2 新しい Web アプリ開発フレームワーク • 2010 年 3 月 RTM リリース (for VS 2008 SP1) • Visual Studio 2010 に標準搭載 • オープン ソース (CodePlex) 各モジュールが 疎結合 に 単体テスト (TDD) が容易に HTML ベース のページ開発が容易に URL ルーティング が可能に 13
  • 14. View の特徴と HTML 生成 埋め込みコード ブロックの利用 • View における HTML 生成 (View エンジン) は 既定で Web フォーム (.aspx) を使用 – System.Web.Mvc.WebFormViewEngine クラス – 基本的に Web サーバー コントロールは使用しない (ポストバックや ViewState は使用しない) – ヘルパー メソッドで HTML タグ ブロックを生成 View (.aspx) <html> <div><%: DateTime.Now.ToString() %></div> <div><%: Html.TextBox("data", Model.data) %></div> </html> 埋め込み コード ブロック 14
  • 15. HTML ヘルパー メソッド HTML 生成を助ける関数群 メソッド名 概要 ActionLink アクション名などから a タグを生成 BeginForm form タグを生成 TextBox input タグによる入力フィールドを生成 TextBoxFor … …<%: Html.ActionLink("Go to Home", "Index") %> <%: Html.TextBox("message", model.Message) %> <%: Html.TextBoxFor(model => model.Message) %> 使用例 15
  • 16. Controller と View の命名ルール コンセプト「規約は設定に勝る」 • CoC (Convention over Configuration) • 命名ルールによってモジュール間の結合を疎に – コードや設定ファイルなどで関連付けない public class HomeController : Controller { public ActionResult Index() { ViewData["Message"] = "MVC"; return View(); } } アクション名 Controller 名 Controller クラス 16
  • 17. テスト駆動開発 (TDD) Controller Action の単体テストが容易に • 単体テストには IIS などの Web サーバー は不要 • Visual Studio 2008/2010 Professional 以上が必要 • NUnit, MBUnit, XUnit なども利用可能 • テスト プロジェクトも同時に作成可能 – テスト コードの雛型が自動生成 [TestMethod] public void Index() { HomeController ctrl = new HomeController(); ViewResult result = ctrl.Index() as ViewResult; ViewDataDictionary viewData = result.ViewData; Assert.AreEqual("Hello", viewData["Message"]); } 17
  • 18. URL ルーティング クリーン URL で SEO 対策 • ASP.NET MVC では既定でルーティングが有効 – System.Web.Routing 名前空間 static void RegisterRoutes(RouteCollection routes) { routes.MapRoute( "Default", "{controller}/{action}/{id}", new { controller = "Car", action = "List", id = UrlParameter.Optional } ); } void Application_Start() { RegisterRoutes(RouteTable.Routes); } 例: http://example.com/Products/Car/Details/5 ルーティング定義 既定値 (省略時の値) 18
  • 19. ASP.NET MVC における AJAX 非同期処理と部分更新の実装方法 • AJAX ヘルパー メソッド を利用 • jQuery を利用 19 <%: Ajax.ActionLink("データの表示...", "ShowData", new AjaxOptions {UpdateTargetId = "results"}) %> <% using (Ajax.BeginForm("UpdateList", new AjaxOptions {UpdateTargetId = "results"})) { %> ... <% } %>
  • 20. Data Annotation バリデーション Model 中心の入力検証 • 宣言型で コードすっきり バリデーション Model View public class MyData { [DisplayName("年齢")] [Required(ErrorMessage = "{0}を入力してね")] [Range(0, 100)] public int Age { get; set; } } <%: Html.TextBoxFor(model => model.Age) %> <%: Html.ValidationMessageFor(model => model.Age) %> Controller public ActionResult Create(MyData myData) { if (ModelState.IsValid) { … } } 属性ベースで 検証ルールを指定 エラー メッセージも 指定可能 モデル バインドと 検証実行 20
  • 21. RenderPartial と RenderAction View の部分レンダリング • RenderPartial – 部分 View をレンダリング • RenderAction – コントローラー アクションの実行結果をレンダリング View (.aspx) <html> <% RenderPartial(…); %> </html> View (.ascx) <div>…</div> View (.aspx) <html> <% RenderAction(…); %> </html> Controller ActionResult Ad() M M M M Html.RenderPartial(ViewName, … ) Html.RenderAction(ActionName, … ) ※ M は Model の略 21
  • 22. セキュリティ対策 ASP.NET MVC でも忘れずに • Controller 実行時の認証の要求 – [Authorize] 属性 (ActionFilter) • HTML Encoding 構文 (WebFormViewEngine) – <%: SomeStringData %> • Cross Site Scripting (XSS) – Microsoft Web Protection Library http://wpl.codeplex.com/ • Cross Site Request Forgeries (CSRF) – Html.AntiForgeryToken() – [ValidateAntiForgeryToken] • JSON Hijacking – JsonResult – return Json(data, JsonRequestBehavior.DenyGet); 22
  • 23. 23
  • 24. MVC フレームワークの拡張 多くの拡張ポイントと容易なカスタマイズ odel ontroller iew Response ModelBinder ActionFilter ActionResult ViewEngine HtmlHelper ValidationAttribute Request Routing 24
  • 25. View エンジンのカスタマイズ (1) ViewEngine = HTML 生成テンプレート エンジン • View エンジンの変更 (Razor, NHaml, Spark, ...) • オリジナル View エンジンの作成 • View の検索パスの変更 などのカスタマイズが可能 View Engine ontroller iew ResponseRequest 25 HTML5 対応や 携帯向けサイトの HTML 生成が容易
  • 26. View エンジンのカスタマイズ (2) さまざまな View エンジンの記法 • WebFormViewEngine (.aspx 既定) • NHaml - http://code.google.com/p/nhaml/ – Rails Haml View エンジンの .NET 実装版 • Spark - http://sparkviewengine.com/ – Castle Project - MonoRail 向け View エンジン <h1><%: product.ProductName %></h1> <p><%: Html.ActionLink("Add...", "Add") %></p> %h1= product.ProductName %p= Html.ActionLink("Add...", "Add") <h1>${ product.ProductName }</h1> <p>${ Html.ActionLink("Add...", "Add") }</p> 26
  • 27. ASP.NET MVC 3 新機能 概要 • Beta (2010 年 10 月 6 日 リリース) http://go.microsoft.com/fwlink/?LinkID=191795 • 新機能 – Razor, ASPX, … などの View エンジンの選択機能 – ダイナミック View / ViewModel プロパティ – グローバル Action Filters – JsonValueProviderFactory と JSON モデル バインド – ValidationAttribute と IValidatableObject – 新しい ActionResult 型 と Permanent Redirect – Dependency Injection (DI) サポート • ランタイム – ASP.NET 4 & Visual Studio 2010 以降 27
  • 28. MVC 3 と Razor View エンジン Small, Simple, Seamless • 新しい "Razor 構文" View エンジンの追加 – Razor プロジェクト テンプレート – [ View の追加 ] ダイアログ での View エンジン選択 • View 毎に使用するエンジンを選択可能 – Razor View 拡張子 (※変更の可能性あり) • .cshtml (C#) / .vbhtml (VB) 28
  • 29. .cshtml "Razor" 構文 Small, Simple, Seamless • Web ページ (View) の新しい記述構文 – シンプル & クリーン – タイピング量とコード サイズの低減 (vs. PHP, ASPX) – 便利な HTML ヘルパーと容易な拡張 – C#, Visual Basic をサポート @{ string title = "Hello Razor"; } <h1>@title</h1> <ul> @foreach (var item in Model) { <li>@item.Message</li> } </ul> <p>Time is @DateTime.Now</p> <p>@Html.ActionLink("Add...", "Add")</p> 29
  • 31. StackOverflow.com アーキテクチャー • トラフィック – 1600 万 ページ ビュー / 月 – 300 万 ユニーク ビジター / 月 – 600 万 ビジター / 月 • プラットフォーム・テクノロジー – ASP.NET MVC – SQL Server 2008 – C# – Visual Studio 2008 Team Suite – jQuery – LINQ to SQL 出典: Stack Overflow Architecture http://highscalability.com/stack-overflow-architecture 31
  • 32. 国内採用事例のご紹介 こちらも続々と増えてます ... • 現場入退場管理システム「デイリ」 – 携帯コールによる遠隔地の現場労働時間管理システム – コムテックス株式会社様 開発 – http://www.ctx.co.jp/deiri_pr/index.html – システム構成 • Windows Azure (Web Role + SQL Azure) • ASP.NET MVC + jQuery • ASP.NET メンバーシップ & ロール管理 • オンプレミス連携 (電話着信処理など) 32
  • 34. Web フォーム vs. MVC 特徴と使い分け • ASP.NET MVC と Web フォーム は 適材適所で使い分けることが重要 • プロジェクトの要求、アプリケーションの仕様、 エンジニアのスキル、開発手法、チーム編成など ... Web フォーム ASP.NET MVC 豊富なコントロール を使用可能 HTML ベース の UI 開発 イベント駆動型プログラミング アクション メソッドによる リクエスト処理 ViewState やポストバック処理を 多用する ViewState やポストバック処理を 使用しない ロジックの検証に Web サーバー が必要 ロジックの検証に Web サーバー が不要 (テスト駆動開発をサポート) 34
  • 35. ASP.NET MVC 2 Small + Simple + Seamless = Smart ! ASPX, Razor, ... M C V 35
  • 37. View (Edit.aspx) Model / View / Controller 実装コード例 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 タグ生成と データの埋め込み 37
  • 38. スキャフォールディング機能 (1) Controller の追加 38 Controllers 上で 右クリック [コントローラー] を選択 コントローラー名 追加、更新、削除などの 各アクション メソッドを 自動生成
  • 39. スキャフォールディング機能 (2) View の追加 39 ビュー名 モデル クラス の指定 生成するビューの種類 を選択 アクション メソッド の上で右クリック [ビューの追加] を選択
  • 40. ビュー データ の利用方法 モデル データをビューに渡すには ... • ViewDataDictionary クラス • ViewDataDictionary<TModel> クラス 40 public ActionResult Index() { ViewData["Name"] = "ジャイケル・マクソン"; ViewData["Song"] = "サラリー"; return View(); } <p><%: ViewData["Name"] %></p> <p><%: ViewData["Song"] %></p> public ActionResult Index() { var artist = new MyArtist(); artist.Name = "ジャイケル・マクソン"; artist.Song = "サラリー"; return View(artist); } <p><%: ViewData.Model.Name %></p> <p><%: ViewData.Model.Song %></p> TempDataDictionary でリクエスト間での データ永続化も可
  • 41. Web.config - <system.web><caching><outputCacheSettings> 出力キャッシュの利用 冗長なサーバー処理の回避 • OutputCacheAttribute (ActionFilter) を利用 – Controller Action の無駄な実行を制御 – アプリケーション パフォーマンスの改善 • キャッシュ プロファイル を利用した設定 – アプリケーションを再ビルドすることなく設定変更可 [OutputCache(Duration=3600, VaryByParam="id")] public ActionResult Details(int id) { return View(myModel.GetData(id)); } id 毎に 1 時間キャッシュ [OutputCache(CacheProfile="MyCache")] public ActionResult Index() {…} <outputCacheProfiles> <add name="MyCache" duration="3600" … /> </outputCacheProfiles> 41
  • 42. Templated Helpers View の部分レンダリング • データの表示や編集ための部分 View を生成 – DisplayForModel, EditorForModel 等のヘルパー • テンプレート (部分 View) として .ascx ファイルを用意 – データ型やクラスに基づいた 部分 View の定義 42 <%@ Page Inherits="ViewPage<MyData>" %> <%: Html.DisplayForModel() %> <%: Html.DisplayFor(m => m.Name, "NameTemplate") %> A) データ型やクラスに基づいたテンプレートの利用 B) 名前付きテンプレートの利用
  • 43. AsyncController 非同期コントローラーの利用 • AsyncController クラス – 命名規約による容易な非同期処理の実装が可能 ※ View 名には Async / Completed の文字は不要 • 利点 – Web サーバーの他のリクエスト 処理がブロックされない – 時間のかかるネットワーク I/O (Web API 呼び出し等) に有効 • 注意点 – 非同期処理はオーバーヘッドが大きい – 同期処理においてボトル ネックになる部分に適用 :AsyncController object1: 1: 開始 2: 完了 他の処理 開始 : void ActionNameAsync() 終了 : ActionResult ActionNameCompleted() 43
  • 44. ASP.NET MVC 2 その他の機能 • Areas (区分) – 単一 MVC プロジェクト内で アプリケーションを分割 – AreaRegistration.RegisterAllAreas() • アクション メソッドのデフォルト値 • HTTP Method 属性 – HttpPost, HttpGet, HttpPut, HttpDelete [HttpPost] public ActionResult Create(MyData myData) { … } ActionResult Index([DefaultValue(1)] int id) ActionResult Index(int id = 1) 44
  • 45. ActionFilter 拡張 アクション メソッド実行時の拡張ポイント • アクション メソッドの実行前後に独自機能を追加 • ベース クラス ActionFilterAttribute : FilterAttribute • 既存の FilterAttribute 派生クラス AuthorizeAttribute, ValidateAntiForgeryTokenAttribute, ChildActionOnlyAttribute, RequireHttpsAttribute ... 使用例 public class LogAttribute : ActionFilterAttribute { public override void OnActionExecuting(…) {…} public override void OnResultExecuted(…) {…} } [Log] public class HomeController : Controller {…} Controller や Action に属性を指定 45
  • 46. バインドなしの場合 バインドありの場合 ModelBinder とは ? HTTP リクエスト データの自動バインド • アクション メソッド 引数への自動バインド • 既定のバインドは DefaultModelBinder • 以下のオブジェクト型をバインド – Model クラス – プリミティブ型 (String, DateTime, ...) – コレクション (ICollection<T>, IList<T>, ...) ActionResult Create() { string name = Request["Name"]; ... ActionResult Create(MyData myData) { if (ModelState.IsValid) { string name = myData.Name; ... MyData へバインド 46
  • 47. ModelBinder の登録 ModelBinder 拡張 カスタム機能の追加 • インターフェース : IModelBinder • ベース クラス : DefaultModelBinder 主な拡張ポイント object BindModel(…); // モデル バインド実行 object CreateModel(…); // モデル型オブジェクト生成 bool OnModelUpdating(…); // モデル更新開始 void OnModelUpdated(…); // モデル更新完了 bool OnPropertyValidating(…); // プロパティ検証開始 void OnPropertyValidated(…); // プロパティ検証完了 // Application_Start() で下記のいずれかで指定 ModelBinders.Binders.DefaultBinder = new MyBinder(); ModelBinders.Binders.Add(typeof(MyData),new MyBinder()); // または、引数の属性で指定 [ModelBinder(typeof(MyBinder))] 47
  • 48. ASP.NET MVC 拡張ライブラリ もっと活用したい ! あなたのために ... • MVC Contrib http://mvccontrib.codeplex.com/ – 様々な拡張ライブラリ群 – HTML Helper, Model Binder, Controller, Routing, Action Result, Action Filter, Unit Test Helper, ... • T4MVC http://mvccontrib.codeplex.com/releases/view/41582 – T4 テンプレートを利用した自動コード生成 – View や Controller コード内のリテラル文字列を排除 – インテリセンス利用可 & 容易なコード メンテナンス <% Html.RenderPartial("Banner"); %> <% Html.RenderPartial(MVC.Home.Views.Banner); %> 48
  • 49. ASP.NET MVC の採用事例 続々と増加中 ... • StackOverflow.com – http://stackoverflow.com/ • Ruth's Chris Steakhouse – http://www.ruthschris.com/ • MarketWatch – http://www.marketwatch.com/ • Kelley Blue Book – http://www.kbb.com/ • CodePlex - Open Source Project – http://www.codeplex.com/ • Windows Live – http://home.live.com/ • Bing Shopping – http://www.bing.com/shopping/ 49
  • 50. Orchard 新しい .NET ベース CMS • Orchard (オーチャード) – 2010 年 8 月 3 日 v.0.5 (Beta) リリース – http://orchardproject.net/ – http://orchard.codeplex.com/ (ソース コード等) • 軽量な CMS (Contents Management System) – Web サイト、ブログ、 ドキュメント管理など ... – ASP.NET MVC 2 ベース – 容易なセットアップ (Web PI) – 容易な拡張とカスタマイズ (Visual Studio, WebMatrix) 50
  • 51. 最新テクノロジーと Web 開発 新しいプラットフォームも続々と ... • WebMatrix (Beta) – http://www.microsoft.com/web/webmatrix/ – 軽量な Web サイトを構築・管理する統合ツール – オープンソースの Web アプリのインストールやカスタマイズ • Visual Studio LightSwitch (Beta) – http://www.microsoft.com/visualstudio/en-us/lightswitch/ – ベーシックな業務アプリケーションを迅速に構築 – 基本コードはテンプレートから自動生成 • Internet Explorer 9 (Beta) – http://ie.microsoft.com/testdrive/ – Web 標準への準拠、次世代規格 HTML5, CSS3 への対応 51
  • 52. インテリセンス と スニペット Visual Studio 2010 入力支援機能 • インテリセンス – オートコンプリート・オートコレクト • コード スニペット – コード ブロックのひな形を簡単に挿入 – HTML と JavaScript でも使用可能 – カスタム スニペットを作成して拡張可能
  • 53. jQuery と インテリセンス Visual Studio 2010 入力支援機能 • jQuery インテリセンス対応 – jquery-1.x.x-vsdoc.js ファイルを提供 • インテリセンス向けのコメント情報が記述される • HTML では通常の jquery-1.x.x.js への参照を追 加 • IDE がプロジェクト内の –vsdoc ファイルを認識 • 外部 JavaScript ファイルでは ... <script src="jquery-1.4.1.js" type="text/javascript"></script> /// <reference path="jquery-1.4.1.js" /> function FadeOut() { $("#Text1").fadeOut(); ... jQuery ファイル への参照の追加
  • 54. jQuery と スニペット Visual Studio 2010 入力支援機能 • jQuery コードスニペット対応 – jQuery Code Snippets for Visual Studio 2010 http://jquerysnippets.codeplex.com/ – 上記を含め 131 ものスニペットを提供 対象 ショートカット 概要 HTML jq スクリプトタグと $(document).ready() ショートカットを挿入 HTML jqscript jQuery ソースファイルへのスクリプト タグを挿入 JavaScript func JavaScript の匿名関数を挿入 JavaScript jqclick click イベントハンドラを挿入 JavaScript jqfadein fadeIn 関数を挿入
  • 55. Content Delivery Network CDN から jQuery を利用する • Microsoft Ajax Content Delivery Network – ajax.microsoft.com ドメインで主要 JS ファイルをホスト – jQuery などのスクリプトライブラリの利用を容易に – 最小限のネットワーク ホップ数で効率的にロード – ブラウザーキャッシュに格納されたスクリプトを アプリケーション間で再利用 – 無償サービス Web サーバー ajax.microsoft.com エッジ キャッシュ サーバー
  • 56. Microsoft Ajax CDN ホストされる JavaScript ライブラリ • jQuery 1.4.2 • jQuery 1.4.1 • jQuery 1.4 • jQuery 1.3.2 • jQuery Validate 1.7 • jQuery Validate 1.6 • jQuery Validate 1.5.5 • jQuery UI 1.8.5 • … http://www.asp.net/ ajaxLibrary/CDN.ashx <script type="text/javascript" src= "http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"> </script> 使用方法
  • 57. Microsoft Web Platform ホーム まずはここからスタート ! • Web プラットフォームの紹介 – サーバー – フレームワーク – データーベース – ツール • Web App Gallery • ダウンロード • プログラム紹介 • ホスティング情報 • 事例紹介 • などなど ... 57 www.microsoft.com/web
  • 58. Web プラットフォーム インストーラー コンポーネントやアプリの一括管理ツール (Web PI) マイクロソフトの コンポーネント コミュニティの コンポーネント www.microsoft.com/web 58
  • 59. WebsiteSpark Web 開発会社様 支援プログラム プログラム特典: 開発ツール Visual Studio 2010 Professional x 3 Expression Studio 4 x 1 Expression Web 4 x 2 サーバー ソフトウェア(検証、デモ用) Windows Web Server 2008 R2 x 3 SQL Server 2008 Web Edition x 3 ※これらのソフトウェアは MSDN サブスクリプションの ダウンロード サイトから提供させていただきます 技術サポート 技術サポートを 2 インシデント無償提供 その他 参加企業の露出機会の提供 技術資料、トレーニングマテリアルなどの提供 参加要件: • Web 開発ビジネスを主業務としていること (個人事業主を含む) • 従業員数が 25 名以下であること 期間:最大 3 年間 費用:無料(プログラム終了時にプログラム提供料 として 100 米ドルお支払いいただきます) www.microsoft.com/japan/web/websitespark 59
  • 60. リファレンス #1 Microsoft Web Platform http://www.microsoft.com/web/ MSDN ASP.NET デベロッパー センター http://msdn.microsoft.com/ja-jp/asp.net/default.aspx Microsoft Web 開発ガイドライン http://msdn.microsoft.com/ja-jp/asp.net/ff602016.aspx ASP.NET MVC チュートリアル http://msdn.microsoft.com/ja-jp/asp.net/ff630143.aspx ASP.NET MVC 2 サンプル ソース コード ~ Edtter ~ http://edtter.codeplex.com/ THE TRUTH IS OUT THERE ~ 井上 章のブログ ~ http://blogs.msdn.com/chack/ 60
  • 61. リファレンス #2 ASP.NET MVC: The Official Microsoft ASP.NET Site (英語) http://www.asp.net/mvc CodePlex - ASP.NET MVC (英語) http://aspnet.codeplex.com/wikipage?title=MVC ScottGu's Blog (英語) http://weblogs.asp.net/scottgu/default.aspx Scott Hanselman's Blog (英語) http://www.hanselman.com/blog/ K. Scott Allen's Blog (英語) http://odetocode.com/Blogs/scott/default.aspx Phil Haack's Blog (英語) http://haacked.com/Default.aspx 61
  • 63. 63