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

FlashSilverlight

Java AppletActiveX

…

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.

TypeScriptAny 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

// Anyvar 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);

}

// Numbervar x: number; // 明示的var y = 0; // y: number と同じvar z = 123.456; // z: number = 123.456 と同じ

// Booleanvar b: boolean; // 明示的var yes = true; // yes: boolean = true と同じvar no = false; // no: boolean = false と同じ

// Stringvar s: string; // 明示的var empty = ""; // empty: string = "" と同じvar abc = 'abc'; // abc: string = 'abc' と同じ

// Nullvar n: number = null; // 基本型は Null 設定可var x = null; // x: any = null と同じ

// Undefinedvar 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 Codehttp://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

タスク実行

gulpgrunt…

エディタ

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 GammaDistinguished Engineer

Microsoft

Design Pattern の GoF の一人

Kent Beck とともに JUnit を開発

IBM 時代は Eclipse JDT の設計リーダー

2011 年 6 月から Visual Studio チームに参画

+ Squirrel をアプリケーションのアップデート機能に+ FirstMate を TextMate シンタックス バンドリング サポートに

クロスプラットフォームのデスクトップ アプリケーション シェル

(旧 Atom Shell)

Visual StudioDev 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

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