テスターですが何か?

ホビープログラマ略してHPです

A look at ASP.NET MVC4 日本語解説 前編

leave a comment »

2/19 オランダで行われたTechDays2012でのScott Guthrieのセッションが動画で公開されています。

A look at ASP.NET MVC 4 (Channel9)

タイトルは「A look at ASP.NET MVC4」ですが、ASP.NET全体だけではなくWeb開発全体(データアクセス、クライアントスクリプト)についても触れています。もちろん全編英語なんですが、Visual Studioを使用してのデモが中心なので、コードが読めればだいたい理解できると思います。(たぶん...っていうかこのくらいの英語は何となく分からないと新しい情報を吸収するのは難しいです)個人的にも非常に興味深い内容なので、ざっくりと日本語でまとめたいと思います。あくまで「ざっくり」です。

ASP.NET MVC4新機能

  • Bundling/Minification Support
  • Database Migration (EF CodeFirst)
  • Web APIs
  • Mobile Web
  • Real Time Communication
  • Asynchronous Support

これらの機能を利用するためにサーバーには何もインストールしなくてもいい、必要なアセンブリを一緒にデプロイするだけ。(Windows Server/Azureともに)

MVC4はGoLiveライセンス

// デモPCにChromeのショートカットが

MVC4のプロジェクトテンプレートの説明

  • Internet
  • Intranet
  • Mobile
  • SPA
  • WebAPI

デモ(インターネットアプリケーションテンプレート)

  • 見た目がカッコよくなってるぜ
  • Bundlingはデフォルトで有効(JS,CSSを圧縮)
  • セマンティックタグ(<section>など)を使用
  • ajaxベースのログイン/登録操作、ファイナルリリースではOAuth2をサポート予定(liveIDなどでログイン)

Bundling and Minification

JavaScript、CSSの読み込みのためのHTTPのリクエスト数・サイズを小さし、パフォーマンスを向上させる。

今まではこうやって書いていた

<link href="styles/reset.css" rel="Stylesheet" />
<link href="styles/styles.css" rel="Stylesheet" />
<link href="styles/content.css" rel="Stylesheet" />
<link href="styles/glocals.css" rel="Stylesheet" />
<link href="styles/forms.css" rel="Stylesheet" />
<link href="styles/menu.css" rel="Stylesheet" />

こう書くと6回HTTP通信が行われる。今後は1つの記述「(ディレクトリ名)/css」でまとめて読み込みが行うことができる。

<link href="styles/css" rel="Stylesheet" />

コメント・改行・空白がカットされ、コンパクトになる。JavaScriptであれば以下のような記述

<script src="scripts/js"></script>

デモ

IEの開発者ツール(F12)でHTTPリクエスト数を確認して、リクエスト数・通信量が減っていることを確認。

JavaScript,CSSが1つのファイルに結合されていて、改行・空白が除去されていることを確認。

開発者はスクリプトの目的に応じてファイルを分け、読みやすいように改行や空白を入れて書いておいてもそのまま利用できる。

ヘルパーを使って、js/cssのファイル名をわからなくするようにできる。以下のように書くとクライアントからHTMLソースにはハッシュが表示され、ファイル名はわからない。

<script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/scripts/js")></script>

「Bundling and Minification」はMVCだけじゃなくて、WebFormでも動くよ。

Razorの新機能

URL Resolution Enhancements

HTMLに書かれているチルダ(~)を解釈できるようになったので、今まで書いていた記述

<script src="@Url.Content("~/Script/Site.js")"></script>

は、このように書くことができる

<script src="~/Script/Site.js"></script>

Conditional Attribute Enhancements

HTML要素・属性を条件に応じて出力する/しないの制御が大変だった。こんな感じに書く必要がある。
@{
  string myClass = null;

  if (someCondition){
    myClass = "shinyFancy";
  }
}

<div @{if (myClass != null) { <text>class="@myClass"</text> } } Content</div>

今後は、こんな感じに簡単に記述できる。

@{
  string myClass = null;

  if (someCondition){
    myClass = "shinyFancy";
  }
}

<div class="@myClass">Content</div>

こう書くとmyClassがnullの場合は「class=」の部分も出力されない

Database Migrations

Entity Framework Code Firstの話、Migration機能とは、コードからデータベーススキーマを変更できるようにすること。DBAに渡すためのSQLを生することも可能。

デモ (EF 4.3)

  • NugetでEFを更新(update-package EntityFramework)
  • モデル作成し、スキャフォールディングでCRUD操作を行うController,Viewを作成
  • データを何件か登録、データベース・テーブルが作成されていることを確認
  • Enable-MigrationをPackage manage Consoleで実行→「Migration」フォルダにタイムスタンプ付きのデータベース移行用のコードが生成される
  • モデルを変更(プロパティを追加)
  • Add-Migration (任意の名前)を実行→「Migration」フォルダに、列を追加するためのコードが自動生成される
  • Udatate-Databaseを実行→モデルの変更がデータベースに反映される
  • モデルを変更(NameプロパティにRequired属性を付加)
  • Add-Migration (任意の名前)を実行→「Migration」フォルダに、列属性を変更(NULLを許可しない)するためのコードが自動生成される
  • Udatate-Databaseを実行→モデルの変更がデータベースに反映される
  • Update-Database (Migrationファイル名)でロールバックも可能
  • Update-Database -Script -SourceMigration"移行前" -TargetMigration"移行後" でデータベース変更用のSQLを生成することができる(本番環境適用用など)
  • SQLを作らなくてもサーバーデプロイすれば差分をとって自動的にスキーマを移行可能

 

Written by david9142

2012年3月13日 @ 1:08 AM

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。