Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

どうなる?Visual Studioの クライアントサイド web開発の今後

2,360 views

Published on

2014/10/11に開催された『ヒーロー島 秋の収穫祭 2014 を開催します』での同名セッションの資料

http://heroshima.jp/EventInfo/autumn2014

Published in: Technology
  • Be the first to comment

どうなる?Visual Studioの クライアントサイド web開発の今後

  1. 1. どうなる? Visual Studioの "クライアントサイド" Web開発 の今後 ヒーロー島 秋の収穫祭 2014 2014/10/11 きよくら ならみ
  2. 2. 自己紹介 • ハンドル:きよくら ならみ –@kiyokura –kiyokura.hateblo.jp • NET系の開発やWebアプリ開発 –Microsoft MVP for ASP.NET/IIS
  3. 3. 諸注意と免責事項 • 私個人による調査と見解であり所属す る組織を代表するものではありません • 万が一、本セッションの内容の誤りに 起因する何らかの損害が発生した場合 においても、私は一切の責任を負うこ とができません ご了承ください
  4. 4. アジェンダ • Web開発におけるクライアントサイド • Web開発 in Visual Studio 2013 • 非VSなWeb開発の世界の”今” • 次世代のVisual Sutdioの Webクライアントサイド開発 • まとめ
  5. 5. Web開発における クライアントサイド
  6. 6. サーバサイドとクライアントサイド webサーバ上で処理される世界 webブラウザ上で処理される世界 クライアントサイド サーバサイド .NET Java PHP Ruby Perl ... などなど HTML CSS JavaScript だいたい こんな感じ Flash/Flex Silverlight
  7. 7. 最近?の傾向 • クライアントサイド > サーバサイド • HTML+CSS+JS > プラグイン • 要因…かも? –スマートデバイスの増加 –RIAプラグインの衰退 –環境の充実 「鶏と卵」な点も あるとは思いま すが…
  8. 8. JS事情:AltJS • JavaScriptにコンパイル • 一例 –TypeScript –CoffeeScript –Haxe –JSX –Dart JavaScript is Assembly Language for the Web By Scott Hanselman
  9. 9. JS事情:MVC/MVVMフレームワーク • シングルページアプリケーション(SPA) –サーバの役割はWebAPI • 代表例 –AngularJS –Backbone.js –Knockout.js –Ember.js –vue.js サーバはJSONを出し 入れだけしてくれれば よいのじゃよ!(極論)
  10. 10. Webブラウザ 参考:SPAのアーキテクチャ例 Webサーバ 静的ファイル or プログラムHTML Web API DB HTML JavaScript ・ビジネスロジック ・ステート管理 ・画面管理 ・その他諸々 JSONJSON
  11. 11. CSS事情:CSSプリプロセッサ • CSSにコンパイル • 代表例 –Sass(scss,sass) –Less –Stylus 先生、CSSも文化的に 書きたいです()
  12. 12. ここまでのまとめ • クライアントサイドの比重アップ • 役割の増大、加速する複雑さ • これらに対するアプローチ –AltJS –MV*フレームワーク –CSSプリプロセッサ
  13. 13. あれ? ちょっとまって。
  14. 14. 開発者へのスキル要求も 増えてない?
  15. 15. 我々は武器を手に入れた、しかし • 複雑な問題に対処するための武器 • しかし武器を使いこなすスキルの要求 Answer: 「優れたツールを活用しましょう」
  16. 16. Web開発 in Visual Studio 2013
  17. 17. Web開発 in Visual Studio 2013 • VSのWeb開発=ASP.NET? • いいえ、それだけではありません • HTML/JavaScript/CSS開発環境とし てもかなり最強クラス
  18. 18. VSのクライアントサイド開発事情 • VS組み込みのエディタ – インテリセンスやリファクタリング機能 • JavaScriptやCSSにも効きます • デバッグ機能 – JavaScriptのステップ実行も • パッケージマネージャ – NuGetでライブラリ管理 – 依存関係も自動解決 • TypeScriptコンパイラ – TypeScriptコンパイラ内蔵(Update 2) • その他色々便利機能
  19. 19. 最強アドオン:Web Essentials • Webクライアントサイド開発関連の 色々な機能を追加 • 一例 –HTML/JS/CSSエディタの機能強化 –CoffeeScript/Less/Sassコンパイラ –TypeScriptエディタの機能強化 –ブラウザリンク拡張 • 無償版(Express for Web)でも可
  20. 20. 詳しい話は… • 詳しく紹介すると1時間でも話しきれな いので… • 以前に行ったセッション資料などをご参 照ください –「無償版Visual StudioでいろいろWeb開 発」@プログラミング生放送 –http://www.slideshare.net/kiyokura/ visual-studioweb-35861495
  21. 21. ここまでのまとめ • Visual Studio + Web Essentialsは かなり最強?
  22. 22. 非VSなWeb開発の世界の”今”
  23. 23. VS最強っぽい、とはいえ… • 普通は、.NETの開発してない人はVS 使ってない • macの人も多い
  24. 24. 非VSなWeb開発の世界の”今” • フロントエンドは好み&環境で –Eclipse / JetBrains系 / NetBeans … –vim / emacs / sublime text / atom … • Node.jsを中心としたエコシステム がトレンドとして存在
  25. 25. Node.js • サーバサイドJavaScript –サーバサイドでJavaScriptを実行する –サーバサイドプログラミング可能 • 最近はクライアントサイド開発の ”インフラ” として活用されている
  26. 26. 取り回しと使い勝手の良さ • マルチプラットホーム –Windows/mac/Linux • パッケージマネージャ –npm
  27. 27. Node.jsで動作するツールの例 • タスク自動化 – grunt / gulp • パッケージ・ライブラリ管理 – npm / bower • スキャフォールディング – Yeoman • コンパイラ – CoffeeScript / TypeScript / Sass / Less • 構文チェック – jshint / TSLint • テスト – karma
  28. 28. 一例 1. npmで必要なツールを導入 2. bowerで依存するライブラリを管理 3. gulpで一連の処理を自動化 – 構文チェック – AltJSのコンパイル – テスト実行 – デプロイ
  29. 29. ここまでのまとめ • node.jsを中心としたエコシステムが トレンド • 日々ツールが開発され進歩している
  30. 30. 次世代のVisual Sutdioの Webクライアントサイド開発
  31. 31. 最近のマイクロソフトの傾向 • Microsoft <3 OSS – 「<3」=ハートマーク • OSSのプロダクト – TypeScript – ASP.NET – Azure関連のSDK などなど… • OSS専門の子会社も設立 – Microsoft Open Technologies – 外部のOSSに積極的にコミット
  32. 32. ASP.NET と Web Toolsのチームは顕著 • ASP.NET vNext は… –githubでホスト –macとLinuxで動く? • 動くだけではなく、開発できることも視野に 入れてる模様
  33. 33. 開発エコシステムも変化するかも? • node.jsを中心としたエコシステムを取 り入れそうな動きが垣間見られる ここから先は特に、予想と想像でできています。 なんの保証もない点をご了承ください。
  34. 34. 『Introducing Gulp, Grunt, Bower, and npm support for Visual Studio』 • 9/2のScott Hanselmanのエントリ – http://www.hanselman.com/blog/Introd ucingGulpGruntBowerAndNpmSupportFo rVisualStudio.aspx • VS2013向けのアドオンを紹介 – クライアントサイドの色々はGulpとかGrunt で回そうぜ – クライアントサイドのライブラリはbowerで 管理したらいいんじゃない? – …的な空気感。
  35. 35. VS “14” CTP 4を見てみると… • ASP.NET vNextのプロジェクトで… • jQuery他JavaScriptライブラリが… • NuGetの管理に入ってない!!! –とはいえ、bowerが標準で導入されてい るわけでもない 次のバージョンでどうなるかは まだわかりませんが、 今後も注目しておいた方がいいかも
  36. 36. ここまでのまとめ • どうなるかはまだわからないが… • よりオープンな世界に準じていく可能 性は否定できない
  37. 37. まとめ
  38. 38. Web開発のクライアントサイド事情 • クライアントサイドの比重アップ • 役割の増大、加速する複雑さ • これらに対応するアプローチの登場 • 開発者に求められるスキルも増加
  39. 39. Web開発 in Visual Studio 2013 • 強力なVisual Studioの機能 • さらに強力なWeb Essentials • NuGetを中心としたエコシステム • Visual Studio + Web Essentials は 超強力なWebクライアントサイド 開発環境
  40. 40. 非VSなWeb開発の世界の”今” • node.jsを中心としたエコシステムが トレンド • 日々ツールが開発され進歩している
  41. 41. 次世代のVisual Studioの Webクライアントサイド開発 • 既にnodeを中心としたエコシステムを 取り入れる動きがみられる
  42. 42. 元々備えている強力な開発環境+ オープン&デファクトスタンダードな エコシステムを備えるようになる?
  43. 43. ASP.NET開発者も “クライアントサイドWeb開発” のトレンドに アンテナを張っておいた方が良さそう
  44. 44. おまけ
  45. 45. Visual Studio Online “monaco” • ブラウザで動作するIDE • 色々な言語をサポート • node.jsが動く!
  46. 46. ご清聴ありがとうございました

×