1. Visual Studio 2012 による
Web アプリケーション開発
入門
どっとねっとふぁん
http://blogonos.wordpress.com/
小野 修
司
Community Open Day
2012

2. 本日のゴール
• Visual Studio 2012 を利用してWebアプリケーションの開発を始め
るための前提となる知識を身につける
– Web アプリケーションの特徴を理解する
– Visual Studio 2012 を利用した Web アプリケーションの開発方法にどの
ようなものがあるか理解する

3. Web アプリケーション
特徴
• 「ブラウザ」と「サーバ」間のやりとりを繰り返して一連の処理を
行う
– ブラウザ
• サーバにリクエスト（文字列）をなげる
• サーバから受け取った HTML（JavaScript を含む）を解釈してユーザイン
タフェースを表示する
– サーバ
• ブラウザから受け取ったリクエストに応じた処理を行い、HTML を組み立
ててブラウザに返す
– HTML というソースコードを生成している、と考えられる
• 複数のブラウザからのリクエストを同時に処理する

4. Web アプリケーション
開発／運用に必要な知識
• サーバ
– Web サーバ／データベースサーバの設定・管理
• クライアント
– ブラウザによる実装の違い
• HTML、CSS、スクリプトの解釈
• HTML5、CSS3の採用で差異は少なくなる方向に
– デバイス（PC／スレート・タブレット／スマートフォン）による違い
• 解像度
• タッチ対応
• ネットワーク
– HTTP
• セキュリティ
– SQLインジェクション／クロスサイトスクリプティング
／クロスサイトリクエストフォージェリー 等

5. Visual Studio 2012
提供される開発環境
• Webサーバー
– IIS 8.0 Express
– 実行ユーザーがIISとは異なる点に注意が必要
• DBサーバー
– SQL Server 2012 Express Edition
• 統合開発環境
– Visual Studio 2012
– 無償版（Visual Studio Express 2012 for Web)も提供予定
• フレームワーク
– ASP.NET（WebPages／WebForm／ASP.NET MVC）
– 開発言語はC#／VB

6. Visual Studio 2012
HTMLエディタとしてのVisual Studio 2012
• インテリセンス（補完）機能の充実
– HTMLタグ
– CSS
• カラーピッカー
– JavaScript
• Page Inspectorによる画面プレビュー

7. ASP.NET
フレームワークの必要性
• 開発生産性の向上
– フレームワークを利用することで作業量を削減
– 事前（設計前）にフレームワークに対する理解が必要
• 保守性の向上
– プログラムの均質化がある程度図れる
• セキュリティの確保
– セキュリティへの対応がある程度組み込まれている
– 機能として利用されている場合もある

8. ASP.NET
3つの開発方法
• ASP.NETという基盤の上で3つの開発方法が用意されている
• WebPages
– スクリプト系言語でのWeb開発経験があると理解しやすい
• WebForm
– Windowsアプリケーションの開発経験があると理解しやすい
– コントロールのドラッグ アンド ドロップ、イベントドリブンでの開発
• ASP.NET MVC
– MVCパターンのフレームワークを使ったWeb開発経験があると理解しや
すい

9. HTTPパイプライン（ASP.NETの基盤）
ブラウザ •リクエスト HttpContext
認証
承認
キャッシュ解決
I ページ処理の実行／
I セッション情報取得 Actionメソッド呼び出
S し
ProcessRequest 等．．．
セッション情報格納
キャッシュ情報格納
ブラウザ •レスポンス

10. WebPages
ブラウザ •リクエスト HttpContext
スクリプト系の記述に似て
認証 おり学習が容易
ヘルパーが作りやすい
承認
キャッシュ解決 cshtml
I vbhtml
I セッション情報取得
S
ProcessRequest
セッション情報格納
Helper
キャッシュ情報格納
ブラウザ •レスポンス

11. WebForm
aspx
ブラウザ •リクエスト
ページに貼り付ける
HttpContext
初期化
コントロールの活用が
認証
キーポイントとなる
リクエスト読
み込み
承認
コントロール page
ツリー生成
キャッシュ解決 コントロール
I イベント
I セッション情報取得 ポストバック
イベント
S
ProcessRequest レンダリング
セッション情報格納
SOAPベースの
asmx Webサービス
キャッシュ情報格納
ブラウザ •レスポンス
基本形
ashx

12. ASP.NET MVC
チーム開発時に
ブラウザ •リクエスト HttpContext
MvcHandler プログラムの記述方法を
合わせやすい
Actionメソッ
ド
(Controller)
I
I Model
S
ViewResult JSONResult
View JSON

13. Visual Studio 2012
開発の開始
• テンプレートを選択して開発を開始
– 標準のテンプレートにある程度の実装が含まれており、参考にできる
• WebPages
– Webサイトプロジェクトから作成する
• WebForm
– Webサイト／Webアプリケーションプロジェクトの両方から作成できる
• ASP.NET MVC
– Webアプリケーションプロジェクトから作成する

14. Visual Studio 2012
どの開発方法を選択すべきか
• 新規ではじめるなら ASP.NET MVC をおすすめする
– Webのいわゆる標準と呼ばれる記述や機能を適用しやすい
• HTML5、CSS3
• JQuery、JQuery Mobile
– Webデザイナーとの協業が比較的しやすい
– 開発生産性／保守性は作り方次第
– セキュリティの確保に必要な機能が用意されている