CoffeeScript入門メモ

  • 205
    Like
  • 0
    Comment
More than 1 year has passed since last update.

ドットインストールの CoffeeScript 入門より

http://dotinstall.com/lessons/basic_coffeescript

CoffeeScript とは?

  • JavaScript に変換可能な言語
  • JavaScript に比べて…
    • 使いやすい
    • 書きやすい
    • 高機能
    • 最近人気
  • hello.coffee -> hello.js といった感じでコンパイル

基本

  • 行末までのコメントには # を使う
  • 複数行のコメントは ### で挟む
  • varは不要
  • 行末のセミコロンは不要
  • ブロックはインデントで表現
  • 丸括弧は曖昧性がない場合は省略可能

CoffeeScript:

message = "Hello, world!"

if message.length > 1
    alert message

JavaScript:

var message;

message = "Hello, world!";

if (message.length > 1) alert(message);

文字列

  • ダブルクオーテーション " で囲む
  • 複数行文字列もOK
  • ヒアドキュメントは """ で囲む

CoffeeScript:

s = "Hello, world!"

s = "Hello, 
world!"

s = """Hello,
world!"""

JavaScript:

var s;

s = "Hello, world!";

s = "Hello, world!";

s = "Hello,\nworld!";

#{var} のように書くことで文字列中の変数展開ができる.

CoffeeScript:

name = "questbeat"

alert "Hello, #{name}!"

JavaScript:

var name;

name = "questbeat";

alert("Hello, " + name + "!");

配列

CoffeeScript ではカンマではなく改行で区切ることができる.

CoffeeScript:

m = [
    1, 5, 8
    2, 4, 2
]

JavaScript:

var m;

m = [
    1, 5, 8,
    2, 4, 2,
];

[a..b] のように書くと, 範囲 a から b の配列を作成できる.

また, [a…b] のように書くと b を含まなくなる.

CoffeeScript:

m = [1..5]

m = [1...5]

JavaScript:

var m;

m = [1, 2, 3, 4, 5];

m = [1, 2, 3, 4];

連想配列

ブロック(波括弧)がインデントで表現できるので, 複雑な連想配列が簡単に書ける.

CoffeeScript:

h =
    "questbeat":
        "sales": 200
        "cost": 80
    "kuebi":
        "sales": 250
        "cost": 40

JavaScript:

var h;

h = {
    "questbeat": {
        "sales": 200,
        "cost": 80
    },
    "kuebi": {
        "sales": 250,
        "cost": 40
    }
};

条件分岐

if

インデントでスッキリ書ける.

CoffeeScript:

signal = "red"

if signal == "red"
    alert "Stop!"
else if signal == "green"
    alert "Go!"
else
    alert "Caution!"

JavaScript:

var signal;

signal = "red";

if (signal === "red") {
    alert("Stop!");
} else if (signal === "green") {
    alert("Go!");
} else {
    alert("Caution!");
}

後置の if も可能.

CoffeeScript:

x = 20

alert "OK!" if x is 20

JavaScript:

var x;

x = 20;

if (x === 20) {
    alert("OK!");
}   

また, 比較演算子がいくつか追加されている.

  • is (===)
  • isnt (!==)
  • not (!)
  • and (&&)
  • or (||)
  • ? (存在チェック)

連結比較式も書ける.

CoffeeScript:

x = 20

if 10 < x < 30
    alert "OK!"

JavaScript:

var x;

x = 20;

if ((10 < x && x < 30)) {
    alert("OK!");
}

switch

case ではなく when, default ではなく else.

CoffeeScript:

signal = "red"

switch signal
    when "red"
        alert "Stop!"
    when "green"
        alert "Go!"
    else
        alert "Caution!"

JavaScript:

var signal;

signal = "red";

switch (signal) {
    case "red":
        alert("Stop!");
        break;
    case "green":
        alert("Go!");
        break;
    default:
        alert("Caution!");
}

ループ

for

CoffeeScript:

for i in [0..3]
    alert i

JavaScript:

var i, _i;

for (i = _i = 0; _i <= 3; i = ++_i) {
    alert(i);
}

配列のループ

for-in を使って列挙. 要素のインデックスも取得できる.

CoffeeScript:

names = ["questbeat", "kuebi", "qb"]

for name, index in names
    alert "Hello, #{name} (#{index})!"

JavaScript:

var index, name, names, _i, _len;

names = ["questbeat", "kuebi", "qb"];

for (index = _i = 0, _len = names.length; _i < _len; index = ++_i) {
    name = names[index];
    alert("Hello, " + name + " (" + index + ")!");  }

連想配列のループ

for-of を使う. キーと値を取り出せる.

CoffeeScript:

sales =
    "questbeat": 100
    "kuebi": 200
    "qb": 300

for key, value of sales
    alert "#{key}: #{value}"

JavaScript:

var key, sales, value;

sales = {
    "questbeat": 100,
    "kuebi": 200,
    "qb": 300
};

for (key in sales) {
    value = sales[key];
    alert("" + key + ": " + value);
}

関数

基本形

関数には -> を使う.

CoffeeScript:

hello = ->
    alert "Hello!"

JavaScript:

function hello() {
    alert("Hello!");
};

引数

引数アリの関数は (args, …) -> と書く.

CoffeeScript:

hello = (name) ->
    alert "Hello, #(name)!"

hello("questbeat")

JavaScript:

var hello;

hello = function(name) {
    return alert("Hello, " + name + "!");
};

hello("questbeat");

引数のデフォルト値

label = default のように書く.

CoffeeScript:

hello = (name = "questbeat") ->
    alert "Hello, #(name)!"

hello()

JavaScript:

var hello;

hello = function(name) {
    if (name == null) name = "questbeat";
    return alert("Hello, " + name + "!");
};

hello());

返り値のある関数

明示的に return する必要はなく, 最後に計算された値が自動的に返り値になる.

CoffeeScript:

sum = (a, b) ->
    a + b

JavaScript:

var sum;

sum = function(a, b) {
    return a + b;
};

CoffeeScript の導入