Download as PDF, PPTX
Uploaded byNarami Kiyokura
どうなる？Visual Studioの クライアントサイド web開発の今後
2014/10/11に開催された『ヒーロー島 秋の収穫祭 2014 を開催します』での同名セッションの資料 http://heroshima.jp/EventInfo/autumn2014
More Related Content
![[社内勉強会]SPAのすすめ](https://cdn.slidesharecdn.com/ss_thumbnails/spa-160304020346-thumbnail.jpg?width=640&height=640&fit=bounds)
![[予告篇] みんなで同時プレイするクイズWebアプリでCodeQuizに挑戦！](https://cdn.slidesharecdn.com/ss_thumbnails/osc13do-jsakamoto-trailer-130905063238--thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to どうなる？Visual Studioの クライアントサイド web開発の今後
![[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介](https://cdn.slidesharecdn.com/ss_thumbnails/net20122asp-netmvc4beta-120225025400-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
どうなる？Visual Studioの クライアントサイド web開発の今後
- 1. どうなる？ Visual Studioの "クライアントサイド" Web開発 の今後 ヒーロー島秋の収穫祭 2014 2014/10/11 きよくら ならみ
- 2. 自己紹介 • ハンドル：きよくら ならみ –@kiyokura –kiyokura.hateblo.jp •NET系の開発やWebアプリ開発 –Microsoft MVP for ASP.NET/IIS
- 3.
- 4. アジェンダ • Web開発におけるクライアントサイド • Web開発in Visual Studio 2013 • 非VSなWeb開発の世界の”今” • 次世代のVisual Sutdioの Webクライアントサイド開発 • まとめ
- 5.
- 6.
- 7. 最近？の傾向 • クライアントサイド ＞サーバサイド • HTML+CSS+JS ＞ プラグイン • 要因…かも？ –スマートデバイスの増加 –RIAプラグインの衰退 –環境の充実 「鶏と卵」な点も あるとは思いま すが…
- 8. JS事情：AltJS • JavaScriptにコンパイル • 一例 –TypeScript –CoffeeScript –Haxe –JSX –Dart JavaScriptis Assembly Language for the Web By Scott Hanselman
- 9.
- 10.
- 11.
- 12. ここまでのまとめ • クライアントサイドの比重アップ • 役割の増大、加速する複雑さ •これらに対するアプローチ –AltJS –MV*フレームワーク –CSSプリプロセッサ
- 13.
- 14.
- 15.
- 17. Web開発 in VisualStudio 2013
- 18. Web開発 in VisualStudio 2013 • VSのWeb開発＝ASP.NET？ • いいえ、それだけではありません • HTML/JavaScript/CSS開発環境とし てもかなり最強クラス
- 19. VSのクライアントサイド開発事情 • VS組み込みのエディタ – インテリセンスやリファクタリング機能 •JavaScriptやCSSにも効きます • デバッグ機能 – JavaScriptのステップ実行も • パッケージマネージャ – NuGetでライブラリ管理 – 依存関係も自動解決 • TypeScriptコンパイラ – TypeScriptコンパイラ内蔵（Update 2） • その他色々便利機能
- 20. 最強アドオン：Web Essentials • Webクライアントサイド開発関連の 色々な機能を追加 •一例 –HTML/JS/CSSエディタの機能強化 –CoffeeScript/Less/Sassコンパイラ –TypeScriptエディタの機能強化 –ブラウザリンク拡張 • 無償版（Express for Web）でも可
- 21. 詳しい話は… • 詳しく紹介すると1時間でも話しきれな いので… • 以前に行ったセッション資料などをご参 照ください –「無償版VisualStudioでいろいろWeb開 発」@プログラミング生放送 –http://www.slideshare.net/kiyokura/ visual-studioweb-35861495
- 22. ここまでのまとめ • Visual Studio+ Web Essentialsは かなり最強？
- 24.
- 25.
- 26. 非VSなWeb開発の世界の”今” • フロントエンドは好み＆環境で –Eclipse /JetBrains系 / NetBeans … –vim / emacs / sublime text / atom … • Node.jsを中心としたエコシステム がトレンドとして存在
- 27.
- 28.
- 29. Node.jsで動作するツールの例 • タスク自動化 – grunt/ gulp • パッケージ・ライブラリ管理 – npm / bower • スキャフォールディング – Yeoman • コンパイラ – CoffeeScript / TypeScript / Sass / Less • 構文チェック – jshint / TSLint • テスト – karma
- 30. 一例 1. npmで必要なツールを導入 2. bowerで依存するライブラリを管理 3.gulpで一連の処理を自動化 – 構文チェック – AltJSのコンパイル – テスト実行 – デプロイ
- 31.
- 33.
- 34. 最近のマイクロソフトの傾向 • Microsoft <3OSS – 「<3」＝ハートマーク • OSSのプロダクト – TypeScript – ASP.NET – Azure関連のSDK などなど… • OSS専門の子会社も設立 – Microsoft Open Technologies – 外部のOSSに積極的にコミット
- 35. ASP.NET と WebToolsのチームは顕著 • ASP.NET vNext は… –githubでホスト –macとLinuxで動く？ • 動くだけではなく、開発できることも視野に 入れてる模様
- 36.
- 37. 『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で 管理したらいいんじゃない？ – …的な空気感。
- 38. VS “14” CTP4を見てみると… • ASP.NET vNextのプロジェクトで… • jQuery他JavaScriptライブラリが… • NuGetの管理に入ってない！！！ –とはいえ、bowerが標準で導入されてい るわけでもない 次のバージョンでどうなるかは まだわかりませんが、 今後も注目しておいた方がいいかも
- 39.
- 40.
- 41. Web開発のクライアントサイド事情 • クライアントサイドの比重アップ • 役割の増大、加速する複雑さ •これらに対応するアプローチの登場 • 開発者に求められるスキルも増加
- 42. Web開発 in VisualStudio 2013 • 強力なVisual Studioの機能 • さらに強力なWeb Essentials • NuGetを中心としたエコシステム • Visual Studio + Web Essentials は 超強力なWebクライアントサイド 開発環境
- 43.
- 44.
- 45.
- 46.
- 47.
- 48. Visual Studio Online“monaco” • ブラウザで動作するIDE • 色々な言語をサポート • node.jsが動く！
- 49.