Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

がっつり手を出したことが無かったんですが、
いよいよ案件で.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

fnobi
面白法人のテクニカルディレクター 兼 作曲家 兼 ドルヲタ ⌨️ http://github.com/fnobi 🎼 http://soundcloud.com/fnobi
http://fnobi.com/
kayac
古都鎌倉から新しい技術と面白いサービスを、次々にリリースする面白法人カヤックのフロントエンジニアチーム
http://www.kayac.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした