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.

3

Share

Download to read offline

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

Download to read offline

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

http://heroshima.jp/EventInfo/autumn2014

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

どうなる?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. ご清聴ありがとうございました
  • flicker001

    Jan. 25, 2018
  • shunkudou5

    Apr. 1, 2016
  • hiroyasuinoue9

    Aug. 28, 2015

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

Views

Total views

3,157

On Slideshare

0

From embeds

0

Number of embeds

72

Actions

Downloads

9

Shares

0

Comments

0

Likes

3

×