Coffeeか、Typeか。 〜比較しながらの入門編〜

  • 104
    いいね
  • 1
    コメント
この記事は最終更新日から1年以上が経過しています。

がっつり手を出したことが無かったんですが、
いよいよ案件で.tsなファイルが現れたので、
TypeScriptの勉強を始めました。

そしてことのついでに、CoffeeScriptもここいらで勉強しておくか!
というわけで比較しながら、入門時の要点まとめしてみます。

だいたいどんな言語か

TypeScript

  • このごろ縁が薄い、MicroSoftさんご提供の言語

  • 要するに、型付きにして、クラスベースにしたJavascript

  • 拡張子は.ts

  • クラスと変数宣言のところだけ変わってるけれど、その他の中身はただのJavascript

  • よって学習コストはかなり低いっぽい

  • もちろんjavascriptには型なんて無いので、宣言した型はコンパイルするときにだけ意味を持つ

  • TypeScriptで書くことによってコードが最適化されるとかはないらしい。

  • 公式: http://www.typescriptlang.org/

CoffeeScript

  • Javascriptにコンパイルする系の言語では、いま一番人気。(主観)

  • 要するに、Rubyのいいところを取り入れて、超短く書けるJavascript

  • と言いつつ、

    • クラスもclass宣言で書けたり、
    • extend周りも細かいもの色々あったり、
    • その場所でのthisをbindするメソッドを簡単に書けたり…とかなり多機能。
  • 多機能なだけに、覚えたての頃はドキュメントが手放せなさそう。

  • 平凡なことしかしないなら、「->で関数」だけ覚えとけば何とかなる。

  • 拡張子は.coffee

  • 公式: http://coffeescript.org/

インストールしよう

TypeScript

npm -g install typescript

CoffeeScript

npm -g install coffee-script

やはり、npmサマサマですね。

クラス書いてみる

クラスを書くのが一番さくっとわかるので!
helloで名前を答えるだけのチャラいクラスで比較。

TypeScript

class Human {
    name: string;

    constructor (name: string) {
        this.name = name;
    }

    hello () {
        console.log('My name is %s.', this.name);
    }
}

おー、とても、クラスっぽい。
name: stringみたいな感じで型指定がついてるのにも注目。

CoffeeScript

class Human
    constructor: (@name) ->

    hello: ->
        console.log("My name is #{@name}.")

みじかい! でもクラスっぽい。
しかしすかすかしていて何となく不安になる…。

#{ }をつかえるのうれしい。

Emacs

  • TypeScriptは公式が用意してるelispで問題なかった。
  • coffeeは、package.elからとってきたやつはなんか、シンタックスハイライトがうまく行かなかったので、githubから直接とってきた。

ライブラリと実行ファイルをくっつけてコンパイル

ファイル結合をカジュアルに組み込めるってところが、
Javascriptを生で書かないメリットのひとつだと思っているので、ここは大事。

カジュアルにファイル切れるようになるのはいいこと。

先ほどのHumanクラスを書いたファイルと、実行用のファイルを、index.jsにくっつけてコンパイルしてみる。

なお、どちらもnpmモジュール名とコマンド名が異なるので注意。

TypeScript

tsc Human.ts index.ts --out index.js

CoffeeScript

coffee -j index.js -c Human.coffee index.coffee

微妙に違うので面倒くさい。。。

coffeeの方、-c以降はすべてファイル名と見なされちゃうようなので、
-j とかその他のオプションを先に書きましょう。

なお、コンパイルは本当はgrunt使うのが賢いと思いますよ。
(↑にwatchをつけるのでもいいけど)

まとめ

coffeeがつかいやすいのかなーという印象があったのだけれど、
Typeの方が自分の好みには合ってそうで、なんか正直おどろいた。

依存を明言する書式とかがきもいけど…

/// <reference path="Human.ts" />

しかもこれ、書いたからってrequrie的な処理までやってくれるわけではないのよね…。
(コンパイル時に気にかけるだけ)

参考資料

TypeScript

CoffeeScript