マイクロソフト Web 開発の今と今後

日本マイクロソフト株式会社

デベロッパー & プラットフォーム統括本部

エバンジェリスト

井上 章 (いのうえ あきら)

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

セッションのゴール Session Takeaways

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

ASP.NET の概要 を学ぶ

アジェンダ ASP.NET Web 開発の全体像

Web 開発のトレンド

ASP.NET Web 開発

Visual Studio 2010 Web 開発支援機能

jQuery の利用

Web 開発の今後

まとめ

Web 開発のトレンド

キーワードとトレンド Keywords and Trend

HTML5 CSS3

ECMAScript 5

Ajax jQuery

Web API MVC

REST JSON

async

Atom

Video Productivity Future Vision 2011

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/

クラウド時代のアプリケーション構成

クライアント サーバー

ASP.NET

Web API

HTTP REST JSON XML

ネイティブ アプリ

デスクトップ Web アプリ

モバイル Web アプリ

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

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

ASP.NET Web 開発

ASP.NET とは？

動的 Web アプリケーションの開発・実行基盤 サーバー側で動的に HTML を生成 (ASP, PHP 等と同じ)

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

クライアント

Web ブラウザー

処理ロジック

サーバー

ASPX

HTML

ASP.NET

動的生成

ASP.NET 4 フレームワーク構成 最適化された開発手法

.NET Framework 4

ASP.NET 4

Web フォーム ASP.NET MVC 3

ASP.NET AJAX

動的データ

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

Web フォーム

豊富なサーバー コントロール

イベント駆動型プログラミング

ASP.NET MVC

HTML ベースの UI 開発

Model-View-Controller パターン

D & D 配置 容易な UI 開発

Web 標準志向 テスト駆動開発

Demo Web フォームと ASP.NET MVC

Web フォーム か？ それとも MVC か？ 技術選択ガイダンス

ASP.NET MVC と Web フォーム は適材適所で使い分けることが重要

プロジェクトの要求、アプリケーションの仕様、 エンジニアのスキル、開発手法、チーム編成など ...

Web フォーム ASP.NET MVC

主な技術スキル イベント駆動型プログラミング

(VB6.0/Win フォームなどと同様) C# / VB

Web 技術全般 (HTML, JavaScript, Ajax の知識など)

C# / VB MVC デザイン パターン

アプリの特徴 Web サーバー コントロールの活用

機能、納期重視 (業務アプリなど)

jQuery, Web API 等の Web 技術を活用 パフォーマンス、デザイン重視

(インターネット向けアプリなど)

移行の容易性 VB6.0/Win フォームからの移行 HTML ページ、Classic ASP からの移行

Visual Studio 2010 Web 開発支援機能

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

支援機能がたくさん！

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 条

インテリセンスとコード スニペット コーディング支援機能

インテリセンス

オート コンプリート

オート コレクト

コード スニペット

コード ブロックのひな形を挿入

HTML, JavaScript, C#, Visual Basic で使用可能

Tab キー入力

JavaScript のデバッグ Web 開発支援機能

ブレーク ポイント

ウォッチ ウィンドウ ブレーク

ポイント一覧

スクリプト ドキュメント

イミディエイト ウィンドウ

変数の ツール ヒント

表示

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

JavaScript のプロファイリング Web 開発支援機能

JavaScript のパフォーマンス分析

ASP.NET Web アプリケーション

静的 Web ページ (.htm, .js)

Demo JavaScript プロファイリング

パッケージ マネージャ NuGet でゲット！

NuGet (ぬげっと) とは ...

ヘルパーやオープンソース ライブラリのパッケージ公開と 管理の仕組み

Visual Studio や WebMatrix のパッケージ マネージャ機能

GUI / コンソール の 2 通りの利用方法

NuGet ギャラリーを利用したヘルパーの公開

http://nuget.org/

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

jQuery の利用

jQuery のサポート Microsoft <3 jQuery

jQuery は高速・軽量な JavaScript ライブラリ

DOM / CSS / Ajax 処理を容易に

オープンソース

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 搭載

$(function() { $('#div1').fadeIn('slow'); });

jQuery コーディング支援機能 インテリセンスとコードスニペット

インテリセンス

オート コンプリート

オート コレクト

コード スニペット

コード ブロックのひな形を挿入

Tab キー入力

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

Demo jQuery の利用

Web 開発の今後

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

HTML5 / CSS3

Web 標準として急速に普及

マルチ プラットフォームにおける共通 UI マークアップ

残るクロス ブラウザ・クロス プラットフォーム問題

Silverlight / Flash 不要？

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

JavaScript

第一級のプログラミング言語としての進化と普及

オブジェクト指向の知識と理解

ECMAScript 5 にも注目

JavaScript ライブラリの活用

jQuery / jQuery UI / jQuery Mobile / Modernizr / knockout.js ...

サーバー サイドへの応用

サーバー サイド JavaScript "node.js"

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

進む Web API の利用

サーバー サイドのサービス インターフェースの実装と公開

実装手段の選択、非同期処理、ステートレス ...

クライアント サイド実装の多様化

クライアント サイドへの処理の分散にともなうアーキテクチャの変化

Ajax 技術の知識と理解

クロス デバイス、クロス プラットフォーム、クロス ブラウザ対応

PC、スマートフォン、スレート、各種家電、自動車・・・

ネイティブ アプリ開発のための 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

Web 開発の今後に向けて

開発者が避けては通れない Web 技術

HTML5 / CSS3 / JavaScript ...

最適な技術選択と アプリケーション アーキテクチャの検討

複雑化するクライアント サイド実装への対応

最適な開発環境・ツールの選択

コーディング、デバッグ、テストへの支援

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

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

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