読者です 読者をやめる 読者になる 読者になる

のんびりSEの議事録

プログラミング系のポストからアプリに関してのポストなどをしていきます。まれにアニメ・マンガなど

速習CoffeeScript(今更すぎる...)

JavaScript PG

このまえ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());

参考

CoffeeScript 言語リファレンス - sappari wiki

CoffeeScript基礎文法最速マスター - undefined

すぐに分かる CoffeeScript によるクラスの書き方 | Developers.IO

CoffeeScriptでstatic/private/publicなメンバ/メソッドをもったクラスのつくりかた « DevJamMemo