速習CoffeeScript(今更すぎる...)
このまえES6について投稿したのですが、現場でCoffeeScriptで記述されているところも幾つかあったので、CooffeeScriptについてもちょっとまとめてみようかなと思います。(個人的にはCooffeeScript = RoRのプロジェクトのイメージが大きくてあまり好きではなかったのですが...)
↓前に投稿したES6のまとめ
前準備
とりあえず試したいときには下記をよく使います
インストール
公式にある通り、nodeでのインストール方法
npm install -g coffee-script
Railsの場合はGemfileに以下を追加する
gem 'coffee-rails'
基本
コメント
変数
- 変数展開が可能
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); });
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