最新 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 開発オーバービュー

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

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

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

More from Akira Inoue

More from Akira Inoue (20)

Recently uploaded

Recently uploaded (10)

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