最新 ASP.NET Web 開発オーバービュー

最新 ASP.NET Web 開発
オーバービュー

日本マイクロソフト株式会社
デベロッパー＆プラットフォーム統括本部
エバンジェリスト
井上章 (いのうえあきら)
Blog: blogs.msdn.com/chack
Twitter: @chack411
© 2011 Microsoft Corporation. All rights reserved. 1

セッションの目的とゴール
Session Objectives and Takeaways

• ASP.NET MVC 3 を中心とした
Web 開発の全体像を把握する

• Visual Studio 2010 と ASP.NET の
Web 開発の魅力を体感！


アジェンダ
• Web 開発の技術トレンド
• ASP.NET と Visual Studio
• ASP.NET MVC 概要
• Razor 構文とヘルパーの利用
• jQuery と Visual Studio
• Web 標準への対応
• ASP.NET MVC 3 on Windows Azure


Web 開発の技術トレンド


Web 技術トレンド
ECMAScript 5
CSS3
HTML5

jQuery
Ajax
Web API
MVC
RIA

REST Atom
JSON

アプリケーション構成のトレンド

WPF
Web API
Win フォーム

HTTP ASP.NET
HTML / JS
Silverlight
REST
JSON

クライアントサーバー

Web 開発プラットフォーム
サーバーサイドクライアントサイド


ASP.NET と Visual Studio


ASP.NET とは？
Web 開発のフレームワーク
• 動的 Web アプリケーションの開発・実行基盤
– サーバー側で動的に HTML を生成 (ASP, PHP 等と同じ)

• さまざまな形態の Web 開発に対応
– 個人規模 Web サイト ⇔ 大規模 Web アプリケーション

ASPX
Razor
クライアント
HTML 処理ロジック

動的生成

Web ブラウザー ASP.NET
サーバー

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

Web フォーム
ASP.NET
ASP.NET AJAX
MVC 3
動的データ

ASP.NET 4
.NET Framework 4


Web フォーム vs. MVC
それぞれの特徴

D & D 配置 Web フォーム
容易な UI 開発
 豊富なサーバーコントロール
 イベント駆動型プログラミング

ASP.NET MVC Web 標準志向
テスト駆動開発
 HTML ベースの UI 開発
 MVC パターン


ASP.NET MVC 概要


What is MVC ?
デザインパターン
M V
C
• Model
データとビジネスロジックを表現
• View
Model から取得したデータを
プレゼンテーション (UI) へ出力する
• Controller
ユーザーからの入力を受付け
View と Model を制御する

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

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

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

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

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

ASP.NET MVC 3
最新 Web アプリ開発フレームワーク
• Visual Studio 2010 用の追加コンポーネント
– Web Platform Installer (Web PI) からセットアップ可能
• オープンソース (CodePlex)
• 主な新機能
– Razor ビューエンジンの搭載
– ダイナミック ViewBag プロパティ
– グローバル Action Filters
– JsonValueProviderFactory と JSON モデルバインド
– ・・・


ASP.NET MVC 3 Tools Update
プロジェクトテンプレート機能強化
• HTML5 / CSS3 対応プロジェクトテンプレート
• Windows 認証対応プロジェクトテンプレート
• スキャフォールディング機能の強化
• 標準搭載コンポーネントの強化と NuGet 対応
– Entity Framework 4.1
– jQuery 1.5.1
– jQuery Validation 1.8.0
– jQuery UI 1.8.11
– Modernizr

 ASP.NET MVC 3 RTM (2011 年 1 月 13 日)
 ASP.NET MVC 3 Tools Update (2011 年 4 月 12 日)
- ランタイム (System.Web.Mvc.dll) は変更なし


パッケージマネージャ
NuGet でゲット！ http://nuget.org/
• NuGet (ぬげっと) とは ...
– ヘルパーやオープンソースライブラリのパッケージ公開と
管理の仕組み
– Visual Studio や WebMatrix のパッケージマネージャ機能
– GUI / コンソールの 2 通りの利用方法
– NuGet ギャラリーを利用したヘルパーの公開

© 2011 Microsoft Corporation. All rights reserved.

Razor 構文と
ASP.NET Web ページ


Razor (レイザー) !

ビューの特徴と HTML 生成
埋め込みコードブロックの利用

• MVC 3 では 2 つのビューエンジンが標準搭載
 Web フォーム (.aspx)
<div><%: DateTime.Now.ToString() %></div>
<div><%: Html.TextBox("text", Model) %></div>

 Razor (.cshtml / .vbhtml)
<div>@DateTime.Now.ToString()</div>
<div>@Html.TextBox("text", Model)</div>

– コーディングベースのビュー記述
– Web サーバーコントロールは使用しない
(ポストバックや ViewState は使用しない)
– ヘルパーメソッドで HTML タグブロックを生成

"Razor" とは
Small, Simple, Seamless

