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

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

HTML & Plug-ins
Flash
Silverlight
Java Applet
ActiveX
…

HTML5 & CSS3 & JavaScript

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;
}

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







Problems of JavaScript

Large scale JavaScript development is hard.

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

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

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

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 など

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

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());

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



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)



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);

Google TypeScript + VS Code

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

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

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

https://github.com/microsoft/vscode

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

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

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

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

Microsoft

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