はじめるCoffeeScript その1

#CoffeeScript

うえじゅん

2012.05.02

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、うえじゅんです。

今回はCoffeeScriptについてです。

CoffeeScriptはRuby on Rails 3.1からデフォルトで使われていたり、SpineというJavaScriptのMVCフレームワークに使われていたりもします。
(Spineについては「Spine.js をはじめよう」を参照してみてください)

CoffeeScriptとは

公式Webサイトには以下のようにあります。

CoffeeScript is a little language that compiles into JavaScript.(JavaScriptにコンパイルする小さな言語です)
RubyやPythonと似ていると言われており、複雑になりがちのJavaScriptをシンプルに書くことができる言語です。

CoffeeScriptはNode.js上で動作します。
Node.jsをインストールした上でCoffeeScriptを試してみるのもいいのですが、もっと気軽に試せる「TRY COFFEESCRIPT」と言うものが公式にあります。

今回はその「TRY COFFEESCRIPT」で試しながら進めていくことにします。

Hello CoffeeScript!

ブラウザで「TRY COFFEESCRIPT」を開き、以下のように書いてみましょう。
(最初に書いてあるものは消してください )

hello = ->
　　console.log "Hello CoffeeScript!"

hello()

右側にはJavaScriptにコンパイルされた結果が表示されます。

var hello;

hello = function() {
  return console.log("Hello CoffeeScript!");
};

hello();

Run を押すことで実行することができますので、実行してみましょう。
(ブラウザのコンソールに Hello CoffeeScript! と表示されたら成功です)
JavaScriptに比べるととてもシンプルなのがわかりますね。

次に文法について見ていきましょう。

CoffeeScriptの文法

基本

行末のセミコロン(;)は不要
ブロック({ })はインテントを利用して表現
関数の最後の値が戻り値(return)

変数

変数は var を書く必要はありません。
(コンパイルすると自動的に宣言されます)

CoffeeScript

dev = 123

JavaScript

var dev;

dev = 123;

関数

関数の定義には function を使わず「->」を使います。
Rubyのように引数がある場合は「( )」を省略できます。

注意点
　引数がないときは省略できません。
　うっかりミスで「( )」を付け忘れてエラーでハマることがあります・・・

CoffeeScript

classmethod = ->
  console.log "dev.classmethod"

annotation = ->
  console.log()

JavaScript

var annotation, classmethod;

classmethod = function() {
  return console.log("dev.classmethod");
};

annotation = function() {
  return console.log();
};

引数がある場合は以下のようになります。

CoffeeScript

classmethod = (x) ->
  x * x

JavaScript

var classmethod;

classmethod = function(x) {
  return x * x;
};

上記のサンプルからわかるように関数の最後の値が return になります。

引数にデフォルト値を持たせることもできます。

CoffeeScript

classmethod = (x, y=10) ->
  x * y

JavaScript

var classmethod;

classmethod = function(x, y) {
  if (y == null) {
    y = 10;
  }
  return x * y;
};

1行のコメントは # で表現します。
1行コメントは JavaScript にコンパイルされた際には反映しません。

複数行のコメントは ### で表現します。
こちらは JavaScript にも反映します。
見せたいコメントについてはこの書き方をしましょう。

CoffeeScript

# 1行コメント
# (JavaScriptに反映しないよ)

###
  複数行コメント
  (JavaScriptにも反映するよ)
###

JavaScript

/*
  複数行コメント
  (JavaScriptにも反映するよ)
*/

文字列

文字列は JavaScript と変わらず「" "」、「' '」で表現します。
また、Rubyのように式展開も利用できます。

CoffeeScript

"classmethod dev()"

'classmethod design()'

name = "うえじゅん"
console.log "執筆者: #{name}"

JavaScript

"classmethod dev()";

'classmethod design()';

var name;

name = "うえじゅん";

console.log("執筆者: " + name);

ヒアドキュメントも利用できます。

「""" """」、「''' '''」で表現します。

CoffeeScript

html = """
  <!DOCTYPE html>
  <html>
  <head>
    <title>classmethod</title>
  </head>
  <body>
  <h1>Hello classmethod</h1>
  <h1>Hello annotation</h1>
  </body>
  </html>
"""

text = '''
  Hello classmethod
  Hello annotation
'''

JavaScript

var html, text;

html = "<!DOCTYPE html>\n<html>\n<head>\n  <title>classmethod</title>\n</head>\n<body>\n<h1>Hello classmethod</h1>\n<h1>Hello annotation</h1>\n</body>\n</html>";

text = 'Hello classmethod\nHello annotation';

だいぶ長くなったので「その1」はここまでとして「その2」に続きます。