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