どうなる？Visual Studioの

"クライアントサイド" Web開発の今後

ヒーロー島 秋の収穫祭 2014

2014/10/11

きよくら ならみ

自己紹介

• ハンドル：きよくら ならみ

–@kiyokura

–kiyokura.hateblo.jp

• NET系の開発やWebアプリ開発

–Microsoft MVP for ASP.NET/IIS

諸注意と免責事項

• 私個人による調査と見解であり所属する組織を代表するものではありません

• 万が一、本セッションの内容の誤りに起因する何らかの損害が発生した場合においても、私は一切の責任を負うことができませんご了承ください

アジェンダ

• Web開発におけるクライアントサイド

• Web開発 in Visual Studio 2013

• 非VSなWeb開発の世界の”今”

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

• まとめ

Web開発におけるクライアントサイド

サーバサイドとクライアントサイド

webサーバ上で処理される世界

webブラウザ上で処理される世界

クライアントサイド

サーバサイド

.NETJavaPHP

RubyPerl

... などなど

HTMLCSSJavaScript

だいたいこんな感じ

Flash/FlexSilverlight

最近？の傾向

• クライアントサイド ＞ サーバサイド

• HTML+CSS+JS ＞ プラグイン

• 要因…かも？

–スマートデバイスの増加

–RIAプラグインの衰退

–環境の充実

「鶏と卵」な点もあるとは思いま

すが…

JS事情：AltJS

• JavaScriptにコンパイル

• 一例

–TypeScript

–CoffeeScript

–Haxe

–JSX

–Dart

JavaScript is Assembly Language for the Web

By Scott Hanselman

JS事情：MVC/MVVMフレームワーク

• シングルページアプリケーション(SPA)

–サーバの役割はWebAPI

• 代表例

–AngularJS

–Backbone.js

–Knockout.js

–Ember.js

–vue.jsサーバはJSONを出し

入れだけしてくれればよいのじゃよ！（極論）

Webブラウザ

参考：SPAのアーキテクチャ例

Webサーバ

静的ファイルor

プログラムHTML

Web API

DB

HTML

JavaScript

・ビジネスロジック・ステート管理・画面管理・その他諸々

JSONJSON

CSS事情：CSSプリプロセッサ

• CSSにコンパイル

• 代表例

–Sass（scss,sass）

–Less

–Stylus

先生、CSSも文化的に書きたいです()

ここまでのまとめ

• クライアントサイドの比重アップ

• 役割の増大、加速する複雑さ

• これらに対するアプローチ

–AltJS

–MV*フレームワーク

–CSSプリプロセッサ

あれ？ちょっとまって。

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

我々は武器を手に入れた、しかし

• 複雑な問題に対処するための武器

• しかし武器を使いこなすスキルの要求

Answer:「優れたツールを活用しましょう」

Web開発 in Visual Studio 2013

Web開発 in Visual Studio 2013

• VSのWeb開発＝ASP.NET？

• いいえ、それだけではありません

• HTML/JavaScript/CSS開発環境としてもかなり最強クラス

VSのクライアントサイド開発事情

• VS組み込みのエディタ– インテリセンスやリファクタリング機能

• JavaScriptやCSSにも効きます

• デバッグ機能– JavaScriptのステップ実行も

• パッケージマネージャ– NuGetでライブラリ管理– 依存関係も自動解決

• TypeScriptコンパイラ– TypeScriptコンパイラ内蔵（Update 2）

• その他色々便利機能

最強アドオン：Web Essentials

• Webクライアントサイド開発関連の色々な機能を追加

• 一例

–HTML/JS/CSSエディタの機能強化

–CoffeeScript/Less/Sassコンパイラ

–TypeScriptエディタの機能強化

–ブラウザリンク拡張

• 無償版（Express for Web）でも可

詳しい話は…

• 詳しく紹介すると1時間でも話しきれないので…

• 以前に行ったセッション資料などをご参照ください

–「無償版Visual StudioでいろいろWeb開発」@プログラミング生放送

