ASP.NET と NuGet でもう一回始める、今どきの Web アプリ開発

15,834 views
15,921 views

Published on

Published in: Technology
0 Comments
15 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
15,834
On SlideShare
0
From Embeds
0
Number of Embeds
9,305
Actions
Shares
0
Downloads
43
Comments
0
Likes
15
Embeds 0
No embeds

No notes for slide

ASP.NET と NuGet でもう一回始める、今どきの Web アプリ開発

  1. 1. ASP.NET と NuGet でもう一回 始める、今どきの Web アプリ開発 ソーシャルグリッド株式会社 芝村達郎
  2. 2. 自己紹介 • 芝村達郎 (twitter: @shibayan) • 主に ASP.NET と Microsoft Azure を 利用した仕事をしています • Microsoft MVP for ASP.NET/IIS • ブログ:http://shiba-yan.hatenablog.jp/
  3. 3. はじめに • このセッションは割と自分の主観が入っています • ちょっと Microsoft に対して厳しい発言が出るかもしれないの で、生暖かく見守ってください(特に社員)
  4. 4. セッションのゴール • Visual Studio で HTML5, JavaScript を用いた開発は、思って いるよりも容易であることを知ってもらう • SideWaffle, Web Essentials 2013, ReSharper など、拡張機 能を組み合わせることで、開発がもっと楽に!楽しく!
  5. 5. ASP.NET について 劇的ビフォーアフターというレベルではない
  6. 6. ASP.NET の(古い)イメージ • ドラッグドロップでサーバーコントロールを貼り付ける • JavaScript はおろか、HTML すら書く必要が無い • 見た目とか、挙動とかは大体同じ (同じサーバーコントロール使ってるから)
  7. 7. ASP.NET の(古い)イメージ
  8. 8. 最近の ASP.NET • アプリケーションは ASP.NET MVC / Web API を使う • クライアントページは MVC で、REST API を Web API で提供 • ビューは HTML5 と JavaScript を使って書かれている • jQuery は使っていて当たり前、Angular.js や Knockout.js などの ライブラリも使う
  9. 9. 最近の ASP.NET
  10. 10. 何が変わったか • もはやサーバーコントロール丸出しでは受け入れられない • サーバーサイドだけ書ければいい時代は終わった • これからはクライアントサイドの技術を使えて当たり前 • とくに ASP.NET というか Microsoft 界隈は周回遅れ気味
  11. 11. Microsoft と JavaScript の 歴史をひも解いてみる 昔の MS らしさがある、割といつも通りの展開です
  12. 12. Microsoft と JavaScript の歴史 • Prototype.js や jQuery に対抗し Microsoft Ajax Library を リリース • Microsoft Ajax Control Toolkit でサーバーコントロールのよ うに隠蔽化を果たす • MS からの JavaScript 書かなくても良い!というメッセージ
  13. 13. 当時の ASP.NET AJAX
  14. 14. とても懐かしいですね • ScriptManager、UpdatePanel サーバーコントロールとか 覚えてますか? • 当時の連載が @IT にあります • http://www.atmarkit.co.jp/fdotnet/aspnetajax/index/index.html
  15. 15. 今の ASP.NET AJAX
  16. 16. 割と急激な方針転換 • MIX10 で jQuery に強くコミットしていくことを発表 • 同時に Visual Studio, ASP.NET が jQuery に対応 • 新規にプロジェクトを作ると jQuery が自動的に追加される • NuGet を使い、数多くの JavaScript ライブラリをホスト
  17. 17. JavaScript への対応が強化された理由 • ASP.NET MVC の成功と同時に HTML5 や JavaScript を書く 必要性が増した • MVC はサーバーコントロールが無いので全て自分で書く • モダンなアプリケーションのためには JavaScript を書く必要がある • Microsoft Ajax Library が事実上の放棄 • 同時に ASP.NET AJAX も事実上、放棄されたと言える
  18. 18. これは MS からのメッセージ(多分) • これまでクライアントサイド周りは、ASP.NET AJAX や Silverlight などで面倒を見ようというスタンスだった • 最近は開発者が自由にコードを書くための手助けをするにとど めている感じ • Visual Studio の継続的な強化、ブラウザで動作する Monaco • ASP.NET vNext では Web Forms は無くなりますし
  19. 19. でも、今まで通り Visual Studio を 使って楽をしましょう
  20. 20. Visual Studio 2013 NuGet はとても便利、そしてエディタは賢い
  21. 21. よくある誤解 • Visual Studio は Microsoft の言語専用だろ? • HTML5 や JavaScript、CSS のエディタとしてもかなり使える • 当然ながらインテリセンスが動作します(かなり賢い) • 有料だから使う気が失せる • Visual Studio Express 2013 for Web なら無料
  22. 22. Visual Studio は JavaScript に最適 • Visual Studio とは別に ASP.NET and Web Tools が頻繁にリ リースされ、その都度改善されてきた歴史 • 特別扱いせず、Visual Studio の特徴であるインテリセンスや コードスニペットなどで自然に統合 • data-* 属性の補完、vsdoc/intellisense.js を使ったメタデータ • _references.js でインテリセンスのヒントを追加
  23. 23. 必要なライブラリは NuGet で • わざわざ配布元からダウンロードする必要なし • Install-Package jQuery –Version 1.11.1 とか • Visual Studio にインストールされている NuGet を使えば、よ ほどマイナーなライブラリ以外はインストール出来る
  24. 24. 提供されている JavaScript ライブラリ • 割と何でもそろってます • jQuery / jQuery UI / jQuery Mobile • underscore.js • Knockout.js • AngularJS • Backbone.js • Ember.js • Twitter Bootstrap 全て Install-Package コマンドで インストール出来る
  25. 25. おまけ:Microsoft Ajax CDN もあるよ • Microsoft が運用している CDN で JavaScript ライブラリなど が配布されている • http://www.asp.net/ajaxlibrary/cdn.ashx • Google Hosted Libraries よりちょっと速い • jQuery 関係 / Modernizer / JSHint / Respond.js / Twitter Bootstrap などサードパーティのライブラリも多い
  26. 26. 拡張機能でさらに強化 • Visual Studio 2013 は便利だけど、さらに強化出来る • これだけは絶対に入れとけリスト • Visual Studio 2013 最新のアップデート • 最新の ASP.NET and Web Tools もインストールされる • SideWaffle for Visual Studio 2012/2013 • Web Essentials 2013
  27. 27. SideWaffle Visual Studio のテンプレートを超拡張
  28. 28. SideWaffle とは • Visual Studio 2012/2013 のテンプレート拡張 • 開発しているのは Microsoft 社員の方(John Papa 氏) • 非常に多くのプロジェクト、アイテムテンプレートとコードス ニペットを提供するオープンソースプロジェクト • http://sidewaffle.com/
  29. 29. 提供されているテンプレート 多すぎて訳がわからないレベル
  30. 30. 代表的なテンプレート • AngularJS • Knockout.js • JSHint Rule/Ignore • jQuery Plugin • Google Chrome Extension • 他にもまだまだたくさん
  31. 31. プロジェクトテンプレート
  32. 32. アイテムテンプレート
  33. 33. アイテムテンプレート
  34. 34. SideWaffle のテンプレートを 使って楽をしましょう
  35. 35. Web Essentials 2013 名前の通り “必須” ですよ
  36. 36. Web Essentials 2013 とは • Visual Studio 2013 用の拡張機能 • 開発しているのは Microsoft 社員の方(Mads Kristensen 氏) • エディタとしての機能強化から、Minify や LESS/SASS のコン パイル、Source Maps の自動生成など多岐にわたる • http://vswebessentials.com/
  37. 37. 強化される機能
  38. 38. 割と何でもあり
  39. 39. 割と何でもあり
  40. 40. 割と何でもあり
  41. 41. 面倒な処理は Web Essentials に やってもらいましょう
  42. 42. おまけ:ReSharper 最近は C# 以外にも Web 関連機能が入り始めてる
  43. 43. ReSharper とは • Visual Studio 用の有償な拡張機能 • C#er 的には必須レベルの拡張機能 • とりあえず Alt+Enter 押しておけばいい感じにしてくれる
  44. 44. ReSharper + JavaScript で出来ること • エディタのさらなる強化 • 未使用変数、引数のわかりやすい表示や削除 • リファクタリング • 変数名、関数名のリネーム • return 抜けなど、バグの元になる記述の警告
  45. 45. リファクタリング中心の機能
  46. 46. リファクタリング中心の機能
  47. 47. C# と JavaScript の両方で 使える ReSharper でさらに楽をしましょう (ただし有償プラグイン)
  48. 48. まとめ Visual Studio だけでも凄いのに、拡張機能でもっと凄い
  49. 49. ゆとりでもいいじゃないか • C# / ASP.NET 開発者には Visual Studio がある • Visual Studio といくつかの拡張機能だけで、AngularJS や Knockout.js などの開発環境に早変わり Visual Studio は最強レベルに便利 なのでもっと頼ろう

×