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


がっつり手を出したことが無かったんですが、
いよいよ案件で**.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は[公式が用意してる](http://msopentech.com/blog/2012/10/01/sublime-text-vi-emacs-typescript-enabled)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をつけるのでもいいけど)

- https://npmjs.org/package/grunt-contrib-coffee
- https://npmjs.org/package/grunt-typescript

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

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

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

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


## 参考資料
### TypeScript
- [TypeScript - Playground](http://www.typescriptlang.org/Playground/)
  よくある、コンパイル結果をリアルタイムに見れるやつなんだけど、
サンプルで入ってるコードがいい感じで、これだけ見ればだいたい文法わかる。

- [TypeScriptで複数ファイルを扱おうとしてハマった点まとめ - 部屋とボードゲームと私と酒と泪と男と女](https://sites.google.com/site/jun1sboardgames/programming/typescript_module)
  requireも使えるようですが、なんだかな…という感じ

- [TypeScript クイックガイド - phyzkit.net](http://phyzkit.net/typescript/)
日本語の詳細な解説

### CoffeeScript
- [Coffee コマンド - sappari wiki](https://sites.google.com/site/sappariwiki/coffeescript/coffee-command)
- [CoffeeScript 言語リファレンス - sappari wiki](http://memo.sappari.org/coffeescript/coffeescript-langref#TOC-super)
sappari wikiさんすごく感謝


- [emacs | 技術備忘録](http://blog.10rane.com/tech/tag/emacs/)
coffee-mode導入の手引き。インデントハイライトまだいれてない。。