• ページ記述のための新しい構文 (記法)
@{ 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>

– シンプル & クリーン
– タイピング量とコードサイズの低減 (vs. PHP, ASPX)
– 便利なヘルパーライブラリと容易な拡張
– C# (.cshtml), Visual Basic (.vbhtml) をサポート

ASP.NET Web ページとは
Razor 構文で記述するページ定義と処理エンジン

WebMatrix ASP.NET MVC 3
Web サイト Web 開発
作成ツール HTML 生成フレームワーク
エンジン

ASP.NET Web ページ
Razor HTML
.cshtml
.vbhtml
※ 英語表記では ASP.NET Web Pages


ヘルパーの利用


ヘルパーとは？
便利な Web パーツライブラリ

@Bing.SearchBox()

@Facebook.LikeButton()

@LinkShare.GetHtml() @Twitter.Search()

@GamerCard.GetHtml()

MVC 標準ヘルパーメソッド
HTML 生成を助ける関数群

メソッド名概要
ActionLink アクション名などから a タグを生成
BeginForm form タグを生成
TextBox
input タグによる入力フィールドを生成
TextBoxFor
…

…
使用例
@Html.ActionLink("Go to Home", "Index")
@Html.TextBox("message", model.Message)
@Html.TextBoxFor(model => model.Message)

カスタムヘルパーの作成
便利な Web パーツライブラリ

• App_Code フォルダにファイルを作成
ファイル名: <ヘルパー名>.cshtml (または .vbhtml)
• @helper でヘルパーを定義
(@functions で内部関数の定義も可能)
MyHelper.cshtml
@helper Memo(string content) {
<div class="memo">
<p><strong>メモ：</strong>@content</p>
</div>
}
使用例
<html>
@MyHelper.Memo("ヘルパーを作りました！")
</html>

カスタムヘルパーの配布
NuGet ギャラリーへの公開
• カスタムヘルパーの登録方法
1. NuGet ギャラリーサイト (www.nuget.org) で
ユーザー登録
2. NuGet Package Explorer または NuGet.exe を
ダウンロード
• CodePlex - NuGet プロジェクト :
http://nuget.codeplex.com/releases
3. 作成したヘルパーに必要なファイル群を
パッケージング (.nupkg)
4. NuGet ギャラリーの My Account ページから
Access Key を入手
5. 上記ツールで Access Key を使って NuGet ギャラリー
へ発行

jQuery と Visual Studio


jQuery のサポート
Visual Studio と jQuery
• 高速・軽量な JavaScript ライブラリ
– DOM / CSS / Ajax 処理を容易に
– オープンソース $(function() {
– 公式サイト - jquery.com });$('#div1').fadeIn('slow');

– 最新バージョンは 1.6.2

• Visual Studio と jQuery
– Visual Studio 2010 & ASP.NET 4
• jQuery 1.4.1 標準搭載
– ASP.NET MVC 3 Tools Update
• jQuery 1.5.1 & jQuery UI 1.8.11 搭載


jQuery コーディング支援機能
インテリセンスとコードスニペット
• インテリセンス
– オートコンプリート
– オートコレクト

• コードスニペット
– コードブロックのひな形を挿入

Tab
キー入力

jQuery Code Snippets for Visual Studio 2010 ダウンロード
http://jquerysnippets.codeplex.com/

Visual Studio 2010
Web 標準への対応


Visual Studio 2010 と Web 標準
HTML5 / CSS3 を使う

• Web Standards Update
for Visual Studio 2010 SP1 (無償)

– 拡張機能マネージャーまたは Visual Studio ギャラリー
http://visualstudiogallery.msdn.microsoft.com/
から入手してインストール
– HTML5 / CSS3 スキーマによるインテリセンスと検証
– GeoLocation & Local Storage API インテリセンス


ASP.NET MVC 3
on Windows Azure


Azure で ASP.NET MVC 3
MVC 3 Web Role テンプレート

• Windows Azure Tools for Visual Studio
2010 v1.4 (August 2011 Release)
– ダウンロードは Web Platform Installer (Web PI) から可能
– ASP.NET MVC 3 Web Role テンプレート搭載


(参考) MVC 3 アプリの配置
依存関係のアセンブリの追加
• 配置可能な依存関係の追加から
必要なアセンブリを追加可能
• ホスティングサーバーなどに
容易に配置が可能

ビルド時に
bin へコピーされる


Edtter を作ろう！
ハンズオンラボテキスト＆サンプル公開中

• ダウンロード：
http://edtter.codeplex.com/

• サンプルが Windows Azure 上で
期間限定公開中：
http://www.edtter.com/

36

まとめ


まとめ

ASP.NET MVC 3
Web 開発フレームワーク
.cshtml
ASP.NET Web ページ .vbhtml
HTML ページ生成エンジン

Razor ヘルパー
Web ページ記述構文 Web パーツライブラリ


リファレンス #1
Microsoft Web Platform
http://www.microsoft.com/web/

MSDN ASP.NET デベロッパーセンター
http://msdn.microsoft.com/ja-jp/asp.net/default.aspx

ASP.NET MVC 3 ダウンロード
http://www.microsoft.com/downloads/details.aspx?FamilyID=d2928bc1
-f48c-4e95-a064-2a455a22c8f6&displayLang=ja

ASP.NET MVC チュートリアル
http://msdn.microsoft.com/ja-jp/asp.net/ff630143.aspx

ASP.NET MVC サンプルソースコード～ Edtter ～
http://edtter.codeplex.com/

THE TRUTH IS OUT THERE ～井上章のブログ～
http://blogs.msdn.com/chack/


リファレンス #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

Phil Haack's Blog (英語)
http://haacked.com/Default.aspx

Scott Hanselman's Blog (英語)
http://www.hanselman.com/blog/

K. Scott Allen's Blog (英語)
http://odetocode.com/Blogs/scott/default.aspx

最新 ASP.NET Web 開発オーバービュー

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a 最新 ASP.NET Web 開発オーバービュー

Similar a 最新 ASP.NET Web 開発オーバービュー (20)

Más de Akira Inoue

Más de Akira Inoue (20)

Último

Último (11)

最新 ASP.NET Web 開発オーバービュー