1. マイクロソフト Web 開発の今と今後
日本マイクロソフト株式会社
デベロッパー & プラットフォーム統括本部
エバンジェリスト
井上 章 (いのうえ あきら)
blogs.msdn.com/chack twitter.com/chack411

2. セッションのゴール
Session Takeaways
Web 開発のトレンドと今後 を知る
ASP.NET の概要 を学ぶ

3. アジェンダ
ASP.NET Web 開発の全体像
Web 開発のトレンド
ASP.NET Web 開発
Visual Studio 2010 Web 開発支援機能
jQuery の利用
Web 開発の今後
まとめ

4. Web 開発のトレンド

5. キーワードとトレンド
Keywords and Trend ECMAScript 5
CSS3
HTML5
jQuery
Ajax
Web API
MVC
async
REST Atom
JSON

6. Video
Productivity Future Vision 2011

7. Productivity Future Vision
近未来の IT, Cloud, Web ...
不可欠な Web 技術 (HTTP, HTML5, CSS3 ...)
Web API の進化と普及 (REST, JSON ...)
サーバー ロジック と クライアント UI の疎結合
クライアント側実装の多様化
HTML5, CSS3, ECMAScript 5
RIA (Silverlight, Flash, WPF ... )
PC, スマートフォン ...
http://www.microsoft.com/office/vision/

8. クラウド時代のアプリケーション構成
ネイティブ
アプリ
Web API
デスクトップ
Web アプリ
HTTP ASP.NET
REST
JSON
モバイル XML
Web アプリ
サーバー
クライアント

9. Demo
クラウド時代の Web アプリケーション

10. マイクロソフト Web 開発プラットフォーム
サーバー サイド 開発 クライアント サイド 開発

11. ASP.NET Web 開発

12. ASP.NET とは？
動的 Web アプリケーションの開発・実行基盤
サーバー側で動的に HTML を生成 (ASP, PHP 等と同じ)
さまざまな形態の Web 開発に対応
個人規模 Web サイト ⇔ 大規模 Web アプリケーション
クライアント ASPX
処理ロジック
HTML
動的生成
Web ブラウザー ASP.NET
サーバー

13. ASP.NET 4 フレームワーク構成
最適化された開発手法
Web フォーム
ASP.NET
ASP.NET AJAX
MVC 3
動的データ
ASP.NET 4
.NET Framework 4

14. Web フォーム vs. MVC
それぞれの特徴
D & D 配置 Web フォーム
容易な UI 開発
 豊富なサーバー コントロール
 イベント駆動型プログラミング
ASP.NET MVC Web 標準志向
テスト駆動開発
 HTML ベースの UI 開発
 Model-View-Controller パターン

15. Demo
Web フォームと ASP.NET MVC

16. Web フォーム か？ それとも MVC か？
技術選択ガイダンス
ASP.NET MVC と Web フォーム は適材適所で使い分けることが重要
プロジェクトの要求、アプリケーションの仕様、
エンジニアのスキル、開発手法、チーム編成など ...
Web フォーム ASP.NET MVC
Web 技術全般
イベント駆動型プログラミング
(HTML, JavaScript, Ajax の知識など)
主な技術スキル (VB6.0/Win フォームなどと同様)
C# / VB
C# / VB
MVC デザイン パターン
Web サーバー コントロールの活用 jQuery, Web API 等の Web 技術を活用
アプリの特徴 機能、納期重視 パフォーマンス、デザイン重視
(業務アプリなど) (インターネット向けアプリなど)
移行の容易性 VB6.0/Win フォームからの移行 HTML ページ、Classic ASP からの移行

17. Visual Studio 2010
Web 開発支援機能

18. できることなら 楽 したい ...
HTML, CSS, JavaScript のコーディング
支援機能がたくさん！

19. Visual Studio 2010 と Web 標準
コーディング支援機能
HTML 検証
HTML 4.01 / XHTML 1.0 等の
スキーマに沿った検証 (HTML5 も可能)
CSS 検証
CSS 1.0 / 2.0 / 2.1 に対する検証
アクセシビリティ検証
WCAG / Access Board 508 に沿った
アクセシビリティ検証
※ WCAG (Web Content Accessibility Guidelines) : W3C 勧告
※ Access Board 508 : 米国連邦政府ハビリテーション法 508 条

20. インテリセンスとコード スニペット
コーディング支援機能
インテリセンス
オート コンプリート
オート コレクト
コード スニペット
コード ブロックのひな形を挿入 Tab
キー入力
HTML, JavaScript,
C#, Visual Basic
で使用可能

