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

http://blogs.msdn.com/chack/
http://twitter.com/chack411/

なんでもできる統合開発環境
Web Windows
さまざまなアプリ開発

Cloud Office
製品版
http://www.microsoft.com/japan/msdn/vstudio/

無償版！要登録
http://www.microsoft.com/japan/msdn/vstudio/express/
− Visual Web Developer 2010 Express Web 開発は
これ！

コンポーネントやアプリの一括管理ツール

無償ツール

http://www.microsoft.com/web/downloads/platform.aspx

Technology Radar January 2010

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. 出典: Technology Radar January 2010 © ThoughtWorks
https://www1.vtrenz.net/imarkownerfiles/ownerassets/
1013/Technology%20Radar%20Jan%202010.pdf

オーバービュー
− JavaScript

デバッグ対応
ブレークスクリプト
ポイントドキュメント

ツールヒント
による変数の
ウォッチイミディエイト
ウィンドウ

ウォッチブレーク
ウィンドウポイント一覧

Visual Studio と jQuery

http://jquery.com/
$(function() {
$('#button1').click(function() {
$('#div1').fadeIn('slow');
});
});

Microsoft <3 jQuery

jQuery Template
<script src="jquery.tmpl.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function(){
var products = [{name:"dog", price:12.0}, {name:"cat", price:35.5}];
$("#list").append("#template", products);
});
</script>
<script id="template" type="text/html">
<li>{%= name %} - {%= price %}</li>
</script>
<ul id="list"></ul>

Technology Radar January 2010
出典: Technology Radar January 2010 © ThoughtWorks
https://www1.vtrenz.net/imarkownerfiles/ownerassets/
1013/Technology%20Radar%20Jan%202010.pdf

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

− ASP.NET MVC 2

− HTML ベース
疎結合
− 単体テスト
− URL ルーティング

Web アプリにおける MVC パターン
1. Controller が
リクエストを受信

HTTP Request Controller 2. Controller が
Model を初期化
3. ビジネスロジック
を実行

入力と制御
4. Controller が View
を呼び出す Model
プレゼンテーション

5. View が Model
データ表現と
HTTP Response View を参照ビジネスロジック

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

実装コード例
View
<html>
<p><%: Html.TextBox("data", Model.data) %></p>
</html>

Model と Controller
public class HomeController : Controller {

MyModelService myModel = new MyModelService();

public ActionResult Edit(int id) {
MyData md = myModel.GetData(id);

return View(md);
}
}

～標準志向 Web 開発のために～
標準技術を生かした Web 開発

サーバーサイド技術を生かした Web 開発

HTML / CSS 支援機能
− HTML 検証

− CSS 検証
− CSS 1.0 / 2.0 / 2.1 に対する検証
− アクセシビリティ検証※

※ アクセシビリティ検証は Visual Studio Professional 以上の機能
※ WCAG (Web Content Accessibility Guidelines) : W3C 勧告
※ Access Board 508 : 米国連邦政府ハビリテーション法 508 条

Visual Studio 2010 入力支援機能
− インテリセンス

− コードスニペット

− jQuery インテリセンス
-vsdoc

<script src="jquery-1.4.1.js"
type="text/javascript"></script>

/// <reference path="jquery-1.4.1.js" />
function FadeOut() {
$("#Text1").fadeOut();
... jQuery ファイル
への参照の追加

− jQuery コードスニペット

http://jquerysnippets.codeplex.com/
対象ショートカット概要
HTML jq スクリプトタグと $(document).ready()
ショートカットを挿入
HTML jqscript jQuery ソースファイルへのスクリプト
タグを挿入
JavaScript func JavaScript の匿名関数を挿入
JavaScript jqclick click イベントハンドラを挿入
JavaScript jqfadein fadeIn 関数を挿入

CDN から jQuery を利用する
− Microsoft Ajax Content Delivery Network

Web サーバー
エッジキャッシュ
サーバー

ajax.microsoft.com

ホストされる JavaScript ライブラリ

http://www.asp.net/
ajaxLibrary/CDN.ashx

使用方法
<script type="text/javascript" src=
"http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js">
</script>

クリーン URL の生成
Web ページの配置パスに依存した URL

URL ルーティング

 Web ページの URL を柔軟に構築可能
 RESTful な Web アプリケーションの構築
 SEO (Search Engine Optimization) 対策

Controller の単体テスト

生成された
テストプロジェクト

Web 開発会社様支援プログラム

プログラム特典：
開発ツール

サーバーソフトウェア（検証、デモ用）
参加要件：
• Web 開発ビジネスを主業務としていること
これらのソフトウェアは MSDN サブスクリプションの（個人事業主を含む）
ダウンロードサイトから提供させていただきます • 従業員数が 25 名以下であること
技術サポート • プログラム加盟後、6 カ月以内に Windows
プラットフォームを用いた新しいドメインの
Web サイトを開発すること。
その他期間：最大 3 年間
費用：無料（プログラム終了時にプログラム提供料
として 100 米ドルお支払いいただきます）

www.microsoft.com/web/websitespark

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

http://www.asp.net/

http://aspnet.codeplex.com/

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

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

http://edtter.codeplex.com

http://jquery.com/

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

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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à jQuery と MVC で実践する標準志向 Web 開発

Similaire à jQuery と MVC で実践する標準志向 Web 開発 (20)

Plus de Akira Inoue

Plus de Akira Inoue (20)

Dernier

Dernier (10)

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