速習CoffeeScript(今更すぎる...) - のんびりSEの議事録

このまえES6について投稿したのですが、現場でCoffeeScriptで記述されているところも幾つかあったので、CooffeeScriptについてもちょっとまとめてみようかなと思います。(個人的にはCooffeeScript = RoRのプロジェクトのイメージが大きくてあまり好きではなかったのですが...)

↓前に投稿したES6のまとめ

carefree-se.hatenablog.com

前準備

とりあえず試したいときには下記をよく使います

js2.coffee

インストール

公式にある通り、nodeでのインストール方法

npm install -g coffee-script

Railsの場合はGemfileに以下を追加する

gem 'coffee-rails'

基本

インデントが崩れると、コンパイルエラーになる(Pythonをイメージしてもらえれば分かりやすい)
()や;等省略が可能
varが不要
{}が不要

単一行コメント: # コンパイル時に破棄される
複数行コメント: ###...### コンパイル後も残る

変数

変数展開が可能

hoge = "hoge"
fuga = "fuga#{hoge}"

var hoge = "hoge";
var fuga = "fuga" + hoge;

文字列

ヒアドキュメントが使える

doc = """
docdoc
docdoc
"""

var doc = "docdoc\ndocdoc";

if

==は===に変換される

演算子のエイリアス

CoffeeScript	JavaScript
and	&&
or	\|\|
is	===
isnt	!==
not	!
true, yes, on	true
false, no, off	false
of	in
@, this	this

1行if

if ture then "a" else "b"

### switch

caseではなくwhenを使う

switch num
  when 1
    num + 1
  when 2
    num + 2
  else
    num * num

switch (num) {
  case 1:
    num + 1;
    break;
  case 2:
    num + 2;
    break;
  default:
    num * num;
}

range

integerのみRangeで配列作成が可能

range = [1..10]

var range = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

for

num = [1..3]

for i in num
  console.log i

var num = [1, 2, 3];

for (var i in num) {
  console.log(i);
}

オブジェクト

hash = 
  key: '1'
  name: 'abb'
  age: 23

var hash;

hash = {
  key: '1',
  name: 'abb',
  age: 23
};

オブジェクトループはofで行う

for key, val of hash
  console.log key

for (key in hash) {
  val = hash[key];
  console.log(key);
}

関数

アロー演算子->を用いる

myFunc () ->
  "hoge"

myFunc(function() {
  return "hoge";
});

CofeeScriptでは最後に定義したものが自動的にreturnとして扱われるため、returnしない関数には明示的にreturnを最後につける必要がある

デフォルト引数

CoffeeScriptではデフォルト引数も使用できる

myFunc (num = 1) ->
  num + 1

myFunc(function(num) {
  if (num == null) {
    num = 1;
  }
  return num + 1;
});

無名関数

doを使用する

do(num = 1) ->
  num + 2

(function(num) {
  return num + 2;
})(1);

可変長引数

myFunc (args...) ->
  console.log(args)
  return

myFunc(function() {
  var args;
  args = 1 <= arguments.length ? slice.call(arguments, 0) : [];
  console.log(args);
});

arguments - JavaScript | MDN

thisのバインド

=>を使うことで、thisを自動的にバインドする

@clickHandler = -> alert "clicked"
element.addEventListener "click", (e) => @clickHandler(e)

this.clickHandler = function() {
  return alert("clicked");
};

element.addEventListener("click", (function(_this) {
  return function(e) {
    return _this.clickHandler(e);
  };
})(this));

Class

CoffeeScriptではClass構文が扱える。継承も可能他の言語でOOPをやり慣れているならば、生のJSより分かりやすい

###
# MyClass
###
class MyClass
  
  # static プロパティ
  @name = null
  @age = null
  
  # フィールド(インスタンス変数)
  _country = null
  
  # constructor
  constructor: (name, age, country) ->
    @name = name
    @age = age
    _country = country
  
  # public method
  agree: () ->
    convertAgree.call @, _country
  
  # private method
  convertAgree = (country) ->
    switch country
      when "jp"
        "こんにちは"
      else
        "Hello"
        
myMy = new MyClass("bob", 22, "jp")
console.log myMy.agree()

/*
 * MyClass
 */
var MyClass, myMy;

MyClass = (function() {
  var _country, convertAgree;

  MyClass.name = null;

  MyClass.age = null;

  _country = null;

  function MyClass(name, age, country) {
    this.name = name;
    this.age = age;
    _country = country;
  }

  MyClass.prototype.agree = function() {
    return convertAgree.call(this, _country);
  };

  convertAgree = function(country) {
    switch (country) {
      case "jp":
        return "こんにちは";
      default:
        return "Hello";
    }
  };

  return MyClass;

})();

myMy = new MyClass("bob", 22, "jp");

console.log(myMy.agree());