TypeScript超入門
Upcoming SlideShare
Loading in...5
×
 

TypeScript超入門

on

  • 6,118 views

第五回 okayama-js勉強会の同名のセッション資料です #okajs

第五回 okayama-js勉強会の同名のセッション資料です #okajs

Statistics

Views

Total Views
6,118
Views on SlideShare
6,082
Embed Views
36

Actions

Likes
14
Downloads
35
Comments
0

3 Embeds 36

https://twitter.com 33
http://s.deeeki.com 2
https://www.chatwork.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    TypeScript超入門 TypeScript超入門 Presentation Transcript

    • TypeScript超入門きよくら ならみ2013/05/25第五回 okayama-js勉強会
    • • ハンドル:「きよくら ならみ」– @kiyokura• 岡山生まれ岡山育ちのプログラマー– 現在は県内の某製造業で社内SE• NET系の開発やWebアプリ開発– Microsoft MVP for ASP.NET/IIS自己紹介
    • • Okayama IT Engineers Community– 通称OITECの運営スタッフ– 主にMS系のテクノロジを扱う勉強会などを、岡山で開催しています– site: oitec.vbstation.net• オープンラボ岡山– 今年から主宰を引き継ぎました– 岡山でノンジャンルの技術系勉強会を開催– site: olojp.netコミュニティ
    • はじめに
    • はじめに• このセッションの目的:– TypeScriptを殆ど知らない・触ったことがない方へ、TypeScriptがどんなものかを大まかにお伝えするものです• 対象者:– JavaScriptはある程度知っている– TypeScriptをあまり知らないが…これから始めてみたいとりあえずざっくりしたところが知りたい• そのため、細かい機能や注意点、また静的型付け自体に関する言及等は極力割愛します
    • アジェンダ• TypeScriptって何なの?• 概要のブレイクダウン• 試してみよう• 言語としての特徴• TypeScriptのロードマップ• JavaScriptの未来• まとめ
    • TypeScriptって何なの?
    • 公式サイト• www.TypeScriptLang.org
    • TypeScript• TypeScript is a language forapplication-scale JavaScriptdevelopment.• TypeScript is a typed superset ofJavaScript that compiles to plainJavaScript.• Any browser. Any host. Any OS. OpenSource.from “www.typescriptlang.org”
    • TypeScript• JavaScriptによる大規模開発に対応する為に設計された言語です• JavaScriptのスーパーセットであり、”静的型付け”が大きな特徴ですコンパイルによりJavaScriptを生成します• 様々なブラウザや環境で動作しますそしてオープンソースです超訳 by kiyokura
    • 作ってるのは?• Microsoftによるプロダクト– でも、オープンソース• 設計は Anders Hejlsberg– Turbo Pascal / Delphi / C#– 通称"ヘジたん"from wikipedia
    • 概要のブレイクダウン
    • application-scaleJavaScript development• "アプリケーション規模"とは??– 部分的な利用からアプリケーション全体への拡大• 見栄えの制御• 簡単な入力値の検証• アプリ全体の制御• ビジネスロジック
    • JSの大規模開発で問題なりやすい点• 動的型• スコープ– グローバル汚染– ブロックスコープが無い• 曖昧でもなんとなく動く– 暗黙のセミコロン補完• プロトタイプベース– 独特で理解しにくい
    • JavaScriptのスーパーセット• 基本構文はJavaScriptと(だいたい)同じ– 学習コストが低い– 既存のJavaScriptもそのまま使える場合も多い• ECMAScript 6thの仕様先取り
    • JavaScriptへコンパイル• 最終的にJavaScriptへコンパイルされます– *.tsファイルから*.jsファイルへ• リーダブルなJavaScriptを出力– 可読性が高く、人がメンテ可能hoge.ts hoge.jsコンパイル
    • 実行環境• 実行環境=JavaScriptが動くところ• ブラウザだけではない– 例えば…• Node.js• Windows Scripting Host
    • オープンソース• TypeScript is Open Source Software– Apache License 2.0• CodePlexでホスト– typescript.codeplex.com– VCSはgit
    • ここまでのまとめ• TypeScriptは以下の特徴を持った言語– JavaScriptのスーパーセット– 大規模開発に耐えうる– JavaScriptにコンパイルされる– オープンソース– tsの動作環境=jsの動作環境
    • 試してみよう
    • TypeScriptの開発・実行環境
    • 開発環境のつくり方• 開発環境は無償で構築可能– Visual Studio + アドオン• Windows限定• VSは無償版でOK– node.jsで動くコンパイラ• node.jsが動くOS=大体の主要OS• コードはお好みのテキストエディタ– 試すだけならブラウザ上で!• 公式サイトのplay groundで試せます• (nodeのコンパイラ利用時の)エディタ/IDEのサポート– Sublime Text 2(*) / vim / emacs ...等々– WebMatrix 3 / WebStrom(*)*製品自体は有償
    • まずはここから• 公式サイト(www.typescriptlang.org)– Get TypeScript Now
    • Visual Studioの場合• アドオンをインストール(VS2012用)– 無償版も利用可能• Visual Studio Express 2012 for Web– http://www.microsoft.com/visualstudio/jpn/products/visual-studio-express-for-web• msiをダウンロードして実行
    • それ以外の場合• まずはnode.jsが動く環境を作る• npmでインストール• Windowsの場合、WebMatrixを利用するとnode.jsごと簡単にインストール可能– WebMatrix 3をインストール後、– 拡張機能のTypeScript Compilerをインストールnpm install -g typescript
    • Play Ground• 公式サイトのPlayから• ブラウザ上でリアルタイムにコンパイル– 実行も可能– コード補完もかなり効く
    • コンパイルのデモ• 簡単なコードとJavaScriptへのコンパイルのデモ
    • コンパイルのデモ:VS• Visual Studioの場合は自動的にコンパイル– 保存のタイミングでtsファイルの同名のjsファイルが自動作成される– 有償版Visual Studioの場合は、無償のアドオンでリアルタイムコンパイルも可能• Web Essentials
    • コンパイルのデモ:node.js• 以下のコマンドでコンパイル• テキストエディタやIDEがサポートするケースもtsc hoge.ts
    • コンパイル例TypeScript JavaScript
    • ここまでのまとめ• コンパイラ/開発環境は無償で入手可• 大きく二種類– Visual Studioアドオン(無償版VS対応)– コマンドラインコンパイラ(node.js)• IDEやテキストエディタでサポート有
    • 言語仕様の概要
    • 言語としての大まかな特徴• 基本構文はJavaScript• 静的型• 型推論• クラスベースのオブジェクト指向• アロー関数式
    • 基本構文はJavaScript• 基本構文はJavaScriptとほぼ同じ– 教育・学習コストが少ない– 既存のjsもtsとしてコンパイル可能• 書き方によってはエラーになることもある• 後述する特徴を実現するための拡張
    • 静的型付け• 型注釈による型の宣言– 変数 / 関数の引数 / 関数の戻り値– ある型で宣言された変数に別の型は代入できない• コンパイルエラーが起こる
    • 静的型付けの例var name: string;var age : number;function sqrt(num: number): number {return num * num;}name = "kiyokura";age = 20;// 以下はエラーname = 20;age = "hatachi";var x = sqrt("hoge"); // 引数が文字列型
    • メリット・デメリット?• 一般的な静的型付のメリットを参照– ここでは割愛• 『デメリット』といわれがちな点のフォロー– 型の宣言が面倒→ 型推論のサポート– ダックタイピングしたい→ InterfaceとStructural Subtyping– 複数の方を受ける変数を使いたい→ any型の採用
    • 型推論• 文脈から型が明らかな場合、明示的な型注釈を省略可能– 変数の初期化時→ 代入される型が明らかな時– 関数の戻値→ 返却される値の型が明らかな時var name = "kiyokura"; // 明らかにstring型function sqrt(num: number) {return num * num; // 明らかにnumber型}
    • クラスベースのオブジェクト指向• Class– JavaやC#等のクラスに近い考えで実装可能– 継承も可能• Interface– 特定の形のオブジェクトの別名– JavaやC#等のInterface的な使い方も可– Structural Subtypingのポイント• Module– 内部モジュール:NameSpace的に使う– 外部モジュール:外部のファイルをロードする
    • Classの例class Person {name: string;age: number;constructor(name: string, age: number) {this.name = name;this.age = age;}greet(): string{return "Hello, Im " +this.name + ". Im " +this.age.toString() + "years old!";}}
    • Classの例(コンパイル後)var Person = (function () {function Person(name, age) {this.name = name;this.age = age;}Person.prototype.greet = function () {return "Hello, Im " +this.name + ". Im " +this.age.toString() + "years old!";};return Person;})();
    • アロー関数式• =>(アロー演算子)による匿名関数の省略記法– 関数型リテラルの省略記法– いわゆるラムダ// アロー関数式var sqrt = (x:number) => { return x * x };//これと等価(コンパイル後)var sqrt = function (x) { return x * x; };
    • ここまでのまとめ• 基本の構文はJavaScriptそのもの• 型注釈による静的な型宣言• 型推論による省略記述• クラス指向オブジェクト言語的構文• アロー関数式によるラムダ記法サポート
    • TypeScriptのロードマップ
    • ロードマップ• 2013/05/24現在– Current:0.8.3• アドオンのバイナリやパッケージなどはこれ– Alpha:0.9.0• CodePlexからダウンロード可能
    • 予定されているフィーチャー• 0.9.0– Generics– Overload on constants– Improve compiler performance– Improvements to type system to help model a larger variety ofJS libraries• 0.9.1– Align with ECMAScript 6 modules– Project integration support in VS plugin• 1.x– A handful of language features are scheduled for explorationafter the 1.0 release, including:• Async/Await• Mixins• Protected access– ES6-compatible codegen
    • 今手を出さないほうが良いの?• 考え方次第だと思うが…• 私のスタンス– とりあえずベターJavaScriptとして使っていいんじゃない?• 例:型安全なJavaScriptとしてだけ使うとか• この使い方なら学習コストもゼロに近いのでは– 吐かれるJavaScriptがリーダブルなので、最悪、そっちをメンテする手もあるし• どちらにしろベタでJavaScript書くことになるなら、使い捨てのジェネレータ感覚で使っても損になるところは無さげ
    • JavaScriptと未来
    • ある人曰く
    • JavaScript isAssembly Languagefor the Web
    • 曰く• JavaScript is Assembly Language forthe Web• JavaScriptはWebのアセンブリ言語である Scott Hanselman http://www.hanselman.com/blog/JavaScriptIsAssemblyLanguageForTheWebSematicMarkupIsDeadCleanVsMachinecodedHTML.aspx
    • JavaScriptの偉大な導師たち曰く
    • だいたい合ってる
    • JSの偉大なる導師たち• "だいたい合ってる"Mike Shave ,Brendan Eich,Douglas Crockfordhttp://www.hanselman.com/blog/JavaScriptisAssemblyLanguagefortheWebPart2MadnessorjustInsanity.aspx
    • "JavaScript is Assembly Language"• もう、そうなりつつあるのでは?– TypeScript– CoffeeScript– HAXE– Dart– JSX– Google Web Toolkit– Script#– (jQuery)
    • TypeScriptの目指しているところ(私見)• general purpose• 大規模開発にも耐えられる堅牢さ• ベターJavaScript言語• JavaScriptコンパイル言語界のJavaやC#のポジション...なんじゃないかな、と思っています
    • まとめ
    • TypeScriptとは• ざっくり、こんな言語• 手軽に試すこともできます• 個人的には将来的にもっと大きな波になる予感がします• 今のうちに触ってみることをお勧めしたいです
    • Lets try and enjoyTypeScript !
    • 参考
    • 公式サイト• http://www.TypeScriptLang.org– チュートリアル– play ground– コンパイラ等のダウンロード
    • CodePlex• http://typescript.codeplex.com– ソース一式• 各種サンプルも含まれている– backboneのサンプル等もあった– アルファ版のバイナリダウンロード– issue トラッカー
    • ご清聴ありがとうございました