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

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. Web開発における
クライアントサイド

6. サーバサイドとクライアントサイド
webサーバ上で処理される世界
webブラウザ上で処理される世界
クライアントサイド
サーバサイド
.NET
Java
PHP
Ruby
Perl
... などなど
HTML
CSS
JavaScript
だいたい
こんな感じ
Flash/Flex
Silverlight

7. 最近？の傾向
• クライアントサイド ＞ サーバサイド
• HTML+CSS+JS ＞ プラグイン
• 要因…かも？
–スマートデバイスの増加
–RIAプラグインの衰退
–環境の充実
「鶏と卵」な点も
あるとは思いま
すが…

8. JS事情：AltJS
• JavaScriptにコンパイル
• 一例
–TypeScript
–CoffeeScript
–Haxe
–JSX
–Dart
JavaScript is
Assembly Language
for the Web
By Scott Hanselman

9. JS事情：MVC/MVVMフレームワーク
• シングルページアプリケーション(SPA)
–サーバの役割はWebAPI
• 代表例
–AngularJS
–Backbone.js
–Knockout.js
–Ember.js
–vue.js
サーバはJSONを出し
入れだけしてくれれば
よいのじゃよ！（極論）

10. Webブラウザ
参考：SPAのアーキテクチャ例
Webサーバ
静的ファイル
or
プログラムHTML
Web API
DB
HTML
JavaScript
・ビジネスロジック
・ステート管理
・画面管理
・その他諸々
JSONJSON

11. CSS事情：CSSプリプロセッサ
• CSSにコンパイル
• 代表例
–Sass（scss,sass）
–Less
–Stylus
先生、CSSも文化的に
書きたいです()

12. ここまでのまとめ
• クライアントサイドの比重アップ
• 役割の増大、加速する複雑さ
• これらに対するアプローチ
–AltJS
–MV*フレームワーク
–CSSプリプロセッサ

13. あれ？
ちょっとまって。

14. 開発者へのスキル要求も
増えてない？

15. 我々は武器を手に入れた、しかし
• 複雑な問題に対処するための武器
• しかし武器を使いこなすスキルの要求
Answer:
「優れたツールを活用しましょう」

17. Web開発 in Visual Studio 2013

18. Web開発 in Visual Studio 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時間でも話しきれな
いので…
• 以前に行ったセッション資料などをご参
照ください
–「無償版Visual StudioでいろいろWeb開
発」@プログラミング生放送
–http://www.slideshare.net/kiyokura/
visual-studioweb-35861495

22. ここまでのまとめ
• Visual Studio + Web Essentialsは
かなり最強？

24. 非VSなWeb開発の世界の”今”

25. VS最強っぽい、とはいえ…
• 普通は、.NETの開発してない人はVS
使ってない
• macの人も多い

26. 非VSなWeb開発の世界の”今”
• フロントエンドは好み＆環境で
–Eclipse / JetBrains系 / NetBeans …
–vim / emacs / sublime text / atom …
• Node.jsを中心としたエコシステム
がトレンドとして存在

27. Node.js
• サーバサイドJavaScript
–サーバサイドでJavaScriptを実行する
–サーバサイドプログラミング可能
• 最近はクライアントサイド開発の
”インフラ”
として活用されている

28. 取り回しと使い勝手の良さ
• マルチプラットホーム
–Windows/mac/Linux
• パッケージマネージャ
–npm

29. Node.jsで動作するツールの例
• タスク自動化
– grunt / gulp
• パッケージ・ライブラリ管理
– npm / bower
• スキャフォールディング
– Yeoman
• コンパイラ
– CoffeeScript / TypeScript / Sass / Less
• 構文チェック
– jshint / TSLint
• テスト
– karma

30. 一例
1. npmで必要なツールを導入
2. bowerで依存するライブラリを管理
3. gulpで一連の処理を自動化
– 構文チェック
– AltJSのコンパイル
– テスト実行
– デプロイ

31. ここまでのまとめ
• node.jsを中心としたエコシステムが
トレンド
• 日々ツールが開発され進歩している

33. 次世代のVisual Sutdioの
Webクライアントサイド開発

34. 最近のマイクロソフトの傾向
• Microsoft <3 OSS
– 「<3」＝ハートマーク
• OSSのプロダクト
– TypeScript
– ASP.NET
– Azure関連のSDK などなど…
• OSS専門の子会社も設立
– Microsoft Open Technologies
– 外部のOSSに積極的にコミット

35. ASP.NET と Web Toolsのチームは顕著
• ASP.NET vNext は…
–githubでホスト
–macとLinuxで動く？
• 動くだけではなく、開発できることも視野に
入れてる模様

36. 開発エコシステムも変化するかも？
• node.jsを中心としたエコシステムを取
り入れそうな動きが垣間見られる
ここから先は特に、予想と想像でできています。
なんの保証もない点をご了承ください。

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” CTP 4を見てみると…
• ASP.NET vNextのプロジェクトで…
• jQuery他JavaScriptライブラリが…
• NuGetの管理に入ってない！！！
–とはいえ、bowerが標準で導入されてい
るわけでもない
次のバージョンでどうなるかは
まだわかりませんが、
今後も注目しておいた方がいいかも

39. ここまでのまとめ
• どうなるかはまだわからないが…
• よりオープンな世界に準じていく可能
性は否定できない

40. まとめ

41. Web開発のクライアントサイド事情
• クライアントサイドの比重アップ
• 役割の増大、加速する複雑さ
• これらに対応するアプローチの登場
• 開発者に求められるスキルも増加

42. Web開発 in Visual Studio 2013
• 強力なVisual Studioの機能
• さらに強力なWeb Essentials
• NuGetを中心としたエコシステム
• Visual Studio + Web Essentials は
超強力なWebクライアントサイド
開発環境

43. 非VSなWeb開発の世界の”今”
• node.jsを中心としたエコシステムが
トレンド
• 日々ツールが開発され進歩している

44. 次世代のVisual Studioの
Webクライアントサイド開発
• 既にnodeを中心としたエコシステムを
取り入れる動きがみられる

45. 元々備えている強力な開発環境＋
オープン＆デファクトスタンダードな
エコシステムを備えるようになる？

46. ASP.NET開発者も
“クライアントサイドWeb開発”
のトレンドに
アンテナを張っておいた方が良さそう

47. おまけ

48. Visual Studio Online “monaco”
• ブラウザで動作するIDE
• 色々な言語をサポート
• node.jsが動く！

49. ご清聴ありがとうございました