TypeScript超入門

10,022 views

Published on

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

Published in: Technology
0 Comments
23 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
10,022
On SlideShare
0
From Embeds
0
Number of Embeds
118
Actions
Shares
0
Downloads
66
Comments
0
Likes
23
Embeds 0
No embeds

No notes for slide

TypeScript超入門

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

×