ふくあず ～春の訪れは突然に あの日あの時あの場所で ～ Japan Azure User Group 福岡 の資料です。

1. Microsoft Openness
～ TypeScript と Visual Studio Code ～
井上 章 (いのうえ あきら)
http://aka.ms/chack
日本マイクロソフト株式会社
デベロッパー エバンジェリズム統括本部 (DX)
エバンジェリスト

2. 井上 章 (いのうえ あきら)
エバンジェリスト
http://aka.ms/chack
2008 年マイクロソフト入社。
主に .NET/ASP.NET や Visual Studio,
Microsoft Azure などの開発技術を専門とする
エバンジェリストとして、技術書籍やオンライ
ン記事などの執筆、さまざまな技術イベントで
の講演などを行う。

3. HTML & Plug-ins
Flash
Silverlight
Java Applet
ActiveX
…

4. HTML5 & CSS3 & JavaScript

5. HTML5 & CSS3 & JavaScript
(function ($) {
var offsetX = 20, offsetY = 20;
$.widget('qs.infobox', {
options: {
dataUrl: '', maxItems: 10
},
_create: function () {
var that = this,name = this.name;
},
display: function (event, tagName) {
$.ajax({
url: url,
dataType: 'jsonp',
success: function (data) {
},
});
},
});
} (jQuery));
<div class="hoge" />
.hoge {
color: red;
background-color: #b6ff00;
border-radius: 8px;
}

6. JavaScript is the
Assembly Language of the Web.
by Scott Hanselman.

7. 





Problems of JavaScript

8. Large scale JavaScript development is hard.

9. TypeScript
Any browser. Any host. Any OS.
Open Source.

10. 





Any browser. Any host. Any OS. Open Source.

12. Official Web Sites
www.typescriptlang.org
クイック スタート
サンプル
github.com/Microsoft/TypeScript
ソースコード
ドキュメント

13. TypeScript compilation process
TypeScript
ファイル
(*.ts)
TypeScript
コンパイラ
(tsc.js)
JavaScript
ファイル
(*.js)
TypeScript
型定義ファイル
(*.d.ts)
JavaScript
実行エンジン
(Browser, …)
Node.js または
WSH (WScript.Shell)
で実行
ECMAScript 3 または
ECMAScript 5 で生成
(ECMAScript 2015 試験的実装)
Web ブラウザーや
Node.js など

14. TypeScript Type System Example
// Any
var x: any; // 明示的
var y; // y: any と同じ
var z: { a; b; }; // z: { a: any; b: any; } と同じ
function f(x) { // f(x: any): void と同じ
console.log(x);
}
// Number
var x: number; // 明示的
var y = 0; // y: number と同じ
var z = 123.456; // z: number = 123.456 と同じ
// Boolean
var b: boolean; // 明示的
var yes = true; // yes: boolean = true と同じ
var no = false; // no: boolean = false と同じ
// String
var s: string; // 明示的
var empty = ""; // empty: string = "" と同じ
var abc = 'abc'; // abc: string = 'abc' と同じ
// Null
var n: number = null; // 基本型は Null 設定可
var x = null; // x: any = null と同じ
// Undefined
var n: number; // n: number = undefined と同じ
var x = undefined; // x: any = undefined と同じ
// Enum
enum Color { Red, Green, Blue }
var myColor = Color.Red;
Console.log(Color[myColor]); // Red

15. TypeScript Interface, Classes Example
interface Dog {
name: string;
Talk: () => string;
}
class Corgi implements Dog {
name: string;
constructor(name: string) {
this.name = name;
}
Talk(): string {
return "Bow wow!";
}
}
class myDog extends Corgi {
constructor() {
super("reo");
}
Talk(): string {
return "Wan wan!";
}
}
var reo = new myDog();
alert(reo.Talk());

16. 


Generics : Parameterized Types
class Human<T> {
constructor(public name: T) { }
Talk(): T { return this.name; }
}
var me = new Human<string>("Akira");
alert(me.Talk());

17. 

Arrow Function Expressions
var s1 = function (x: number) { return Math.sin(x); } // 標準式
var s2 = (x: number) => { return Math.sin(x); }
var s3 = (x: number) => Math.sin(x)
var s4 = x => { return Math.sin(x); }
var s5 = x => Math.sin(x)
var s0: (x: number) => number;
s0 = x => Math.sin(x)

18. 

Get Accessor / Set Accessor
class Who {
private _name: string;
get Name() { return this._name; }
set Name(name: string) { this._name = name; }
}
var me = new Who();
me.Name = "Akira Inoue";
console.log(me.Name);

19. Google TypeScript + VS Code

20. Visual Studio Code
http://code.visualstudio.com/
Code optimized editor
Intellisense, debugging, GIT
Windows + Mac + Linux
Open Source

21. runtimes node.js, ASP.NET Core 1.0, Unity, Office
ソース
コントロール
git
タスク実行
gulp
grunt
…
エディタ
30 以上の
開発言語
拡張機能 Debuggers, Languages Linters, Snippets, Themes ...

22.  Yeoman (http://yeoman.io/)
 クロスプラットフォーム ツール群
 Windows, Mac OS, Linux
 下記のツールで構成
 yo : スキャフォールディング ツール
 Bower, npm : パッケージ マネージャー
 Grunt, Gulp : タスクランナー/ビルドツール
 yo generator for ASP.NET Core
 ASP.NET Core プロジェクト生成ツール
Web 開発クライアント ツール

23. https://github.com/microsoft/vscode

25. Erich Gamma
Distinguished Engineer
Microsoft
Design Pattern の GoF の一人
Kent Beck とともに JUnit を開発
IBM 時代は Eclipse JDT の設計リーダー
2011 年 6 月から Visual Studio チームに参画

26. + Squirrel をアプリケーションのアップデート機能に
+ FirstMate を TextMate シンタックス バンドリング サポートに
クロスプラットフォームの
デスクトップ アプリケーション シェル
(旧 Atom Shell)

27. Visual Studio
Dev Essentials
AND MORE…
http://aka.ms/vsfreejp
開発ツール
Visual Studio Community
Visual Studio Code
クラウド サービス
Visual Studio Team Services
$25/month Azure credits
ソフトウェア
SQL Server Developer Edition
R Server Developer Edition
Parallels for Mac Pro (3 か月間)
Windows 10 Development VHD (60 日評価版)
Office Online Apps
Power BI / App Insights / HockeyApp Free Plan
トレーニング & サポート
Pluralsight (3 か月間)
WintellectNOW (3 か月間)
Xamarin University
Microsoft Virtual Academy

28. インフラ技術者、開発者をはじめ、IT に携わるすべてのエンジニアのための技術コンファレンス
http://aka.ms/decode16
2016 年 5 月 24 日 ～ 25 日
ザ・プリンス パークタワー東京

29. Microsoft

30. 本情報の内容（添付文書、リンク先などを含む）は、作成日時点でのものであり、予告なく変更される場合があります。