Help us understand the problem. What is going on with this article?

CoffeeScript入門メモ

More than 5 years have 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 の導入

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away