ASP.NET と NuGet でもう一回

始める、今どきの Web アプリ開発

ソーシャルグリッド株式会社

芝村達郎

自己紹介

• 芝村達郎 (twitter: @shibayan)

• 主に ASP.NET と Microsoft Azure を

利用した仕事をしています

• Microsoft MVP for ASP.NET/IIS

• ブログ：http://shiba-yan.hatenablog.jp/

はじめに

• このセッションは割と自分の主観が入っています

• ちょっと Microsoft に対して厳しい発言が出るかもしれないの

で、生暖かく見守ってください（特に社員）

セッションのゴール

• Visual Studio で HTML5, JavaScript を用いた開発は、思って

いるよりも容易であることを知ってもらう

• SideWaffle, Web Essentials 2013, ReSharper など、拡張機

能を組み合わせることで、開発がもっと楽に！楽しく！

ASP.NET について劇的ビフォーアフターというレベルではない

ASP.NET の（古い）イメージ

• ドラッグドロップでサーバーコントロールを貼り付ける

• JavaScript はおろか、HTML すら書く必要が無い

• 見た目とか、挙動とかは大体同じ

（同じサーバーコントロール使ってるから）

ASP.NET の（古い）イメージ

最近の ASP.NET

• アプリケーションは ASP.NET MVC / Web API を使う

• クライアントページは MVC で、REST API を Web API で提供

• ビューは HTML5 と JavaScript を使って書かれている

• jQuery は使っていて当たり前、Angular.js や Knockout.js などの

ライブラリも使う

最近の ASP.NET

何が変わったか

• もはやサーバーコントロール丸出しでは受け入れられない

• サーバーサイドだけ書ければいい時代は終わった

• これからはクライアントサイドの技術を使えて当たり前

• とくに ASP.NET というか Microsoft 界隈は周回遅れ気味

Microsoft と JavaScript の歴史をひも解いてみる昔の MS らしさがある、割といつも通りの展開です

Microsoft と JavaScript の歴史

• Prototype.js や jQuery に対抗し Microsoft Ajax Library を

リリース

• Microsoft Ajax Control Toolkit でサーバーコントロールのよ

うに隠蔽化を果たす

• MS からの JavaScript 書かなくても良い！というメッセージ

当時の ASP.NET AJAX

とても懐かしいですね

• ScriptManager、UpdatePanel サーバーコントロールとか

覚えてますか？

• 当時の連載が @IT にあります

• http://www.atmarkit.co.jp/fdotnet/aspnetajax/index/index.html

今の ASP.NET AJAX

割と急激な方針転換

• MIX10 で jQuery に強くコミットしていくことを発表

• 同時に Visual Studio, ASP.NET が jQuery に対応

• 新規にプロジェクトを作ると jQuery が自動的に追加される

• NuGet を使い、数多くの JavaScript ライブラリをホスト

JavaScript への対応が強化された理由

• ASP.NET MVC の成功と同時に HTML5 や JavaScript を書く

必要性が増した

• MVC はサーバーコントロールが無いので全て自分で書く

• モダンなアプリケーションのためには JavaScript を書く必要がある

• Microsoft Ajax Library が事実上の放棄

• 同時に ASP.NET AJAX も事実上、放棄されたと言える

これは MS からのメッセージ（多分）

• これまでクライアントサイド周りは、ASP.NET AJAX や

Silverlight などで面倒を見ようというスタンスだった

• 最近は開発者が自由にコードを書くための手助けをするにとど

めている感じ

• Visual Studio の継続的な強化、ブラウザで動作する Monaco

• ASP.NET vNext では Web Forms は無くなりますし

でも、今まで通り Visual Studio を

使って楽をしましょう

Visual Studio 2013NuGet はとても便利、そしてエディタは賢い

よくある誤解

• Visual Studio は Microsoft の言語専用だろ？

• HTML5 や JavaScript、CSS のエディタとしてもかなり使える

• 当然ながらインテリセンスが動作します（かなり賢い）

• 有料だから使う気が失せる

• Visual Studio Express 2013 for Web なら無料

