JavaScriptをシンプルに書けるCoffeeScript使ってみた

変数に var は必要ない

では、基本的な構文からみていきましょう。

1
num = 3245
2
console.log num

JSなら var num = 3245; と書くところですが「var」も「 ;（セミコロン）」も必要ありません。
2行目の console.log num は console.log (num) とカッコで囲んでも大丈夫です。
これをコンパイルすると次のように展開してくれます。

1
(function() {
2
  var num;
3
  num = 3245;
4
  console.log(num);
5
}).call(this);

コメント

コメントは「#」です

1
#1行コメント
2

3
###
4
複数行コメント
5
###

「###」の複数行コメントはコンパイル後にコメントアウトして表示されるのに対して、「#」の一行コメントはコンパイル後削除される。

配列 & ハッシュ

配列とハッシュです。

1
array = [
2
  'hoge1'
3
  'hoge2'
4
  'hoge3'
5
]
6
hash = {
7
  hoge1 : 100
8
  hoge2 : 200
9
  hoge3 : 300
10
}

この辺はぱっと見ると普通のJSですが、CoffeeScriptでは改行とかインデントに意味があって、改行とインデントを入れれば「,（カンマ）」が必要ないのです。
一行で書きたい場合は「,」を使えば通常通り書けます。

階層があるハッシュだとみやすいですね。

1
hash = {
2
  day1 :
3
    title : '今日のタイトル'
4
    body : '今日は晴れです。'
5
  day2 :
6
    title : '明日のタイトル'
7
    body : '明日は雨かもしれない。'
8
}

for文

100回繰り返したいって場合はこうです。

1
for i in [1..100]
2
  console.log i

すごく短くなっている気がする！
配列と同じで2行目（forの中）はインデントを入れないとエラーになります。

次に先ほどの配列とハッシュを展開してみます。

1
#配列
2
for value in array
3
  console.log value
4
#ハッシュ
5
for key, value of hash
6
  console.log "#{key} : #{value.title}"

関数

関数は「-> 式」の形になります。

1
hoge = ->
2
  console.log 'こんにちは'
3

4
hoge()

引数がある場合は「(引数) -> 式」の形になります。

1
hoge = (num1, num2) ->
2
  num1 + num2
3

4
console.log hoge(100, 200)

return キーワードは必要なく、最終行に自動的に return が付きます。

クラス

JSにはclassはありませんが、CofeeScriptにはclassキーワードが用意されていて、それっぽいことができます。

1
class Car
2
  constructor: (@name, @meters) ->
3

4
  move: (meter) ->
5
    @meters += 100
6

7
  show: ->
8
    console.log @meters
9

10
car1 = new Car("car01", 100)
11
car1.move()
12
car1.show()

CoffeeScriptを動かすには

CoffeeScript はそのままではブラウザは実行してくれません。
ブラウザで実行するには、最終的にコンパイル（変換）してJavaScriptにする必要があります。
node.js などでサーバー側でコンパイルするのが一般的なようですが、とりあえず試してみたいのであれば、ライブラリを読み込むだけで実行できます。

CoffeeScript

上記ページの「Latest Version: 1.2.0」の数字をクリックするとダウンロードできます。

解凍してできたフォルダの「extras」に「coffee-script.js」というファイルがあるので取り出しておきましょう。
あとはhtmlでこんな感じで読み込みます。

1
<script type="text/coffeescript" src="js/test.coffee"></script>
2
<script type="text/javascript" src="js/coffee-script.js"></script>

text.cofeeというファイルにCoffeeScriptを書けば実行してくれます。

CoffeeScriptはインストールしなくてもブラウザ上で実行できるよという話

NetBeansならプラグインがあります

メジャーなエディターやIDEならプラグインなどがあると思います。
NetBeans にもプラグインがあります。
「ツール」→「プラグイン」の「使用可能プラグイン」で「CoffeeScript」と検索してみてください。

プロジェクトツリーからCoffeeScriptファイルを右クリックすると「Compile」できたり「Autocompile」をonにしておけばファイルを更新するたびに自動的にコンパイルしてくれます。
ただ補完などはしてくれないっぽいです。