javascriptの開発生産性をC#と同じレベルにする Visual Studio 2017 TypeScript＋npm＋WebPack

1. Visual Studio
TypeScript + npm +WebPack
javaScriptの生産性をC#と同じレベルにする

2. JavaScriptとC#の生産性の違いは
どれぐらいですか？
• 2倍
• 5倍
• 10倍
• JavaScriptで10,000行のプログラムを書く勇気はあ
りますか？

3. javaScriptの生産性を
C#と同じレベルにする
目標

4. Visual Studio 2017
• SharePoint Onlineアドインプロジェクトでデモします
• Office365用 SPAアプリ
（ASP.NET MVCでもほぼ同じ手順で利用できます）

5. はじめのプロジェクト

9. TypeScript導入

15. npm導入
JavaScriptのサーバーサイドのパッケージ管理ツール
フロントエンドもnpmで管理できる

16. @types/パッケージ

18. npmでパッケージ管理
定義だけではなくJSライブラリ自体も管理
commonJSのパッケージ管理

20. npmを使ってライブラリを取得

22. Webpack導入
複数のJavaScriptを１つにまとめるツール

24. webpack用のパッケージ

28. React導入
Facebookが提供するフロントエンドライブラリ

37. デバッグ

38. このままでもデバッグ可能だが。。

39. React関連のJSを分ける

43. リファクタリング

46. まとめ
• JavaScriptの生産性を上げるために
• タイプセーフ・インテリセンス
• TypeScriptを利用してタイプセーフの世界に、インテリセンスも
利用できて開発速度アップ
• プログラムの依存管理
• npm+ webpackでアセンブリの参照のようなパッケージの依存
関係を管理、ソースもバンドルできてJSの管理は簡単
• ソースレベルのデバッグ
• Webpackでは出力されるMAPファイルでTypeScriptレベルでデ
バッグも可能
• リファクタリング
• 名前の変更は複数ファイル・複数プロジェクトにまたがって利
用可能