Visual Studio 2012 と ASP.NET に見る、最新 Web 開発の魅力

日本マイクロソフト株式会社
デベロッパー & プラットフォーム統括本部エバンジェリスト
井上章（いのうえあきら）blogs.msdn.com/chack

セッションのゴール
Session Takeaways

• Visual Studio 2012 の Web 開発新機能を学ぶ

• Web 開発のトレンドと今後を知る

Developer Camp | 2012 Japan Fall

アジェンダ
The NEW Visual Studio 2012 Web Developments

• Web 開発のトレンド
• Visual Studio 2012 Web 開発新機能
• One ASP.NET
• デバッグとテスト
• Web アプリの発行
• Web 開発の今後と Visual Studio 2012


Productivity Future Vision
近未来の IT, Cloud, Web ...

• 不可欠な Web 技術 (HTTP 1.1, HTML5, CSS3 ...)
• Web API の進化と普及 (REST, JSON ...)
• サーバーロジックとクライアント UI の疎結合
• クライアント側実装の多様化
• HTML5, CSS3, ECMAScript 5
• マルチデバイス (PC, Tablet, Mobile …)

• レスポンシブ Web デザイン


マルチデバイスエクスペリエンス
Devices, Platforms, Browsers

• クロスデバイス
• PC, スマートフォン, タブレット ...

• クロスプラットフォーム
• iOS, Android, Windows Phone ...

• クロスブラウザー
• Web 標準と HTML5 / CSS3
• 実装レベル差異への対応


モダン Web アプリエクスペリエンス
Single Page Application Architecture

ASP.NET

HTML
View
HTTP
Async

View
Model REST Web API
JSON
クライアント XML サーバー

できることなら楽したい ...
HTML, CSS, JavaScript のコーディング

支援機能がたくさん！

Visual Studio 2012
Web 開発新機能

HTML エディターの進化
Improvements of HTML Editor

• インテリセンス・コードスニペットの強化
• HTML5 スキーマ対応
• 開始タグと終了タグの同期リネーム
• 各要素のスマートタスク表示
• 容易なユーザーコントロールへの展開


CSS エディターの進化
Improvements of CSS Editor

• CSS3 スキーマ対応
• ベンダープレフィックス
• メディアクエリースニペット
• カラーピッカー
• 階層形式インデント
• カスタムリージョンコメント


JavaScript エディターの進化
Improvements of JavaScript Editor

• ECMAScript 5 サポート
• HTML5 APIs サポート
• インテリセンスコメントの
暗黙的参照とオーバーロード
• アウトライン表示
• 定義へ移動


さらに進化した Web 開発支援機能 #1
Improvements of Web Development

• Page Inspector (ページインスペクター)
• HTML, CSS の確認と検査
• サーバーサイドコード連動
• ページのプレビュー

• 画像のサムネイル表示


さらに進化した Web 開発支援機能 #2
Improvements of Web Development

• デバッグ用ブラウザーの切り替え
• フォルダー種別による
各種ファイルの追加メニュー
(Web フォーム)


One ASP.NET
ASP.NET Web Stack

※ One ASP.NET - Making JSON Web APIs with ASP.NET MVC 4 Beta and ASP.NET Web API : www.hanselman.com

ASP.NET Web フォーム
Improvements of ASP.NET Web Forms

豊富なサーバーコントロール
イベント駆動型プログラミング
• HTML5 対応プロジェクトテンプレート
• NuGet パッケージマネージャー対応
• URL ルーティング
• モデルバインディング
• 強く型付けされたデータコントロール


ASP.NET MVC 4
Improvements of ASP.NET MVC 4

HTML ベースの UI 開発
Model-View-Controller パターン
• HTML5 対応プロジェクトテンプレート
• モバイルアプリケーションテンプレート
• Display Modes とビューの切り替え
• スクリプトの自動縮小化 & 結合処理
• Task, async, await による非同期アクション
• Task-based Asynchronous Pattern (TAP)


ASP.NET Web API
New Framework for HTTP Services

RESTful サービス構築のためのフレームワーク
MVC 4 プロジェクトテンプレートの一部として提供

