CoffeeScriptを使ってみよう！文法編

ryog

今回はCoffeeScriptを実際に使ってみようと思います。
環境構築が完了していない人は、CoffeeScriptの公式サイトで動かせるので試してみては如何でしょうか。
というよりも勉強くらいならブラウザで動かした方が楽でいいですよね。
私もこの日記で公開しているコードは、ブラウザで動作確認していますｗ


前回の環境構築はなんだったんだ？という声が聞こえてきそうですが。
ま、まぁ気にしない方向でいこうじゃなイカ！


ではでは、早速CoffeeScriptを使ってみましょう。

基本

コメント

CoffeeScriptでは、コメントを#で表現します。
Rubyを使ってる私にはお馴染みなので覚えやすいです。

# もう何も怖くない 
number = 1

###で範囲コメントが使えます。

###
「行ってしまったわ…円環の理に導かれて」 
「美樹さん…さっきのあの一撃に、全ての力を使ってしまったのね」 
「それが魔法少女の運命よ。この力を手に入れた時からわかっていたはずでしょう」 
「希望を求めた因果が、この世に呪いをもたらす前に、私達はああやって、消え去るしかないのよ」 
「暁美さん…？まどかって…」
###
インデント

CoffeeScriptでは、ブロックをインデントで表現します。
ここら編はPythonライクですね。私はPython使った事ないですけど。

hello = ->
  console.log("Hello World!")

上記のコードはJavaScriptに変換すると以下のようになります。

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

変数

変数宣言

RubyやPythonを使っている方にはお馴染みですが、変数の宣言にvarは必要ありません。

number   = 24
opposite = true

JavaScriptに変換されれば、正しくvarが定義されています。

var number, opposite;
number = 24;
opposite = true;
@修飾子

変数名の前に@を付けた場合、this.と同じ扱いになります。
this.をそのまま使うことも可能です。

@message = "あははは、ホントだ。その気になれば痛みなんて…あはは。完全に消しちゃえるんだ"
this.message = "あたしって、ホントばか"

文字列

基本

既にサンプルで出てきているのでお気づきかもしれませんが、ダブルクォーテーションかシングルクォーテーションのどちらかで囲います。
複数行にわたって文字列を記述することも可能です。（改行は文字列に反映されません。）

"僕、君たちにお願いがあって来たんだ"
'僕と契約して、魔法少女になって欲しいんだ'

"
「まどか、君はエントロピーっていう言葉を知ってるかい？」 
「簡単に例えると、焚き火で得られる熱エネルギーは、木を育てる労力と釣り合わないってことさ」 
「エネルギーは形を変換する毎にロスが生じる」 
「宇宙全体のエネルギーは、目減りしていく一方なんだ」 
「だから僕たちは、熱力学の法則に縛られないエネルギーを探し求めて来た」 
"
ヒアドキュメント

"""か'''で、ヒアドキュメントになります。

"""
　 　 　　　＿＿＿_
　 　　　／⌒　　⌒＼
　　　／（ ●） 　（●）＼
　 ／::::::⌒（__人__）⌒::::: ＼ 　　だからニュー速でやるお！
　 |　　　　　|r┬-|　　　　　|
　 ＼ 　　 　 `ー'´ 　 　 ／

"""

上記のコードはJavaScriptに変換すると以下のようになります。

"　 　　　＿＿＿_\n　　　／⌒　　⌒＼\n　　　／（ ●） 　（●）＼\n／::::::⌒（__人__）⌒::::: ＼ 　　だからニュー速でやるお！\n|　　　　　|r┬-|　　　　　|\n＼ 　　 　 `ー'´ 　 　 ／\n";
式展開

ダブルクォーテーション内部では、以下の様に記述することで式の評価が行われます。
シングルクォーテーションでは式展開がされませんので注意して下さい。

character = "暁美ほむら"
alert "まどかマギカでは「#{ character }」が一番可愛い！"

上記のコードはJavaScriptに変換すると以下のようになります。

var character;
character = "暁美ほむら";
alert("まどかマギカでは「" + character + "」が一番可愛い！");

配列

配列宣言