Visual Studio は JavaScript に最適

• Visual Studio とは別に ASP.NET and Web Tools が頻繁にリ

リースされ、その都度改善されてきた歴史

• 特別扱いせず、Visual Studio の特徴であるインテリセンスや

コードスニペットなどで自然に統合

• data-* 属性の補完、vsdoc/intellisense.js を使ったメタデータ

• _references.js でインテリセンスのヒントを追加

必要なライブラリは NuGet で

• わざわざ配布元からダウンロードする必要なし

• Install-Package jQuery –Version 1.11.1 とか

• Visual Studio にインストールされている NuGet を使えば、よ

ほどマイナーなライブラリ以外はインストール出来る

提供されている JavaScript ライブラリ

• 割と何でもそろってます

• jQuery / jQuery UI / jQuery Mobile

• underscore.js

• Knockout.js

• AngularJS

• Backbone.js

• Ember.js

• Twitter Bootstrap

全て Install-Package コマンドでインストール出来る

おまけ：Microsoft Ajax CDN もあるよ

• Microsoft が運用している CDN で JavaScript ライブラリなど

が配布されている

• http://www.asp.net/ajaxlibrary/cdn.ashx

• Google Hosted Libraries よりちょっと速い

• jQuery 関係 / Modernizer / JSHint / Respond.js / Twitter

Bootstrap などサードパーティのライブラリも多い

拡張機能でさらに強化

• Visual Studio 2013 は便利だけど、さらに強化出来る

• これだけは絶対に入れとけリスト

• Visual Studio 2013 最新のアップデート

• 最新の ASP.NET and Web Tools もインストールされる

• SideWaffle for Visual Studio 2012/2013

• Web Essentials 2013

SideWaffleVisual Studio のテンプレートを超拡張

SideWaffle とは

• Visual Studio 2012/2013 のテンプレート拡張

• 開発しているのは Microsoft 社員の方（John Papa 氏）

• 非常に多くのプロジェクト、アイテムテンプレートとコードス

ニペットを提供するオープンソースプロジェクト

• http://sidewaffle.com/

提供されているテンプレート

多すぎて訳がわからないレベル

代表的なテンプレート

• AngularJS

• Knockout.js

• JSHint Rule/Ignore

• jQuery Plugin

• Google Chrome Extension

• 他にもまだまだたくさん

プロジェクトテンプレート

アイテムテンプレート

アイテムテンプレート

SideWaffle のテンプレートを

使って楽をしましょう

Web Essentials 2013名前の通り “必須” ですよ

Web Essentials 2013 とは

• Visual Studio 2013 用の拡張機能

• 開発しているのは Microsoft 社員の方（Mads Kristensen 氏）

• エディタとしての機能強化から、Minify や LESS/SASS のコン

パイル、Source Maps の自動生成など多岐にわたる

• http://vswebessentials.com/

強化される機能

割と何でもあり

割と何でもあり

割と何でもあり

面倒な処理は Web Essentials に

やってもらいましょう

おまけ：ReSharper最近は C# 以外にも Web 関連機能が入り始めてる

ReSharper とは

• Visual Studio 用の有償な拡張機能

• C#er 的には必須レベルの拡張機能

• とりあえず Alt+Enter 押しておけばいい感じにしてくれる

ReSharper + JavaScript で出来ること

• エディタのさらなる強化

• 未使用変数、引数のわかりやすい表示や削除

• リファクタリング

• 変数名、関数名のリネーム

• return 抜けなど、バグの元になる記述の警告

リファクタリング中心の機能

リファクタリング中心の機能

C# と JavaScript の両方で

使える ReSharper でさらに楽をしましょう（ただし有償プラグイン）

まとめVisual Studio だけでも凄いのに、拡張機能でもっと凄い

ゆとりでもいいじゃないか

• C# / ASP.NET 開発者には Visual Studio がある

• Visual Studio といくつかの拡張機能だけで、AngularJS や

Knockout.js などの開発環境に早変わり

Visual Studio は最強レベルに便利なのでもっと頼ろう