• URL ルーティング
• モデルバインディング
• スキャフォールディング
(w/ Entity Framework)
• OData クエリパラメータ
(Microsoft.AspNet.WebApi.Odata)


SignalR
Async library for .NET

リアルタイム・非同期・双方向通信ライブラリ
NuGet パッケージとして提供

• クライアント - サーバー間の永続的コネクション
• トランスポートの自動ネゴシエーション
• WebSocket, Server-Sent Events, Forever Frames, Long Polling

• サーバーからクライアントへのプッシュや RPC 通信
• 1 サーバーあたり数千の接続を非同期で処理

Web アプリのデバッグ
Improvements of Debugging Tools

• JavaScript コンソール
• JavaScript エラーの確認
• 入力プロンプトによるスクリプト実行
• DOM Explorer
• 対話形式の HTML, CSS の表示と操作
• IIS Express
• 開発向けに最適化された軽量 Web サーバー
• これまでの ASP.NET 開発サーバーに代わり既定で使用される

Web アプリのテスト
Improvements of Testing Tools

• JavaScript の単体テスト
• Jasmine / QUnit をテストエクスプローラーに統合可能
• 拡張機能: Chutzpah※ test adapter for Visual Studio 2012

• Web パフォーマンスとロードテストのプロジェクト
• 容易なパフォーマンスとストレステストの実施
• 同時アクセスユーザー数や使用ブラウザーなどをシミュレート

※ フツパ


Web アプリの発行
Web Publishing Improvements

• 発行時の Web.config の変換とプレビュー機能
• 変換前と変換後の Web.config を IDE で比較可能に

• 容易になった Windows Azure への発行
• Windows Azure Web サイト, クラウドサービス
• SQL データベースへのマイグレーション

• TFS (Team Foundation Service) の利用
• TFS を利用したプロジェクト管理とソーシャル開発
• Windows Azure への発行と継続的インテグレーション

Web 開発の今後と Visual Studio 2012

言語とフレームワーク & ライブラリ
Web 開発の今後

• HTML5 / CSS3
• Web 標準として急速に普及
• マルチプラットフォームにおける共通 UI マークアップ
• 残るクロスブラウザ・クロスプラットフォーム問題


言語とフレームワーク & ライブラリ
Web 開発の今後

• JavaScript
• 第一級のプログラミング言語としての進化と普及
• オブジェクト指向の知識と理解

• JavaScript ライブラリの普及やサーバーサイドへの応用
• jQuery / jQuery UI / jQuery Mobile / Modernizr / knockout.js ...

• TypeScript, CoffeeScript


サーバーサイドのサービス化とその利用
Web 開発の今後

• 進む Web API の利用
• サーバーサイドのサービスインターフェースの実装と公開
• 実装手段の選択、非同期処理、ステートレス ...

• クライアントサイド実装の多様化
• Web アプリケーションアーキテクチャの変化
• 非同期処理の知識と理解
• マルチデバイス対応


ネイティブアプリ開発のための Web 技術
Web 開発の今後

• 応用が進む HTML5 + CSS3 + JavaScript
• Windows 8: Windows ストアアプリ開発
• HTML5 + CSS3 + JavaScript + WinRT APIs
• Windows デベロッパーセンター: http://dev.windows.com/


統合 Web 開発環境の必要性
開発者が避けては通れない Web 技術
HTML5 / CSS3 / JavaScript ...

最適な技術選択と
アプリケーションアーキテクチャの検討
複雑化するクライアントサイド実装への対応

最適な開発環境・ツールの選択
コーディング、デバッグ、テストへの支援

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

Visual Studio 2012 と ASP.NET に見る、最新 Web 開発の魅力

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (7)

Similar to Visual Studio 2012 と ASP.NET に見る、最新 Web 開発の魅力

Similar to Visual Studio 2012 と ASP.NET に見る、最新 Web 開発の魅力 (20)

More from Akira Inoue

More from Akira Inoue (20)

Recently uploaded

Recently uploaded (9)

Visual Studio 2012 と ASP.NET に見る、最新 Web 開発の魅力