JavaScriptとAltJS

現状の整理

JS＝現代の機械語

どんなBrowserでも動く⇒Web上での共通言語

しかし、

JavaScriptで

大規模開発は辛い

様々なAltJSが誕生

Alternative JavaScript

⇒JSとは別の言語で、コンパイルターゲットとしてJavaScriptを選択できるもの

AltJS

• Haxe: 2005年からJSをsupportしている 
• CoffeeScript: 2010年頃からあるAltJSの先駆け的存在
• Dart: 2011年末にGoogleが公開、AltJSと言うよりはVM
• JSX: 2012年 DeNAにより公開、静的型付け&最適化が売り
• TypeScript: 2012年にMSが公開、静的型付け&JSのSuperSet
• Emscripten: 2012年、C/C++のコードをJSに変換。変態。
• asm.js: 2013年Mozilaが発表、JSのSubsetで高速実行が売り
• Scala.js, FunScript, TypedCoffeeScript, ...others.

他にもいっぱいある: https://github.com/jashkenas/coffeescript/wiki/List-of-languages-that-compile-to-JS

その他

• flow: Facebookが去年に発表した、JSの静的型チェックツール。
  JSを元に型チェックをしてくれるので、AltJSではない
• Babel: ES6(ECMAScript6)の仕様を先取りした、JS Compiler。AltJSとも言えるけど、あくまでもJSの新仕様を既存のBrowserでも実行できるようにすると言う位置づけ。
• AtScriptはなかった

TypeScriptについて

AltJSの中で一番メジャーかもしれない

TypeScriptは

静的型付け言語

Compile時に色々チェックしてくれる。

TypeScriptから既存のJSを呼び出したい

でもJS側は動的型付けなので型が分からない、困った

そこでDefinitelyTypedの

出番

既存JSに型を後付けする

型が分かれば心置きなく

既存JSが使える！

TypeScript的には型が無くても呼び出しすることは可能です。

しかしそれをやってしまうと何でもアリになってしまうため、静的型付けをしていたメリットが無くなってしまいます。

そのための型定義ファイルが集められている

現在、約1000のライブラリに対応している

例えば jQueryもあるよ

interface JQuery {
    ajaxComplete(handler: (event: JQueryEventObject, XMLHttpRequest: XMLHttpRequest, ajaxOptions: any) => any): JQuery;
    ajaxError(handler: (event: JQueryEventObject, jqXHR: JQueryXHR, ajaxSettings: JQueryAjaxSettings, thrownError: any) => any): JQuery;
    ajaxSend(handler: (event: JQueryEventObject, jqXHR: JQueryXHR, ajaxOptions: JQueryAjaxSettings) => any): JQuery;
    ajaxStart(handler: () => any): JQuery;
    ajaxStop(handler: () => any): JQuery;
    ajaxSuccess(handler: (event: JQueryEventObject, XMLHttpRequest: XMLHttpRequest, ajaxOptions: JQueryAjaxSettings) => any): JQuery;
    load(url: string, data?: string|Object, complete?: (responseText: string, textStatus: string, XMLHttpRequest: XMLHttpRequest) => any): JQuery;
    serialize(): string;
    serializeArray(): JQuerySerializeArrayElement[];
    addClass(className: string): JQuery;
    addClass(func: (index: number, className: string) => string): JQuery;
    addBack(selector?: string): JQuery;
    attr(attributeName: string): string;
    attr(attributeName: string, value: string|number): JQuery;
    attr(attributeName: string, func: (index: number, attr: string) => string|number): JQuery;
    attr(attributes: Object): JQuery;
    hasClass(className: string): boolean;

    ...snip, snip...
}
declare module "jquery" {
    export = $;
}
declare var jQuery: JQueryStatic;
declare var $: JQueryStatic;

https://github.com/borisyankov/DefinitelyTyped/blob/master/jquery/jquery.d.ts

DefinitelyTypedとは

TypeScriptの型定義ファイルの集積所

元々はただの野良の

型定義ファイル集積所

今やTypeScriptの公式サイトのTopページからLinkされてる

さらにはTypeScript以外の世界でも使われ始めている

• 他の静的型付けなAltJS言語での活用
  Scala.js, FunScript, TypedCoffeeScript, 等
• WebStorm(JetBrainsのWeb開発向けIDE) では、
  JavaScriptの補完のために使われている

活用の是非もある

• TypeScript固有の事情も含まれてしまう
• WebIDLとかの方が良くない？
• しかし、今すぐ使いたい
  • DefinitelyTypedなら1000以上、既にあるよ

まとめ

• 静的型付けイイよね
• でも、JSの既存資産も活用したい
• 型定義が必要！
• それ、DefinitelyTypedにあるよ

おまけ

TypeScriptについて

AltJSは色々あるけど

TypeScriptはオススメ

オススメの理由

• JavaScriptのSuperSet ⇒ 文法はほとんど一緒
• ES6に基本的に準拠 ⇒ 将来的にJSでサポートされる予定の機能を先取りできる
• Class ⇒ TypeScriptとしてClass構文をサポートしているので、JavaScriptの厄介な継承問題は関係なし
• module ⇒ 名前空間も言語としてサポート
• 型がある ⇒ 変なエラーに悩まされない
• 型がある ⇒ IDEでちゃんと補完が使える
• 型がある ⇒ typoが原因のエラーで悩んだりもしない
• 型がある ⇒ リファクタリングもしやすい
• 型がある ⇒ 保守性も良くなる
• 型推論もあるので、それほど煩雑にもならない

Angular 2はTypeScriptを採用

Angular: Google謹製のJS制フルスタックフレームワーク

via: Angular 2: Built on TypeScipt