–http://www.slideshare.net/kiyokura/visual-studioweb-35861495

ここまでのまとめ

• Visual Studio + Web Essentialsはかなり最強？

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

VS最強っぽい、とはいえ…

• 普通は、.NETの開発してない人はVS使ってない

• macの人も多い

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

• フロントエンドは好み＆環境で

–Eclipse / JetBrains系 / NetBeans …

–vim / emacs / sublime text / atom …

• Node.jsを中心としたエコシステムがトレンドとして存在

Node.js

• サーバサイドJavaScript

–サーバサイドでJavaScriptを実行する

–サーバサイドプログラミング可能

• 最近はクライアントサイド開発の”インフラ”として活用されている

取り回しと使い勝手の良さ

• マルチプラットホーム

–Windows/mac/Linux

• パッケージマネージャ

–npm

Node.jsで動作するツールの例

• タスク自動化– grunt / gulp

• パッケージ・ライブラリ管理– npm / bower

• スキャフォールディング– Yeoman

• コンパイラ– CoffeeScript / TypeScript / Sass / Less

• 構文チェック– jshint / TSLint

• テスト– karma

一例

1. npmで必要なツールを導入

2. bowerで依存するライブラリを管理

3. gulpで一連の処理を自動化

– 構文チェック

– AltJSのコンパイル

– テスト実行

– デプロイ

ここまでのまとめ

• node.jsを中心としたエコシステムがトレンド

• 日々ツールが開発され進歩している

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

最近のマイクロソフトの傾向

• Microsoft <3 OSS– 「<3」＝ハートマーク

• OSSのプロダクト– TypeScript– ASP.NET– Azure関連のSDK などなど…

• OSS専門の子会社も設立– Microsoft Open Technologies– 外部のOSSに積極的にコミット

ASP.NET と Web Toolsのチームは顕著

• ASP.NET vNext は…

–githubでホスト

–macとLinuxで動く？

• 動くだけではなく、開発できることも視野に入れてる模様

開発エコシステムも変化するかも？

• node.jsを中心としたエコシステムを取り入れそうな動きが垣間見られる

ここから先は特に、予想と想像でできています。なんの保証もない点をご了承ください。

『Introducing Gulp, Grunt, Bower, and npm support for Visual Studio』

• 9/2のScott Hanselmanのエントリ– http://www.hanselman.com/blog/Introd

ucingGulpGruntBowerAndNpmSupportForVisualStudio.aspx

• VS2013向けのアドオンを紹介–クライアントサイドの色々はGulpとかGrunt

で回そうぜ

–クライアントサイドのライブラリはbowerで管理したらいいんじゃない？

–…的な空気感。

VS “14” CTP 4を見てみると…

• ASP.NET vNextのプロジェクトで…

• jQuery他JavaScriptライブラリが…

• NuGetの管理に入ってない！！！

–とはいえ、bowerが標準で導入されているわけでもない

次のバージョンでどうなるかはまだわかりませんが、今後も注目しておいた方がいいかも

ここまでのまとめ

• どうなるかはまだわからないが…

• よりオープンな世界に準じていく可能性は否定できない

まとめ

Web開発のクライアントサイド事情

• クライアントサイドの比重アップ

• 役割の増大、加速する複雑さ

• これらに対応するアプローチの登場

• 開発者に求められるスキルも増加

Web開発 in Visual Studio 2013

• 強力なVisual Studioの機能

• さらに強力なWeb Essentials

• NuGetを中心としたエコシステム

• Visual Studio + Web Essentials は超強力なWebクライアントサイド開発環境

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

• node.jsを中心としたエコシステムがトレンド

• 日々ツールが開発され進歩している

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

• 既にnodeを中心としたエコシステムを取り入れる動きがみられる

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

ASP.NET開発者も“クライアントサイドWeb開発”

のトレンドにアンテナを張っておいた方が良さそう

おまけ

Visual Studio Online “monaco”

• ブラウザで動作するIDE

• 色々な言語をサポート

• node.jsが動く！

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