SlideShare ist ein Scribd-Unternehmen logo
1 von 35
Downloaden Sie, um offline zu lesen
TypeScript ファースト ステップ
~ Any browser. Any host. Any OS. Open Source. ~
日本マイクロソフト株式会社
デベロッパー & プラットフォーム統括本部
エバンジェリスト
井上 章 (いのうえ あきら)
blogs.msdn.com/chack twitter.com/chack411
セッションのゴール
Session Takeaways
 JavaScript と Web 技術のこれまで を振り返る
 TypeScript の全体像 を学ぶ
アプリ開発のための
Web 技術
モダン Web アプリ エクスペリエンス
Single Page Application Architecture
クライアント サーバー
Scripting
Engine
REST
JSON
XML
HTML
View
Model
HTTP
View
Async
Web API
アプリ開発のための "Web 技術"
マルチデバイス エクスペリエンスと Web 技術
• HTML5 / CSS3
• クロス プラットフォームにおける共通 UI マークアップ
• JavaScript
• 第一級のプログラミング言語としての進化と普及
• JavaScript ライブラリの普及やサーバー サイドへの応用
• Web API
• 進む HTTP サービス (REST API) の利用と開発ニーズ
• ネイティブ アプリ開発への応用
• Windows ストア アプリ開発 (WinRT, WinJS)
• PhoneGap, Titanium ...
アプリケーション プラットフォームの変化
(Hardware + OS) ≒ (Browser + JavaScript)
アプリケーション プラットフォームの変化
(Hardware + OS) ≒ (Browser + JavaScript)
アプリケーション プラットフォームの変化
(Hardware + OS) ≒ (Browser + JavaScript)
.hoge {
color: red;
background-color: #b6ff00;
border-radius: 8px;
}
"JavaScript is the
Assembly Language of the Web"
by Scott Hanselman.
JavaScript (ECMAScript 3) の課題点など
Problems of JavaScript
• 大規模開発になるほどコードが複雑に
• デバッグ・テスト工数の増加
• プロトタイプベース OO 言語
• 変数スコープのへの理解
• 静的な型指定が不要
• ...
TypeScript
Any browser. Any host. Any OS. Open Source.
TypeScript
Any browser. Any host. Any OS. Open Source.
• JavaScript (ECMAScript 5) のスーパーセットとなる
新しいプログラミング言語 (現在は 0.9.0.1)
• TypeScript コードは JavaScript コードへコンパイル
• コンパイラも TypeScript で書かれている (tsc.ts → tsc.js)
• 静的型付け、クラス、モジュールをサポート
• ECMAScript 6 (草案) をベース
• コンパイラー及び開発環境
• Visual Studio 2012 プラグイン
http://go.Microsoft.com/fwlink/?LinkID=266563
• Node.js Package Manager (npm)
• WebMatrix 3
class Point {
x: number;
y: number;
constructor(x: number, y: number) {
this.x = x;
this.y = y;
}
dist() {
return Math.sqrt(
this.x * this.x +
this.y * this.y );
}
static origin = new Point(0, 0);
}
TypeScript : 2 つの入り口
Official Web Sites
www.typescriptlang.org typescript.codeplex.com
クイック スタート
サンプル
ソースコード
ドキュメント
TypeScript : Playground
ブラウザベースで手軽に体験
TypeScript の開発環境 #1
Compiler and Development Tool
• node.js パッケージ (npm)
• node.js のインストール: http://nodejs.org/
• TypeScript のインストール:
• TypeScript のコンパイル:
• TypeScript コンパイラの実体
• … ¥npm¥node_modules¥typescript¥bin¥tsc.js
TypeScript の開発環境 #2
Compiler and Development Tool
• WebMatrix 3 (http://www.microsoft.com/web/)
• 拡張機能ギャラリーから “TypeScript Tools” をインストール
TypeScript の開発環境 #3
Compiler and Development Tool
• TypeScript for Visual Studio 2012 (VS プラグイン)
• http://go.microsoft.com/fwlink/?LinkID=266563
※ Visual Studio Express 2012 for Web でも利用可能
• プロジェクト テンプレート
• [新しいプロジェクト] – [TypeScript] – [HTML Application with TypeScript]
• 新しい項目の追加
• [新しい項目...] – [Visual C#] – [TypeScript File]
VS 拡張機能: Web Essentials 2012 で
プレビュー (分割ウィンドウ) が利用可能
TypeScript Type System
動的型付けから静的型付けへ
TypeScript Type System
• 静的型付けシステムの導入
• JavaScript のあいまいさを排除
• 安全性・可読性・生産性の向上
• 型付けするか否かは自由
• 動的型付けの利点も生かせる
• any 型: すべての型の基本
• プリミティブ (基本) 型
• number, string, boolean,
null, undefined, enum
• オブジェクト型
• class, module, interface
• void 型: 戻り値なしの関数で使用
interface I { }
class C { }
module M { }
{ s: string; }
number[]
() => boolean
静的型付け記述例 (プリミティブ型)
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 Classes, Modules
クラスとモジュール
TypeScript Classes and Modules
• モジュール化の利点
• 疎結合化と相互影響の低減、再利用性の向上
• デバッグ、テスト、メンテナンスの容易性
• 大規模開発への対応
• ECMAScript 6 (草案) ベースの実装
• Class, Module, Arrow Function 構文
• オブジェクト指向プログラミングの導入
• ポピュラーなモジュールシステムもサポート (External Modules)
• CommonJS / AMD modules
interface I { }
class C { }
module M { }
{ s: string; }
number[]
() => bool
Interface, Class, Module 記述例
TypeScript Interface, Classes and Modules Example
// Interface
interface Mover {
move(): void;
getStatus(): { speed: number; };
}
interface Shaker {
shake(): void;
getStatus(): { frequency: number; };
}
interface MoverShaker extends Mover, Shaker {
getStatus(): { speed: number;
frequency: number; };
}
interface Person {
FullName: string;
Age: number;
}
function greeter(person: Person) {
}
// Module (Internal)
module Sayings {
export class Greeter {
...
}
}
var greeter = new Sayings.Greeter("world");
// Class
class Greeter {
greeting: string;
constructor (message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
var greeter = new Greeter(“world”);
greeter.greet();
ジェネリクス の利用
Generics : Parameterized Types
• ジェネリクスの導入 (v.0.9)
• パラメータ化した型の利用
• Java, C#, C++ などの静的型付け言語では一般的
class Human<T> {
constructor(public name: T) { }
Talk(): T {
return this.name;
}
}
var me = new Human<string>("Taro Yamada");
alert(me.Talk());
interface A { a: string; }
interface B extends A { b: string; }
interface C extends B { c: string; }
interface G<T, U extends B> { x: T; y: U; }
var v1: G<A, C>; // Ok
var v2: G<{ a: string }, C>; // Ok
var v3: G<A, A>; // Error
var v4: G<G<A, B>, C>; // Ok
var v5: G<any, any>; // Ok
var v6: G<any>; // Error
var v7: G; // Error
TypeScript with jQuery
"No one writes JavaScript anymore.
They write jQuery."
型定義ファイル: *.d.ts
Typing for Libraries
• 各種ライブラリの変数, オブジェクト, API の定義ファイル
• *.d.ts として環境毎に定義される
• 現在用意されている主な定義ファイル (TypeScript Source Code より)
• lib.d.ts – ECMAScript APIs, DOM APIs ...
• jquery.d.ts – jQuery
• jqueryui.d.ts – jQuery UI
• winjs.d.ts – WinJS
• winrt.d.ts – WinRT
• node.d.ts – node.js
• 下記、定義ファイル リポジトリ でも多数公開されている
https://github.com/borisyankov/DefinitelyTyped
• その他、NuGet ギャラリーからも入手可能
TypeScript で jQuery を使う
Typing for the jQuery
• TypeScript ソースコードなどから jquery.d.ts を入手
• typings¥jquery.d.ts または samples¥jquery¥jquery.d.ts
• *.ts ファイルに jquery.d.ts 参照を追加
• インテリセンス (コード補完) も有効 (Visual Studio 2012)
/// <reference path="jquery.d.ts" />
...
Roadmap & Summary
TypeScript ロードマップ
Compiler and Language Improvements
• 0.9.0
• Generics
• Overload on constants
• "export ="
• Improve compiler performance
• Improvements to type system to help model a larger variety of JS libraries
• 0.9.1
• 'typeof' support in type expression
• Project integration support in VS plugin
• 1.0
• Stabilization
• 1.x
• Async/Await, Mixins, Protected access
• ES6-compatible codegen
まとめ: TypeScript
Summary
Web アプリケーションをスケールさせるために ...
• JavaScript 開発の必要性
• JavaScript の OOP やモジュール化への対応
• デバッグ・テスト工数の削減
• C#, Java などの知識を生かした JavaScript 開発
まとめ: TypeScript
Summary
Web アプリケーションをスケールさせるために ...
TypeScript
Any browser. Any host. Any OS. Open Source.
関連リソース
Resources
• Welcome to TypeScript
• http://www.typescriptlang.org/
• TypeScript Home: CodePlex
• http://typescript.codeplex.com/
• TypeScript Language Specification
• http://go.microsoft.com/fwlink/?LinkId=267121
• Build 2012: Introducing TypeScript:
A language for application-scale JavaScript development
• http://channel9.msdn.com/Events/Build/2012/3-012
• 日本 TypeScript ユーザー会
• https://groups.google.com/forum/#!forum/typescript-japan
• Facebook: TypeScript グループ (wTypeScript)
• https://www.facebook.com/groups/wTypeScript/
Enjoy coding, Be happy with TypeScript.
© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a
commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN
THIS PRESENTATION.

Weitere ähnliche Inhalte

Was ist angesagt?

[TL03] あなたはどっち? Visual Studio Code 派と Visual Studio 派による Web フロントエンド開発 徹底紹介
[TL03] あなたはどっち? Visual Studio Code 派と Visual Studio 派による Web フロントエンド開発 徹底紹介[TL03] あなたはどっち? Visual Studio Code 派と Visual Studio 派による Web フロントエンド開発 徹底紹介
[TL03] あなたはどっち? Visual Studio Code 派と Visual Studio 派による Web フロントエンド開発 徹底紹介de:code 2017
 
本格化するクラウド ネイティブに向けて進化する開発プラットフォームと .NET
本格化するクラウド ネイティブに向けて進化する開発プラットフォームと .NET本格化するクラウド ネイティブに向けて進化する開発プラットフォームと .NET
本格化するクラウド ネイティブに向けて進化する開発プラットフォームと .NETAkira Inoue
 
ASP.NETの進化とASP.NET Core Blazorの凄さ
ASP.NETの進化とASP.NET Core Blazorの凄さASP.NETの進化とASP.NET Core Blazorの凄さ
ASP.NETの進化とASP.NET Core Blazorの凄さSho Okada
 
.NET の過去、現在、そして未来 ~ .NET 最新アップデート
.NET の過去、現在、そして未来 ~ .NET 最新アップデート.NET の過去、現在、そして未来 ~ .NET 最新アップデート
.NET の過去、現在、そして未来 ~ .NET 最新アップデートAkira Inoue
 
Vs2013 multi device shosuz
Vs2013 multi device shosuzVs2013 multi device shosuz
Vs2013 multi device shosuzShotaro Suzuki
 
【BS3】Visual Studio 2022 と .NET 6 での Windows アプリ開発技術の紹介
【BS3】Visual Studio 2022 と .NET 6 での Windows アプリ開発技術の紹介 【BS3】Visual Studio 2022 と .NET 6 での Windows アプリ開発技術の紹介
【BS3】Visual Studio 2022 と .NET 6 での Windows アプリ開発技術の紹介 日本マイクロソフト株式会社
 
~ Build と言えば やっぱり Developer! ~ Microsoft 開発ツール最新アップデート
~ Build と言えば やっぱり Developer! ~ Microsoft 開発ツール最新アップデート~ Build と言えば やっぱり Developer! ~ Microsoft 開発ツール最新アップデート
~ Build と言えば やっぱり Developer! ~ Microsoft 開発ツール最新アップデートAkira Inoue
 
Cloud から IoT まで、なんでもおまかせ ~ .NET 5 正式リリース!
Cloud から IoT まで、なんでもおまかせ ~ .NET 5 正式リリース!Cloud から IoT まで、なんでもおまかせ ~ .NET 5 正式リリース!
Cloud から IoT まで、なんでもおまかせ ~ .NET 5 正式リリース!Akira Inoue
 
レガシー Web からの脱却 ~ 開発者が次に目指すべき Web アプリの姿とは?
レガシー Web からの脱却 ~ 開発者が次に目指すべき Web アプリの姿とは?レガシー Web からの脱却 ~ 開発者が次に目指すべき Web アプリの姿とは?
レガシー Web からの脱却 ~ 開発者が次に目指すべき Web アプリの姿とは?Akira Inoue
 
.NET の今と今後に思うこと (Tokyo Ver.)
.NET の今と今後に思うこと (Tokyo Ver.).NET の今と今後に思うこと (Tokyo Ver.)
.NET の今と今後に思うこと (Tokyo Ver.)Akira Inoue
 
デモで楽しむ Visual Studio 2022 & .NET 6 最新アップデート
デモで楽しむ Visual Studio 2022 & .NET 6 最新アップデートデモで楽しむ Visual Studio 2022 & .NET 6 最新アップデート
デモで楽しむ Visual Studio 2022 & .NET 6 最新アップデートAkira Inoue
 
.NET Core と Docker コンテナー、そして Azure を使用したマイクロサービスのアーキテクチャ
.NET Core と Docker コンテナー、そして Azure を使用したマイクロサービスのアーキテクチャ.NET Core と Docker コンテナー、そして Azure を使用したマイクロサービスのアーキテクチャ
.NET Core と Docker コンテナー、そして Azure を使用したマイクロサービスのアーキテクチャAkira Inoue
 
.NET Conf 2017 Japan Keynote ".NET Everywhere!"
.NET Conf 2017 Japan Keynote ".NET Everywhere!".NET Conf 2017 Japan Keynote ".NET Everywhere!"
.NET Conf 2017 Japan Keynote ".NET Everywhere!"Akira Inoue
 
【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ
【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ 【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ
【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ 日本マイクロソフト株式会社
 
Wasm blazor and wasi 2
Wasm blazor and wasi 2Wasm blazor and wasi 2
Wasm blazor and wasi 2Takao Tetsuro
 
OWIN って何?
OWIN って何?OWIN って何?
OWIN って何?miso- soup3
 
Azure と Visual Studio で実践するモダナイゼーションとクラウド ネイティブ アプリケーション開発
Azure と Visual Studio で実践するモダナイゼーションとクラウド ネイティブ アプリケーション開発Azure と Visual Studio で実践するモダナイゼーションとクラウド ネイティブ アプリケーション開発
Azure と Visual Studio で実践するモダナイゼーションとクラウド ネイティブ アプリケーション開発Akira Inoue
 
.NET の過去、現在、そして未来
.NET の過去、現在、そして未来.NET の過去、現在、そして未来
.NET の過去、現在、そして未来Akira Inoue
 

Was ist angesagt? (20)

[TL03] あなたはどっち? Visual Studio Code 派と Visual Studio 派による Web フロントエンド開発 徹底紹介
[TL03] あなたはどっち? Visual Studio Code 派と Visual Studio 派による Web フロントエンド開発 徹底紹介[TL03] あなたはどっち? Visual Studio Code 派と Visual Studio 派による Web フロントエンド開発 徹底紹介
[TL03] あなたはどっち? Visual Studio Code 派と Visual Studio 派による Web フロントエンド開発 徹底紹介
 
本格化するクラウド ネイティブに向けて進化する開発プラットフォームと .NET
本格化するクラウド ネイティブに向けて進化する開発プラットフォームと .NET本格化するクラウド ネイティブに向けて進化する開発プラットフォームと .NET
本格化するクラウド ネイティブに向けて進化する開発プラットフォームと .NET
 
ASP.NETの進化とASP.NET Core Blazorの凄さ
ASP.NETの進化とASP.NET Core Blazorの凄さASP.NETの進化とASP.NET Core Blazorの凄さ
ASP.NETの進化とASP.NET Core Blazorの凄さ
 
.NET の過去、現在、そして未来 ~ .NET 最新アップデート
.NET の過去、現在、そして未来 ~ .NET 最新アップデート.NET の過去、現在、そして未来 ~ .NET 最新アップデート
.NET の過去、現在、そして未来 ~ .NET 最新アップデート
 
Vs2013 multi device shosuz
Vs2013 multi device shosuzVs2013 multi device shosuz
Vs2013 multi device shosuz
 
【BS3】Visual Studio 2022 と .NET 6 での Windows アプリ開発技術の紹介
【BS3】Visual Studio 2022 と .NET 6 での Windows アプリ開発技術の紹介 【BS3】Visual Studio 2022 と .NET 6 での Windows アプリ開発技術の紹介
【BS3】Visual Studio 2022 と .NET 6 での Windows アプリ開発技術の紹介
 
~ Build と言えば やっぱり Developer! ~ Microsoft 開発ツール最新アップデート
~ Build と言えば やっぱり Developer! ~ Microsoft 開発ツール最新アップデート~ Build と言えば やっぱり Developer! ~ Microsoft 開発ツール最新アップデート
~ Build と言えば やっぱり Developer! ~ Microsoft 開発ツール最新アップデート
 
Cloud から IoT まで、なんでもおまかせ ~ .NET 5 正式リリース!
Cloud から IoT まで、なんでもおまかせ ~ .NET 5 正式リリース!Cloud から IoT まで、なんでもおまかせ ~ .NET 5 正式リリース!
Cloud から IoT まで、なんでもおまかせ ~ .NET 5 正式リリース!
 
レガシー Web からの脱却 ~ 開発者が次に目指すべき Web アプリの姿とは?
レガシー Web からの脱却 ~ 開発者が次に目指すべき Web アプリの姿とは?レガシー Web からの脱却 ~ 開発者が次に目指すべき Web アプリの姿とは?
レガシー Web からの脱却 ~ 開発者が次に目指すべき Web アプリの姿とは?
 
.NET の今と今後に思うこと (Tokyo Ver.)
.NET の今と今後に思うこと (Tokyo Ver.).NET の今と今後に思うこと (Tokyo Ver.)
.NET の今と今後に思うこと (Tokyo Ver.)
 
デモで楽しむ Visual Studio 2022 & .NET 6 最新アップデート
デモで楽しむ Visual Studio 2022 & .NET 6 最新アップデートデモで楽しむ Visual Studio 2022 & .NET 6 最新アップデート
デモで楽しむ Visual Studio 2022 & .NET 6 最新アップデート
 
20141129-dotNet2015
20141129-dotNet201520141129-dotNet2015
20141129-dotNet2015
 
.NET Core と Docker コンテナー、そして Azure を使用したマイクロサービスのアーキテクチャ
.NET Core と Docker コンテナー、そして Azure を使用したマイクロサービスのアーキテクチャ.NET Core と Docker コンテナー、そして Azure を使用したマイクロサービスのアーキテクチャ
.NET Core と Docker コンテナー、そして Azure を使用したマイクロサービスのアーキテクチャ
 
.NET Conf 2017 Japan Keynote ".NET Everywhere!"
.NET Conf 2017 Japan Keynote ".NET Everywhere!".NET Conf 2017 Japan Keynote ".NET Everywhere!"
.NET Conf 2017 Japan Keynote ".NET Everywhere!"
 
【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ
【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ 【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ
【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ
 
Wasm blazor and wasi 2
Wasm blazor and wasi 2Wasm blazor and wasi 2
Wasm blazor and wasi 2
 
【BS7】GitHubをフル活用した開発
【BS7】GitHubをフル活用した開発【BS7】GitHubをフル活用した開発
【BS7】GitHubをフル活用した開発
 
OWIN って何?
OWIN って何?OWIN って何?
OWIN って何?
 
Azure と Visual Studio で実践するモダナイゼーションとクラウド ネイティブ アプリケーション開発
Azure と Visual Studio で実践するモダナイゼーションとクラウド ネイティブ アプリケーション開発Azure と Visual Studio で実践するモダナイゼーションとクラウド ネイティブ アプリケーション開発
Azure と Visual Studio で実践するモダナイゼーションとクラウド ネイティブ アプリケーション開発
 
.NET の過去、現在、そして未来
.NET の過去、現在、そして未来.NET の過去、現在、そして未来
.NET の過去、現在、そして未来
 

Andere mochten auch

はじめにことばありき
はじめにことばありきはじめにことばありき
はじめにことばありきShumpei Shiraishi
 
Reactive Programming
Reactive ProgrammingReactive Programming
Reactive Programmingmaruyama097
 
Introduction of "MarkdownPresenter"
Introduction of "MarkdownPresenter"Introduction of "MarkdownPresenter"
Introduction of "MarkdownPresenter"Jun-ichi Sakamoto
 
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んでイラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んでShumpei Shiraishi
 
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んでShumpei Shiraishi
 
HTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクトHTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクトShumpei Shiraishi
 
More Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトーク
More Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトークMore Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトーク
More Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトークJun-ichi Sakamoto
 
AngularJS 2.0 Jumpstart
AngularJS 2.0 JumpstartAngularJS 2.0 Jumpstart
AngularJS 2.0 JumpstartFilipe Falcão
 
20140823 LL diver Angular.js で構築した note に関して
20140823 LL diver Angular.js で構築した note に関して20140823 LL diver Angular.js で構築した note に関して
20140823 LL diver Angular.js で構築した note に関してShoei Takamaru
 
最近、リアルタイムWebが面白い
最近、リアルタイムWebが面白い最近、リアルタイムWebが面白い
最近、リアルタイムWebが面白いNarami Kiyokura
 
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んでShumpei Shiraishi
 
CLR/H#74 LT IT勉強会発表用イチオシツール
CLR/H#74 LT IT勉強会発表用イチオシツールCLR/H#74 LT IT勉強会発表用イチオシツール
CLR/H#74 LT IT勉強会発表用イチオシツールJun-ichi Sakamoto
 
[予告篇] みんなで同時プレイするクイズWebアプリでCodeQuizに挑戦!
[予告篇] みんなで同時プレイするクイズWebアプリでCodeQuizに挑戦![予告篇] みんなで同時プレイするクイズWebアプリでCodeQuizに挑戦!
[予告篇] みんなで同時プレイするクイズWebアプリでCodeQuizに挑戦!Jun-ichi Sakamoto
 
WebRTCがビデオ会議市場に与えるインパクトを探る
WebRTCがビデオ会議市場に与えるインパクトを探るWebRTCがビデオ会議市場に与えるインパクトを探る
WebRTCがビデオ会議市場に与えるインパクトを探るShumpei Shiraishi
 
Linux & Mac OS でも動く! ~ オープンソース & クロスプラットフォーム .NET の歩き方 ~
Linux & Mac OS でも動く! ~ オープンソース & クロスプラットフォーム .NET の歩き方 ~Linux & Mac OS でも動く! ~ オープンソース & クロスプラットフォーム .NET の歩き方 ~
Linux & Mac OS でも動く! ~ オープンソース & クロスプラットフォーム .NET の歩き方 ~Akira Inoue
 
HTML5時代のフロントエンド開発入門
HTML5時代のフロントエンド開発入門HTML5時代のフロントエンド開発入門
HTML5時代のフロントエンド開発入門Shumpei Shiraishi
 

Andere mochten auch (20)

はじめにことばありき
はじめにことばありきはじめにことばありき
はじめにことばありき
 
Reactive Programming
Reactive ProgrammingReactive Programming
Reactive Programming
 
Introduction of "MarkdownPresenter"
Introduction of "MarkdownPresenter"Introduction of "MarkdownPresenter"
Introduction of "MarkdownPresenter"
 
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んでイラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
 
20130921レジュメ2
20130921レジュメ220130921レジュメ2
20130921レジュメ2
 
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
 
HTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクトHTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクト
 
More Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトーク
More Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトークMore Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトーク
More Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトーク
 
秒速一億円
秒速一億円秒速一億円
秒速一億円
 
AngularJS 2.0 Jumpstart
AngularJS 2.0 JumpstartAngularJS 2.0 Jumpstart
AngularJS 2.0 Jumpstart
 
Gulp ことはじめ
Gulp ことはじめGulp ことはじめ
Gulp ことはじめ
 
20140823 LL diver Angular.js で構築した note に関して
20140823 LL diver Angular.js で構築した note に関して20140823 LL diver Angular.js で構築した note に関して
20140823 LL diver Angular.js で構築した note に関して
 
最近、リアルタイムWebが面白い
最近、リアルタイムWebが面白い最近、リアルタイムWebが面白い
最近、リアルタイムWebが面白い
 
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
 
CLR/H#74 LT IT勉強会発表用イチオシツール
CLR/H#74 LT IT勉強会発表用イチオシツールCLR/H#74 LT IT勉強会発表用イチオシツール
CLR/H#74 LT IT勉強会発表用イチオシツール
 
[予告篇] みんなで同時プレイするクイズWebアプリでCodeQuizに挑戦!
[予告篇] みんなで同時プレイするクイズWebアプリでCodeQuizに挑戦![予告篇] みんなで同時プレイするクイズWebアプリでCodeQuizに挑戦!
[予告篇] みんなで同時プレイするクイズWebアプリでCodeQuizに挑戦!
 
TypeScript And ALM
TypeScript And ALMTypeScript And ALM
TypeScript And ALM
 
WebRTCがビデオ会議市場に与えるインパクトを探る
WebRTCがビデオ会議市場に与えるインパクトを探るWebRTCがビデオ会議市場に与えるインパクトを探る
WebRTCがビデオ会議市場に与えるインパクトを探る
 
Linux & Mac OS でも動く! ~ オープンソース & クロスプラットフォーム .NET の歩き方 ~
Linux & Mac OS でも動く! ~ オープンソース & クロスプラットフォーム .NET の歩き方 ~Linux & Mac OS でも動く! ~ オープンソース & クロスプラットフォーム .NET の歩き方 ~
Linux & Mac OS でも動く! ~ オープンソース & クロスプラットフォーム .NET の歩き方 ~
 
HTML5時代のフロントエンド開発入門
HTML5時代のフロントエンド開発入門HTML5時代のフロントエンド開発入門
HTML5時代のフロントエンド開発入門
 

Ähnlich wie TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Source. ~

Visual Studio 2012 Web 開発 ~ One ASP.NET から TypeScript まで ~
Visual Studio 2012 Web 開発 ~ One ASP.NET から TypeScript まで ~Visual Studio 2012 Web 開発 ~ One ASP.NET から TypeScript まで ~
Visual Studio 2012 Web 開発 ~ One ASP.NET から TypeScript まで ~Akira Inoue
 
TypeScript ファーストステップ ~ Any browser. Any host. Any OS. Open Source. ~
TypeScript ファーストステップ ~ Any browser. Any host. Any OS. Open Source. ~TypeScript ファーストステップ ~ Any browser. Any host. Any OS. Open Source. ~
TypeScript ファーストステップ ~ Any browser. Any host. Any OS. Open Source. ~Akira Inoue
 
TypeScript ファーストステップ (Rev.2) ~ Any browser. Any host. Any OS. Open Source. ~
TypeScript ファーストステップ (Rev.2) ~ Any browser. Any host. Any OS. Open Source. ~TypeScript ファーストステップ (Rev.2) ~ Any browser. Any host. Any OS. Open Source. ~
TypeScript ファーストステップ (Rev.2) ~ Any browser. Any host. Any OS. Open Source. ~Akira Inoue
 
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発Akira Inoue
 
『これからの.NETアプリケーション開発』セミナー .NET用アプリケーション フレームワーク Open 棟梁 概説
『これからの.NETアプリケーション開発』セミナー .NET用アプリケーション フレームワーク Open 棟梁 概説『これからの.NETアプリケーション開発』セミナー .NET用アプリケーション フレームワーク Open 棟梁 概説
『これからの.NETアプリケーション開発』セミナー .NET用アプリケーション フレームワーク Open 棟梁 概説Daisuke Nishino
 
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話Akira Inoue
 
マイクロソフトWeb開発の今と今後
マイクロソフトWeb開発の今と今後マイクロソフトWeb開発の今と今後
マイクロソフトWeb開発の今と今後Akira Inoue
 
jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発Akira Inoue
 
Visual Studio 2012 と ASP.NET に見る、最新 Web 開発の魅力
Visual Studio 2012 と ASP.NET に見る、最新 Web 開発の魅力Visual Studio 2012 と ASP.NET に見る、最新 Web 開発の魅力
Visual Studio 2012 と ASP.NET に見る、最新 Web 開発の魅力Akira Inoue
 
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
ASP.NET MVC と jQuery で実践する標準志向 Web 開発ASP.NET MVC と jQuery で実践する標準志向 Web 開発
ASP.NET MVC と jQuery で実践する標準志向 Web 開発Akira Inoue
 
Windows アプリケーション開発 はじめに ~ Windows アプリケーション開発初学者の方向け Visual Studio を使ったアプリケーショ...
Windows アプリケーション開発はじめに ~ Windows アプリケーション開発初学者の方向けVisual Studio を使ったアプリケーショ...Windows アプリケーション開発はじめに ~ Windows アプリケーション開発初学者の方向けVisual Studio を使ったアプリケーショ...
Windows アプリケーション開発 はじめに ~ Windows アプリケーション開発初学者の方向け Visual Studio を使ったアプリケーショ...Fujio Kojima
 
Net advantage 2012 volume2 最新情報 xaml プラットフォーム編
Net advantage 2012 volume2 最新情報 xaml プラットフォーム編Net advantage 2012 volume2 最新情報 xaml プラットフォーム編
Net advantage 2012 volume2 最新情報 xaml プラットフォーム編Daizen Ikehara
 
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発Daizen Ikehara
 
[Java Festa in 札幌 2012] Windows Azure を活用した Windows 8 アプリケーション開発
[Java Festa in 札幌 2012] Windows Azure を活用した Windows 8 アプリケーション開発[Java Festa in 札幌 2012] Windows Azure を活用した Windows 8 アプリケーション開発
[Java Festa in 札幌 2012] Windows Azure を活用した Windows 8 アプリケーション開発Naoki (Neo) SATO
 
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJSエンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJSAyumi Goto
 
Open棟梁概要説明 v02-00
Open棟梁概要説明 v02-00Open棟梁概要説明 v02-00
Open棟梁概要説明 v02-00Daisuke Nishino
 
オレたちとVisual Studioとの関係を話そう
オレたちとVisual Studioとの関係を話そうオレたちとVisual Studioとの関係を話そう
オレたちとVisual Studioとの関係を話そうMitsuhito Ishino
 
MicrosoftのOSSへの取り組み
MicrosoftのOSSへの取り組みMicrosoftのOSSへの取り組み
MicrosoftのOSSへの取り組みShinichiro Arai
 
ASP.NET 新時代に向けて ~ ASP.NET 5 / Visual Studio 2015 基礎解説
ASP.NET 新時代に向けて ~ ASP.NET 5 / Visual Studio 2015 基礎解説ASP.NET 新時代に向けて ~ ASP.NET 5 / Visual Studio 2015 基礎解説
ASP.NET 新時代に向けて ~ ASP.NET 5 / Visual Studio 2015 基礎解説Akira Inoue
 

Ähnlich wie TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Source. ~ (20)

Visual Studio 2012 Web 開発 ~ One ASP.NET から TypeScript まで ~
Visual Studio 2012 Web 開発 ~ One ASP.NET から TypeScript まで ~Visual Studio 2012 Web 開発 ~ One ASP.NET から TypeScript まで ~
Visual Studio 2012 Web 開発 ~ One ASP.NET から TypeScript まで ~
 
TypeScript ファーストステップ ~ Any browser. Any host. Any OS. Open Source. ~
TypeScript ファーストステップ ~ Any browser. Any host. Any OS. Open Source. ~TypeScript ファーストステップ ~ Any browser. Any host. Any OS. Open Source. ~
TypeScript ファーストステップ ~ Any browser. Any host. Any OS. Open Source. ~
 
TypeScript ファーストステップ (Rev.2) ~ Any browser. Any host. Any OS. Open Source. ~
TypeScript ファーストステップ (Rev.2) ~ Any browser. Any host. Any OS. Open Source. ~TypeScript ファーストステップ (Rev.2) ~ Any browser. Any host. Any OS. Open Source. ~
TypeScript ファーストステップ (Rev.2) ~ Any browser. Any host. Any OS. Open Source. ~
 
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
 
『これからの.NETアプリケーション開発』セミナー .NET用アプリケーション フレームワーク Open 棟梁 概説
『これからの.NETアプリケーション開発』セミナー .NET用アプリケーション フレームワーク Open 棟梁 概説『これからの.NETアプリケーション開発』セミナー .NET用アプリケーション フレームワーク Open 棟梁 概説
『これからの.NETアプリケーション開発』セミナー .NET用アプリケーション フレームワーク Open 棟梁 概説
 
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
 
マイクロソフトWeb開発の今と今後
マイクロソフトWeb開発の今と今後マイクロソフトWeb開発の今と今後
マイクロソフトWeb開発の今と今後
 
jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発
 
Visual Studio 2012 と ASP.NET に見る、最新 Web 開発の魅力
Visual Studio 2012 と ASP.NET に見る、最新 Web 開発の魅力Visual Studio 2012 と ASP.NET に見る、最新 Web 開発の魅力
Visual Studio 2012 と ASP.NET に見る、最新 Web 開発の魅力
 
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
ASP.NET MVC と jQuery で実践する標準志向 Web 開発ASP.NET MVC と jQuery で実践する標準志向 Web 開発
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
 
Windows アプリケーション開発 はじめに ~ Windows アプリケーション開発初学者の方向け Visual Studio を使ったアプリケーショ...
Windows アプリケーション開発はじめに ~ Windows アプリケーション開発初学者の方向けVisual Studio を使ったアプリケーショ...Windows アプリケーション開発はじめに ~ Windows アプリケーション開発初学者の方向けVisual Studio を使ったアプリケーショ...
Windows アプリケーション開発 はじめに ~ Windows アプリケーション開発初学者の方向け Visual Studio を使ったアプリケーショ...
 
Net advantage 2012 volume2 最新情報 xaml プラットフォーム編
Net advantage 2012 volume2 最新情報 xaml プラットフォーム編Net advantage 2012 volume2 最新情報 xaml プラットフォーム編
Net advantage 2012 volume2 最新情報 xaml プラットフォーム編
 
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
 
[Java Festa in 札幌 2012] Windows Azure を活用した Windows 8 アプリケーション開発
[Java Festa in 札幌 2012] Windows Azure を活用した Windows 8 アプリケーション開発[Java Festa in 札幌 2012] Windows Azure を活用した Windows 8 アプリケーション開発
[Java Festa in 札幌 2012] Windows Azure を活用した Windows 8 アプリケーション開発
 
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJSエンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
 
Open棟梁概要説明 v02-00
Open棟梁概要説明 v02-00Open棟梁概要説明 v02-00
Open棟梁概要説明 v02-00
 
オレたちとVisual Studioとの関係を話そう
オレたちとVisual Studioとの関係を話そうオレたちとVisual Studioとの関係を話そう
オレたちとVisual Studioとの関係を話そう
 
2013 Ignite UI 最新情報 in 岡山
2013 Ignite UI 最新情報 in 岡山2013 Ignite UI 最新情報 in 岡山
2013 Ignite UI 最新情報 in 岡山
 
MicrosoftのOSSへの取り組み
MicrosoftのOSSへの取り組みMicrosoftのOSSへの取り組み
MicrosoftのOSSへの取り組み
 
ASP.NET 新時代に向けて ~ ASP.NET 5 / Visual Studio 2015 基礎解説
ASP.NET 新時代に向けて ~ ASP.NET 5 / Visual Studio 2015 基礎解説ASP.NET 新時代に向けて ~ ASP.NET 5 / Visual Studio 2015 基礎解説
ASP.NET 新時代に向けて ~ ASP.NET 5 / Visual Studio 2015 基礎解説
 

Mehr von Akira Inoue

New Features in C# 10/11
New Features in C# 10/11New Features in C# 10/11
New Features in C# 10/11Akira Inoue
 
.NET 6 と Blazor で作るクロスプラットフォームアプリ概要
.NET 6 と Blazor で作るクロスプラットフォームアプリ概要.NET 6 と Blazor で作るクロスプラットフォームアプリ概要
.NET 6 と Blazor で作るクロスプラットフォームアプリ概要Akira Inoue
 
VS Code Live Share ~ 東京と大阪を繋いでみよう!
VS Code Live Share ~ 東京と大阪を繋いでみよう!VS Code Live Share ~ 東京と大阪を繋いでみよう!
VS Code Live Share ~ 東京と大阪を繋いでみよう!Akira Inoue
 
.NET の今と今後に思うこと
.NET の今と今後に思うこと.NET の今と今後に思うこと
.NET の今と今後に思うことAkira Inoue
 
.NET 最新ロードマップと今押さえておきたい技術要素
.NET 最新ロードマップと今押さえておきたい技術要素.NET 最新ロードマップと今押さえておきたい技術要素
.NET 最新ロードマップと今押さえておきたい技術要素Akira Inoue
 
VS Code & Flaskで作るCloud NativeアプリとDevOps
VS Code & Flaskで作るCloud NativeアプリとDevOpsVS Code & Flaskで作るCloud NativeアプリとDevOps
VS Code & Flaskで作るCloud NativeアプリとDevOpsAkira Inoue
 
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイル
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイルVisual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイル
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイルAkira Inoue
 
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイル
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイルVisual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイル
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイルAkira Inoue
 
.NET の今 ~ 最新アップデートと 2019 年の展望
.NET の今 ~ 最新アップデートと 2019 年の展望.NET の今 ~ 最新アップデートと 2019 年の展望
.NET の今 ~ 最新アップデートと 2019 年の展望Akira Inoue
 
.NET today and tomorrow
.NET today and tomorrow.NET today and tomorrow
.NET today and tomorrowAkira Inoue
 
.NET の今とミライ (.NET Conf 2018 Japan Keynote)
.NET の今とミライ (.NET Conf 2018 Japan Keynote).NET の今とミライ (.NET Conf 2018 Japan Keynote)
.NET の今とミライ (.NET Conf 2018 Japan Keynote)Akira Inoue
 
Intelligent Mobile App と Cloud Native が創るアプリ開発の未来 ~ これからの時代のアプリケーション開発ビジョン ~
Intelligent Mobile App と Cloud Native が創るアプリ開発の未来~ これからの時代のアプリケーション開発ビジョン ~Intelligent Mobile App と Cloud Native が創るアプリ開発の未来~ これからの時代のアプリケーション開発ビジョン ~
Intelligent Mobile App と Cloud Native が創るアプリ開発の未来 ~ これからの時代のアプリケーション開発ビジョン ~Akira Inoue
 
"今" 押さえておきたい! Web アプリ開発の技術トレンドとツールの進化
"今" 押さえておきたい! Web アプリ開発の技術トレンドとツールの進化"今" 押さえておきたい! Web アプリ開発の技術トレンドとツールの進化
"今" 押さえておきたい! Web アプリ開発の技術トレンドとツールの進化Akira Inoue
 
Angular ユーザーなら押さえておきたい! TypeScript と Visual Studio Code の基礎と活用
Angular ユーザーなら押さえておきたい! TypeScript と Visual Studio Code の基礎と活用Angular ユーザーなら押さえておきたい! TypeScript と Visual Studio Code の基礎と活用
Angular ユーザーなら押さえておきたい! TypeScript と Visual Studio Code の基礎と活用Akira Inoue
 
.NET の今と未来 ~ デバイス&クラウド ネイティブを目指して
.NET の今と未来 ~ デバイス&クラウド ネイティブを目指して.NET の今と未来 ~ デバイス&クラウド ネイティブを目指して
.NET の今と未来 ~ デバイス&クラウド ネイティブを目指してAkira Inoue
 
Mobile-first, Cloud-first のその先へ ~ Microsoft が描く Web/Mobile の未来
Mobile-first, Cloud-first のその先へ ~ Microsoft が描く Web/Mobile の未来Mobile-first, Cloud-first のその先へ ~ Microsoft が描く Web/Mobile の未来
Mobile-first, Cloud-first のその先へ ~ Microsoft が描く Web/Mobile の未来Akira Inoue
 
TypeScript and Visual Studio Code
TypeScript and Visual Studio Code TypeScript and Visual Studio Code
TypeScript and Visual Studio Code Akira Inoue
 
Engineers can change the world ~ "世界" で活躍するエンジニアになるために
Engineers can change the world ~ "世界" で活躍するエンジニアになるためにEngineers can change the world ~ "世界" で活躍するエンジニアになるために
Engineers can change the world ~ "世界" で活躍するエンジニアになるためにAkira Inoue
 
Visual Studio Codeで始めるTypeScript
Visual Studio Codeで始めるTypeScriptVisual Studio Codeで始めるTypeScript
Visual Studio Codeで始めるTypeScriptAkira Inoue
 

Mehr von Akira Inoue (19)

New Features in C# 10/11
New Features in C# 10/11New Features in C# 10/11
New Features in C# 10/11
 
.NET 6 と Blazor で作るクロスプラットフォームアプリ概要
.NET 6 と Blazor で作るクロスプラットフォームアプリ概要.NET 6 と Blazor で作るクロスプラットフォームアプリ概要
.NET 6 と Blazor で作るクロスプラットフォームアプリ概要
 
VS Code Live Share ~ 東京と大阪を繋いでみよう!
VS Code Live Share ~ 東京と大阪を繋いでみよう!VS Code Live Share ~ 東京と大阪を繋いでみよう!
VS Code Live Share ~ 東京と大阪を繋いでみよう!
 
.NET の今と今後に思うこと
.NET の今と今後に思うこと.NET の今と今後に思うこと
.NET の今と今後に思うこと
 
.NET 最新ロードマップと今押さえておきたい技術要素
.NET 最新ロードマップと今押さえておきたい技術要素.NET 最新ロードマップと今押さえておきたい技術要素
.NET 最新ロードマップと今押さえておきたい技術要素
 
VS Code & Flaskで作るCloud NativeアプリとDevOps
VS Code & Flaskで作るCloud NativeアプリとDevOpsVS Code & Flaskで作るCloud NativeアプリとDevOps
VS Code & Flaskで作るCloud NativeアプリとDevOps
 
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイル
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイルVisual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイル
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイル
 
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイル
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイルVisual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイル
Visual Studio 2019 GA ! ~ 最新情報 & これからの開発スタイル
 
.NET の今 ~ 最新アップデートと 2019 年の展望
.NET の今 ~ 最新アップデートと 2019 年の展望.NET の今 ~ 最新アップデートと 2019 年の展望
.NET の今 ~ 最新アップデートと 2019 年の展望
 
.NET today and tomorrow
.NET today and tomorrow.NET today and tomorrow
.NET today and tomorrow
 
.NET の今とミライ (.NET Conf 2018 Japan Keynote)
.NET の今とミライ (.NET Conf 2018 Japan Keynote).NET の今とミライ (.NET Conf 2018 Japan Keynote)
.NET の今とミライ (.NET Conf 2018 Japan Keynote)
 
Intelligent Mobile App と Cloud Native が創るアプリ開発の未来 ~ これからの時代のアプリケーション開発ビジョン ~
Intelligent Mobile App と Cloud Native が創るアプリ開発の未来~ これからの時代のアプリケーション開発ビジョン ~Intelligent Mobile App と Cloud Native が創るアプリ開発の未来~ これからの時代のアプリケーション開発ビジョン ~
Intelligent Mobile App と Cloud Native が創るアプリ開発の未来 ~ これからの時代のアプリケーション開発ビジョン ~
 
"今" 押さえておきたい! Web アプリ開発の技術トレンドとツールの進化
"今" 押さえておきたい! Web アプリ開発の技術トレンドとツールの進化"今" 押さえておきたい! Web アプリ開発の技術トレンドとツールの進化
"今" 押さえておきたい! Web アプリ開発の技術トレンドとツールの進化
 
Angular ユーザーなら押さえておきたい! TypeScript と Visual Studio Code の基礎と活用
Angular ユーザーなら押さえておきたい! TypeScript と Visual Studio Code の基礎と活用Angular ユーザーなら押さえておきたい! TypeScript と Visual Studio Code の基礎と活用
Angular ユーザーなら押さえておきたい! TypeScript と Visual Studio Code の基礎と活用
 
.NET の今と未来 ~ デバイス&クラウド ネイティブを目指して
.NET の今と未来 ~ デバイス&クラウド ネイティブを目指して.NET の今と未来 ~ デバイス&クラウド ネイティブを目指して
.NET の今と未来 ~ デバイス&クラウド ネイティブを目指して
 
Mobile-first, Cloud-first のその先へ ~ Microsoft が描く Web/Mobile の未来
Mobile-first, Cloud-first のその先へ ~ Microsoft が描く Web/Mobile の未来Mobile-first, Cloud-first のその先へ ~ Microsoft が描く Web/Mobile の未来
Mobile-first, Cloud-first のその先へ ~ Microsoft が描く Web/Mobile の未来
 
TypeScript and Visual Studio Code
TypeScript and Visual Studio Code TypeScript and Visual Studio Code
TypeScript and Visual Studio Code
 
Engineers can change the world ~ "世界" で活躍するエンジニアになるために
Engineers can change the world ~ "世界" で活躍するエンジニアになるためにEngineers can change the world ~ "世界" で活躍するエンジニアになるために
Engineers can change the world ~ "世界" で活躍するエンジニアになるために
 
Visual Studio Codeで始めるTypeScript
Visual Studio Codeで始めるTypeScriptVisual Studio Codeで始めるTypeScript
Visual Studio Codeで始めるTypeScript
 

TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Source. ~

  • 1. TypeScript ファースト ステップ ~ Any browser. Any host. Any OS. Open Source. ~ 日本マイクロソフト株式会社 デベロッパー & プラットフォーム統括本部 エバンジェリスト 井上 章 (いのうえ あきら) blogs.msdn.com/chack twitter.com/chack411
  • 2. セッションのゴール Session Takeaways  JavaScript と Web 技術のこれまで を振り返る  TypeScript の全体像 を学ぶ
  • 4. モダン Web アプリ エクスペリエンス Single Page Application Architecture クライアント サーバー Scripting Engine REST JSON XML HTML View Model HTTP View Async Web API
  • 5. アプリ開発のための "Web 技術" マルチデバイス エクスペリエンスと Web 技術 • HTML5 / CSS3 • クロス プラットフォームにおける共通 UI マークアップ • JavaScript • 第一級のプログラミング言語としての進化と普及 • JavaScript ライブラリの普及やサーバー サイドへの応用 • Web API • 進む HTTP サービス (REST API) の利用と開発ニーズ • ネイティブ アプリ開発への応用 • Windows ストア アプリ開発 (WinRT, WinJS) • PhoneGap, Titanium ...
  • 8. アプリケーション プラットフォームの変化 (Hardware + OS) ≒ (Browser + JavaScript) .hoge { color: red; background-color: #b6ff00; border-radius: 8px; }
  • 9. "JavaScript is the Assembly Language of the Web" by Scott Hanselman.
  • 10. JavaScript (ECMAScript 3) の課題点など Problems of JavaScript • 大規模開発になるほどコードが複雑に • デバッグ・テスト工数の増加 • プロトタイプベース OO 言語 • 変数スコープのへの理解 • 静的な型指定が不要 • ...
  • 11. TypeScript Any browser. Any host. Any OS. Open Source.
  • 12. TypeScript Any browser. Any host. Any OS. Open Source. • JavaScript (ECMAScript 5) のスーパーセットとなる 新しいプログラミング言語 (現在は 0.9.0.1) • TypeScript コードは JavaScript コードへコンパイル • コンパイラも TypeScript で書かれている (tsc.ts → tsc.js) • 静的型付け、クラス、モジュールをサポート • ECMAScript 6 (草案) をベース • コンパイラー及び開発環境 • Visual Studio 2012 プラグイン http://go.Microsoft.com/fwlink/?LinkID=266563 • Node.js Package Manager (npm) • WebMatrix 3 class Point { x: number; y: number; constructor(x: number, y: number) { this.x = x; this.y = y; } dist() { return Math.sqrt( this.x * this.x + this.y * this.y ); } static origin = new Point(0, 0); }
  • 13. TypeScript : 2 つの入り口 Official Web Sites www.typescriptlang.org typescript.codeplex.com クイック スタート サンプル ソースコード ドキュメント
  • 15. TypeScript の開発環境 #1 Compiler and Development Tool • node.js パッケージ (npm) • node.js のインストール: http://nodejs.org/ • TypeScript のインストール: • TypeScript のコンパイル: • TypeScript コンパイラの実体 • … ¥npm¥node_modules¥typescript¥bin¥tsc.js
  • 16. TypeScript の開発環境 #2 Compiler and Development Tool • WebMatrix 3 (http://www.microsoft.com/web/) • 拡張機能ギャラリーから “TypeScript Tools” をインストール
  • 17. TypeScript の開発環境 #3 Compiler and Development Tool • TypeScript for Visual Studio 2012 (VS プラグイン) • http://go.microsoft.com/fwlink/?LinkID=266563 ※ Visual Studio Express 2012 for Web でも利用可能 • プロジェクト テンプレート • [新しいプロジェクト] – [TypeScript] – [HTML Application with TypeScript] • 新しい項目の追加 • [新しい項目...] – [Visual C#] – [TypeScript File] VS 拡張機能: Web Essentials 2012 で プレビュー (分割ウィンドウ) が利用可能
  • 19. 動的型付けから静的型付けへ TypeScript Type System • 静的型付けシステムの導入 • JavaScript のあいまいさを排除 • 安全性・可読性・生産性の向上 • 型付けするか否かは自由 • 動的型付けの利点も生かせる • any 型: すべての型の基本 • プリミティブ (基本) 型 • number, string, boolean, null, undefined, enum • オブジェクト型 • class, module, interface • void 型: 戻り値なしの関数で使用 interface I { } class C { } module M { } { s: string; } number[] () => boolean
  • 20. 静的型付け記述例 (プリミティブ型) 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
  • 22. クラスとモジュール TypeScript Classes and Modules • モジュール化の利点 • 疎結合化と相互影響の低減、再利用性の向上 • デバッグ、テスト、メンテナンスの容易性 • 大規模開発への対応 • ECMAScript 6 (草案) ベースの実装 • Class, Module, Arrow Function 構文 • オブジェクト指向プログラミングの導入 • ポピュラーなモジュールシステムもサポート (External Modules) • CommonJS / AMD modules interface I { } class C { } module M { } { s: string; } number[] () => bool
  • 23. Interface, Class, Module 記述例 TypeScript Interface, Classes and Modules Example // Interface interface Mover { move(): void; getStatus(): { speed: number; }; } interface Shaker { shake(): void; getStatus(): { frequency: number; }; } interface MoverShaker extends Mover, Shaker { getStatus(): { speed: number; frequency: number; }; } interface Person { FullName: string; Age: number; } function greeter(person: Person) { } // Module (Internal) module Sayings { export class Greeter { ... } } var greeter = new Sayings.Greeter("world"); // Class class Greeter { greeting: string; constructor (message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; } } var greeter = new Greeter(“world”); greeter.greet();
  • 24. ジェネリクス の利用 Generics : Parameterized Types • ジェネリクスの導入 (v.0.9) • パラメータ化した型の利用 • Java, C#, C++ などの静的型付け言語では一般的 class Human<T> { constructor(public name: T) { } Talk(): T { return this.name; } } var me = new Human<string>("Taro Yamada"); alert(me.Talk()); interface A { a: string; } interface B extends A { b: string; } interface C extends B { c: string; } interface G<T, U extends B> { x: T; y: U; } var v1: G<A, C>; // Ok var v2: G<{ a: string }, C>; // Ok var v3: G<A, A>; // Error var v4: G<G<A, B>, C>; // Ok var v5: G<any, any>; // Ok var v6: G<any>; // Error var v7: G; // Error
  • 26. "No one writes JavaScript anymore. They write jQuery."
  • 27. 型定義ファイル: *.d.ts Typing for Libraries • 各種ライブラリの変数, オブジェクト, API の定義ファイル • *.d.ts として環境毎に定義される • 現在用意されている主な定義ファイル (TypeScript Source Code より) • lib.d.ts – ECMAScript APIs, DOM APIs ... • jquery.d.ts – jQuery • jqueryui.d.ts – jQuery UI • winjs.d.ts – WinJS • winrt.d.ts – WinRT • node.d.ts – node.js • 下記、定義ファイル リポジトリ でも多数公開されている https://github.com/borisyankov/DefinitelyTyped • その他、NuGet ギャラリーからも入手可能
  • 28. TypeScript で jQuery を使う Typing for the jQuery • TypeScript ソースコードなどから jquery.d.ts を入手 • typings¥jquery.d.ts または samples¥jquery¥jquery.d.ts • *.ts ファイルに jquery.d.ts 参照を追加 • インテリセンス (コード補完) も有効 (Visual Studio 2012) /// <reference path="jquery.d.ts" /> ...
  • 30. TypeScript ロードマップ Compiler and Language Improvements • 0.9.0 • Generics • Overload on constants • "export =" • Improve compiler performance • Improvements to type system to help model a larger variety of JS libraries • 0.9.1 • 'typeof' support in type expression • Project integration support in VS plugin • 1.0 • Stabilization • 1.x • Async/Await, Mixins, Protected access • ES6-compatible codegen
  • 31. まとめ: TypeScript Summary Web アプリケーションをスケールさせるために ... • JavaScript 開発の必要性 • JavaScript の OOP やモジュール化への対応 • デバッグ・テスト工数の削減 • C#, Java などの知識を生かした JavaScript 開発
  • 32. まとめ: TypeScript Summary Web アプリケーションをスケールさせるために ... TypeScript Any browser. Any host. Any OS. Open Source.
  • 33. 関連リソース Resources • Welcome to TypeScript • http://www.typescriptlang.org/ • TypeScript Home: CodePlex • http://typescript.codeplex.com/ • TypeScript Language Specification • http://go.microsoft.com/fwlink/?LinkId=267121 • Build 2012: Introducing TypeScript: A language for application-scale JavaScript development • http://channel9.msdn.com/Events/Build/2012/3-012 • 日本 TypeScript ユーザー会 • https://groups.google.com/forum/#!forum/typescript-japan • Facebook: TypeScript グループ (wTypeScript) • https://www.facebook.com/groups/wTypeScript/
  • 34. Enjoy coding, Be happy with TypeScript.
  • 35. © 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.