Coffeescriptを試してみた

ChainZ(クリエイター)
いろいろやってます。

CoffeeScriptとは?

CoffeeScriptは簡単ていうとJavaScriptをシンプル化した言語です。しかし、CoffeeScriptは直接ブラウザやnode.jsでは実行できません。一回JavaScriptにコンパイルしなければなりません。なので、CoffeeScriptはJavaScriptを書くための言語です

CoffeeScriptの必要性?

CoffeeScriptはRubyやPythonなどを参考していて、今風の文法は結構書きやすいです。そして、JavaScriptのややこしいところ(classのコンセプトがないとか)を補完しています。

しかし、CoffeeScriptはsassみたいに、コンパイルしないとほぼ意味ないので、「俺はJavaScript書けるから、何でCoffeeScriptで書かないといけないの?」とかいう方いるだろうし(自分はそうだった)、チームワークになると、みんなCoffeeScriptを勉強しなければならないし、なかなか難しいところです。

基本文法

CoffeeScriptは自分の文法を持っています。しかし、JavaScriptの文法もすべて使えますCoffeeScriptはインデントをサポートしていません、すべてスペースに変換しないとうまくコンパイルされないので、エディターの設定をチェックしましょう。

コメント

1
# これはコメントです
1
2
3
4
###
  複数行のコメントはこう。。
  ...
###

変数

CoffeeScriptで変数を定義するには、JavaScriptのvarはいらないです

1
apple = 'りんご'

CoffeeScriptはグロバール変数を廃棄しました。もしどうしても使いたい場合は、ルートスコープで下記のように、変数を宣言します:

1
2
glob = this
glob.banana = 'グロバールのバナナ'

すると、glob.bananaはグローバル変数と同じ機能します。

関数

JavaScriptのfunctionは、CoffeeScriptで非常にシンプルになりました。

1
2
3
4
5
6
7
8
9
# CoffeeScript
say = (something) -> console.log(something)
say "hello, world"

# JavaScript
var say = function(something){
  console.log(something)
}
say("hello, world");

もしfunctionの引数がない場合は、省略できます:

1
say = -> "hello"

これをJavaScriptで解釈すると:

1
2
3
var say = function() {
  return "hello";
}

コンディション

1
2
3
4
5
6
fruit = 'apple'
eat = (fruit) -> console.log('eat ' + fruit)

if fruit is 'apple'
  eat fruit
  

CoffeeScriptは===!==の代わりにisisntを使っています。==!=はあまりおすすめしません(もちろん、使えますが)。そして、否定の!はCoffeeScriptでnotというアリアスも使います。

1
2
if fruit is not 'pear'
  eat fruit

上記の文を一行で完結したければ、thenを使います。

1
if fruit is 'apple' then eat fruit
1
2
if fruit is not 'pear'
  eat fruit

CoffeeScriptはRubyみたいに、ifは後ろ置きでもできます。

1
eat fruit if fruit is 'apple'

unlessも使えます(if notと同じ意味)

1
eat fruit unless fruit is 'pear'

ループ

CoffeeScriptは素晴らしいイテレータがあります。例えば:

1
2
for fruit in ['apple', 'bananer', 'pear']
  console.log fruit

もっとシンプルすると:

1
console.log fruit for fruit in ['apple', 'bananer', 'pear']

とも書ける。パッと見ると、わけわからないかもしれないが。読むときは、右から読めばわかりやすいです、まずfor fruit in ['apple', 'bananer', 'pear']['apple', 'bananer', 'pear']中の要素を一つずつ抽出し、fruitに保存し、console.log(fruit)に渡します。

もしインデックスを取得したければ

1
2
for fruit, index in ['apple', 'bananer', 'pear']
  console.log index + ' ' + fruit

ハッシュタイプの配列のイテレータも簡単!

1
2
3
4
5
6
7
8
9
player = {
  hp : 100,
  mp : 100,
  attack : 120,
  defence : 80
}

for param, value in player
  console.log('param: ' + value )

OOP

CoffeeScript一番便利なところは、はっきりしたclassのコンセプトがあるところです。JavaScriptにclassというものはないだが、classらしいものが作れます。たとえば:

1
2
3
4
var Player = function Player(name)
{
  this.name = name;
}

このPlayerがJavaScriptのclassになります。

CoffeeScriptだと、もっと「きれい」な書き方ができます。

1
2
3
class Player
  constructor: (name) ->
      @name = name

constructorの中に@をつければ、クラスのメンバー変数になります。

1
2
player = new Player('Bii')
console.log(player.name) # Bii

同じ感じで、メソードを追加します。

1
2
3
4
5
6
7
8
class Player
  sayHello : =>
      console.log('こんにちは')
  constructor: (name) ->
      @name = name
 
player = new Player('Bii')
player.sayHello() # こんにちは

staticメンバーは、classのスコープで@を付けて定義します。

1
2
3
4
5
6
7
class Player
  @find : (name) -> # これがスタティックメンバー
      console.log("Searhing user #{name}")        

  constructor: (name) ->
      @name = name #これがメンバー変数
Player.find('Bii') # Searhing user Bii

@はJSでというとthisと似てます。なので、スコープによって意味が変わるので、要注意です。@constructorのスコープではメンバー変数になりますが、classスコープではスタティックメンバーになります。

まとめ

CoffeeScriptは非常に使いやすくて、効率も良いし、コンパイルすれば純正のJavaScriptになるので、互換性にも心配ありません。もちらん、CoffeeScriptに慣れちゃったら、普通のJSが書けなくなってしまう可能性もあります。例えば、var;を忘れたりするとかもあり得ることです。なので、自分のJSに自信があってからCoffeeScriptを書くのをおすすめします。