CoffeeScriptでの配列宣言はJavaScriptと同様に宣言出来ます。
勿論varで変数宣言をする必要はありません。
また、改行も区切り文字として認識されます。

list = [1, 2, 3, 4, 5]
list = [1
2
3, 4
5]
範囲指定

範囲を指定して配列を作成することもできます。

# 1以上5以下
list = [1..5]
# 1以上5未満
list = [1...5]
配列要素へのアクセス

JavaScriptと同様です。

オブジェクト（連想配列）

JavaScriptとほぼ同様です。｛｝は省略可能です。

object = {1:"ほむら", 2:"まどか"}
object =
  1:"ほむら"
  2:"まどか"

上記のコードはJavaScriptに変換すると以下のようになります。

var object;
object = {
  1: "ほむら",
  2: "まどか"
};

条件分岐

if, unless, else

ifは条件式が真の時に処理を実行します。
unlessは条件式が偽の時に処理を実行します。
気をつけるべきは条件式の後に続けて処理を記述する事が出来ないということです。

if !condition?
  alert "hoge"
else unless a is b
  alert "fuga"

上記のコードはJavaScriptに変換すると以下のようになります。

if (!(typeof condition !== "undefined" && condition !== null)) {
  alert("hoge");
} else if (a !== b) {
  alert("fuga");
}

処理が1行の時は以下のような簡易記法が使えます。

# if 条件 then 処理
if condition then alert "hoge"
# 処理 if 条件
alert "hoge" if condition
switch

switchでの分岐はcaseではなくwhenとelseを使います。

switch condition
  when 1, 2
    alert "ほむまど"
  when 3, 4 then alert "さや杏"
  else
    alert "マミ"

上記のコードはJavaScriptに変換すると以下のようになります。

switch (condition) {
  case 1:
  case 2:
    alert("ほむまど");
    break;
  case 3:
  case 4:
    alert("さや杏");
    break;
  default:
    alert("マミ");
}

ループ

while

単純なループはwhileを使用します。

while 条件式
　処理

処理 while 条件式

a = 0
while a < 3
  alert a
  a++

上記のコードはJavaScriptに変換すると以下のようになります。

var a;
a = 0;
while (a < 3) {
  alert(a);
  a++;
}
for

for文は配列と連想配列に対して使用することが出来ます。
inとofでは生成されるコードが変わりますのでコードを参考にして下さい。

for 変数 in(of) 配列
　処理

list = [1, 3, 5]
for value in list
  alert value

for value of list
  alert value

上記のコードはJavaScriptに変換すると以下のようになります。

var list, value, _i, _len;
list = [1, 3, 5];
for (_i = 0, _len = list.length; _i < _len; _i++) {
  value = list[_i];
  alert(value);
}
for (value in list) {
  alert(value);
}

処理が1行の場合は簡略化出来ます。

list = [1, 3, 5]
alert value for value in list

関数

関数定義
関数名 = (変数, 変数) ->
　処理

戻り値は最後に処理した値になります。
明示的にreturnを指定することも出来ます。

hello = (a, b) ->
  alert a + b

上記のコードはJavaScriptに変換すると以下のようになります。

var hello;
hello = function(a, b) {
  return alert(a + b);
};
呼び出し

関数を呼び出しには括弧が必要ありません。

hello "暁美", "ほむら"

ですが、引数がない関数を呼び出す場合は括弧が必要です。

hello()

最後に

CoffeeScriptの文法は如何だったでしょうか？
他にも説明する内容があったのですが、量が多いと書く方も読むほうも大変なので省略致しました。


ここに書いてある事はすべて下記の参考サイトで見ることが出来ます。
私が省略してしまった内容も書かれていますので、一読する事をオススメします。


参考サイト
CoffeeScript入門 - プログラムdeタマゴ


次回はCoffeeScriptの続きか、別の技術紹介になると思います。
私の更新は恐らく一ヶ月後になるので、気長にお待ちください。


更新頻度は高くないですが、個人ブログの方もよろしくお願いしますｗ
http://d.hatena.ne.jp/decult/


※はてなのスーパpre記法がCoffeeScriptに対応してないのが悲しい。


CoffeeScript: Accelerated JavaScript Development

CoffeeScript: Accelerated JavaScript Development