asp.net と nuget でもう一回始める、今どきの web アプリ開発
TRANSCRIPT
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 は最強レベルに便利なのでもっと頼ろう