がっつり手を出したことが無かったんですが、
いよいよ案件で.tsなファイルが現れたので、
TypeScriptの勉強を始めました。
そしてことのついでに、CoffeeScriptもここいらで勉強しておくか!
というわけで比較しながら、入門時の要点まとめしてみます。
だいたいどんな言語か
TypeScript
このごろ縁が薄い、MicroSoftさんご提供の言語
要するに、型付きにして、クラスベースにしたJavascript
拡張子は.ts
クラスと変数宣言のところだけ変わってるけれど、その他の中身はただのJavascript
よって学習コストはかなり低いっぽい
もちろんjavascriptには型なんて無いので、宣言した型はコンパイルするときにだけ意味を持つ
TypeScriptで書くことによってコードが最適化されるとかはないらしい。
CoffeeScript
Javascriptにコンパイルする系の言語では、いま一番人気。(主観)
要するに、Rubyのいいところを取り入れて、超短く書けるJavascript。
-
と言いつつ、
- クラスもclass宣言で書けたり、
- extend周りも細かいもの色々あったり、
- その場所でのthisをbindするメソッドを簡単に書けたり…とかなり多機能。
多機能なだけに、覚えたての頃はドキュメントが手放せなさそう。
平凡なことしかしないなら、「->で関数」だけ覚えとけば何とかなる。
拡張子は.coffee
インストールしよう
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
TypeScript - Playground
よくある、コンパイル結果をリアルタイムに見れるやつなんだけど、
サンプルで入ってるコードがいい感じで、これだけ見ればだいたい文法わかる。TypeScriptで複数ファイルを扱おうとしてハマった点まとめ - 部屋とボードゲームと私と酒と泪と男と女
requireも使えるようですが、なんだかな…という感じTypeScript クイックガイド - phyzkit.net
日本語の詳細な解説
CoffeeScript
- Coffee コマンド - sappari wiki
CoffeeScript 言語リファレンス - sappari wiki
sappari wikiさんすごく感謝emacs | 技術備忘録
coffee-mode導入の手引き。インデントハイライトまだいれてない。。