はじめるCoffeeScript その1

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」に続きます。

この記事をシェアする