21. JavaScript のデバッグ
Web 開発支援機能
ブレーク スクリプト
ポイント 変数の ドキュメント
ツール ヒント
表示
ウォッチ
ウィンドウ ブレーク イミディエイト
ポイント一覧 ウィンドウ

22. Demo
Visual Studio コーディング支援機能

23. JavaScript のプロファイリング
Web 開発支援機能
JavaScript のパフォーマンス分析
ASP.NET Web アプリケーション
静的 Web ページ (.htm, .js)

24. Demo
JavaScript プロファイリング

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

26. Demo
NuGet パッケージ マネージャ

27. jQuery の利用

28. jQuery のサポート
Microsoft <3 jQuery
jQuery は高速・軽量な JavaScript ライブラリ
DOM / CSS / Ajax 処理を容易に $(function() {
$('#div1').fadeIn('slow');
オープンソース });
MIX10 で jQuery のサポートを発表
John Resig (Creator of jQuery) のキーノート登壇
Visual Studio 2010 で標準採用
Web フォーム
jQuery 1.4.1 標準搭載
ASP.NET MVC 3 Tools Update
jQuery 1.5.1 & jQuery UI 1.8.11 搭載

29. jQuery コーディング支援機能
インテリセンスとコードスニペット
インテリセンス
オート コンプリート
オート コレクト
コード スニペット
コード ブロックのひな形を挿入
Tab
キー入力
jQuery Code Snippets for Visual Studio 2010 ダウンロード
http://jquerysnippets.codeplex.com/

30. Demo
jQuery の利用

31. Web 開発の今後

32. 言語とフレームワークとライブラリと ...
Web 開発の今後
HTML5 / CSS3
Web 標準として急速に普及
マルチ プラットフォームにおける共通 UI マークアップ
残るクロス ブラウザ・クロス プラットフォーム問題
Silverlight / Flash 不要？

33. 言語とフレームワークとライブラリと ...
Web 開発の今後
JavaScript
第一級のプログラミング言語としての進化と普及
オブジェクト指向の知識と理解
ECMAScript 5 にも注目
JavaScript ライブラリの活用
jQuery / jQuery UI / jQuery Mobile / Modernizr / knockout.js ...
サーバー サイドへの応用
サーバー サイド JavaScript "node.js"

34. サーバー サイドのサービス化とその利用
Web 開発の今後
進む Web API の利用
サーバー サイドのサービス インターフェースの実装と公開
実装手段の選択、非同期処理、ステートレス ...
クライアント サイド実装の多様化
クライアント サイドへの処理の分散にともなうアーキテクチャの変化
Ajax 技術の知識と理解
クロス デバイス、クロス プラットフォーム、クロス ブラウザ対応
PC、スマートフォン、スレート、各種家電、自動車・・・

35. ネイティブ アプリ開発のための Web 技術
Web 開発の今後
応用が進む HTML5 + CSS3 + JavaScript
PhoneGap (http://phonegap.com/)
スマートフォン向けアプリ開発フレームワーク
HTML5, CSS3, JavaScript でネイティブ アプリケーション開発
これまでも...
Windows デスクトップ ガジェット / Google デスクトップ ガジェット / AIR ...
そして次期 Windows へ
Windows デベロッパー センター: http://dev.windows.com/
HTML5 + CSS3 + JavaScript + APIs

36. Web 開発の今後に向けて
開発者が避けては通れない Web 技術
HTML5 / CSS3 / JavaScript ...
最適な技術選択と
アプリケーション アーキテクチャの検討
複雑化するクライアント サイド実装への対応
最適な開発環境・ツールの選択
コーディング、デバッグ、テストへの支援

37. リファレンス #1
MSDN ASP.NET デベロッパー センター
http://msdn.microsoft.com/ja-jp/asp.net/
MSDN Web 開発
http://msdn.microsoft.com/ja-jp/ff380144
Microsoft Web 開発ガイドライン
http://msdn.microsoft.com/ja-jp/asp.net/ff602016
MSDN クラウド開発
http://msdn.microsoft.com/ja-jp/ff380142
THE TRUTH IS OUT THERE ～ 井上 章のブログ ～
http://blogs.msdn.com/chack/

38. リファレンス #2
The Official Microsoft ASP.NET Site (英語)
http://www.asp.net/
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/
Steven Sanderson's blog (英語)
http://blog.stevensanderson.com/

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