2. 概要
コメント書き方
# comment
###
comment
comment
###
1.変数にvarをつけない
2.;は不要
3.{}はインデントで表現
4.()は曖昧性がない場合、省略可能
例
score = 82
if score > 80
alert "OK"
###
var score;
score = 82;
if (score > 80) {
alert("OK");
}
5.JavaScriptを使いたい場合バッククォートで囲む
例
`alert("hello");`
###
alert("hello");;
3. 文字列
式展開はダブルクウォーテで囲む
score = 80
alert "score: #{score}"
alert "score: #{score * 10}"
var score;
score = 80;
alert("score: " + score);
alert("score: " + (score * 10));
文字列中の改行はスペースに変換される
msg = "this
is
a very
long
msg
"
var msg;
msg = "this is a very long msg";
heredoc(インデントや改行を保持したまま文字列をコード中に埋め込む)
html = """
<div id="main">
hello
</div>
"""
var html;
html = "<div id=\"main\">\n hello\n</div>";
4. 配列
配列は改行を使うこともできる(インデントは必要)
a = [
1
3
5
]
var a;
a = [1, 3, 5];
連番記号
m = [0..5]
var m;
m = [0, 1, 2, 3, 4, 5];
連番記号(最後の数字は含まない)
m = [0...5]
var m;
m = [0, 1, 2, 3, 4];
配列の取り出し
m = [0..5]
alert m[1..3]
var m;
m = [0, 1, 2, 3, 4, 5];
alert(m.slice(1, 4));
配列の取り出し(補足)
m = [0..5]
alert m[..3]
alert m[1..]
alert m[..]
alert m[1..-2]
var m;
m = [0, 1, 2, 3, 4, 5];
alert(m.slice(0, 4));
alert(m.slice(1));
alert(m.slice(0));
alert(m.slice(1, -1));
配列の入れ替え
m = [0..5]
m[0..1] = ["a","b","c"]
alert m
var m, ref;
m = [0, 1, 2, 3, 4, 5];
[].splice.apply(m, [0, 2].concat(ref = ["a", "b", "c"])), ref;
alert(m);
配列の入れ替え(文字列)
alert "world"[1..3]
alert("world".slice(1, 4));
5. オブジェクト
オブジェクトの書き方
m = name: "tagudhi", score: 80
var m;
m = {
name: "tagudhi",
score: 80
};
オブジェクトの書き方(YMLのような形式で書くこともできる)
m =
name: "tagudhi"
score: 80
var m;
m = {
name: "tagudhi",
score: 80
};
オブジェクトの書き方(入れ子)
m =
name: "tagudhi"
score:
first: 80
second: 70
third: 90
var m;
m = {
name: "tagudhi",
score: {
first: 80,
second: 70,
third: 90
}
};
6. if
ifで条件分岐
if score > 60
alert score
if (score > 60) {
alert(score);
}
一行で書く
if score > 60 then alert score
if (score > 60) {
alert(score);
}
ifを後置することができる
alert score if score > 60
if (score > 60) {
alert(score);
}
真偽で条件分岐
if score > 60
alert "OK"
else
alert "NG"
if (score > 60) {
alert("OK");
} else {
alert("NG");
}
一行で書くこともできる
if score > 60 then alert "OK" else alert "NG"
if (score > 60) {
alert("OK");
} else {
alert("NG");
}
条件分岐した値を代入
msg = if score > 60 then alert "OK" else alert "NG"
var msg;
msg = score > 60 ? alert("OK") : alert("NG");
7. 比較演算子・真偽値
==は===に変換される(is)
!=は!==に変換される(isnt)
比較演算子の連結
alert "OK" if 10 < x < 20
if ((10 < x && x < 20)) {
alert("OK");
}
trueはyes,onという表現が可能
falseはno.offという表現が可能
&&はandという表現が可能
||はorという表現が可能
!はnotという表現が可能
例
alert "OK" if answer is yes and signal isnt off
if (answer === true && signal !== false) {
alert("OK");
}
配列の中に値が存在するか
alert "OK" if 5 in [1, 3, 5]
if (5 === 1 || 5 === 3 || 5 === 5) {
alert("OK");
}
オブジェクトの中にキーが存在するか
obj =
score: 52
alert "OK" if "score" of obj
var obj;
obj = {
score: 52
};
if ("score" in obj) {
alert("OK");
}
8. switch文を使ってみよう
switch signal
when "red"
alert "STOP"
when "blue", "green" then alert "GO!"
when "yellow" then alert "CAUTION!"
else alert "wrong signal!"
switch (signal) {
case "red":
alert("STOP");
break;
case "blue":
case "green":
alert("GO!");
break;
case "yellow":
alert("CAUTION!");
break;
default:
alert("wrong signal!");
}
9. 繰り返し処理
for,in
sum = 0
for i in [0..9]
sum += i
alert sum
var i, j, sum;
sum = 0;
for (i = j = 0; j <= 9; i = ++j) {
sum += i;
}
alert(sum);
forを後置することで一行で表現
sum = 0
sum += i for i in [0..9]
alert sum
var i, j, sum;
sum = 0;
for (i = j = 0; j <= 9; i = ++j) {
sum += i;
}
alert(sum);
2つ飛びで処理をする
sum = 0
for i in [0..9] by 2
sum += i
alert sum
var i, j, sum;
sum = 0;
for (i = j = 0; j <= 9; i = j += 2) {
sum += i;
}
alert(sum);
配列内包(一段階ごと結果を配列として返す)
sum = 0
total = (sum += i for i in [0..9])
alert total
var i, sum, total;
sum = 0;
total = (function() {
var j, results;
results = [];
for (i = j = 0; j <= 9; i = ++j) {
results.push(sum += i);
}
return results;
})();
alert(total);
while文
i = 0
sum = 0
while i < 10
sum += i
i++
alert sum
var i, sum;
i = 0;
sum = 0;
while (i < 10) {
sum += i;
i++;
}
alert(sum);
while文(配列内包)
i = 0
sum = 0
total = while i < 10
sum += i
i++
alert total
var i, sum, total;
i = 0;
sum = 0;
total = (function() {
var results;
results = [];
while (i < 10) {
sum += i;
results.push(i++);
}
return results;
})();
alert(total);
配列・オブジェクトの繰り返し処理
配列の要素に対する繰り返し処理
for color in ["red", "blue", "pink"]
alert color
var color, i, len, ref;
ref = ["red", "blue", "pink"];
for (i = 0, len = ref.length; i < len; i++) {
color = ref[i];
alert(color);
}
一行で書くこともできる
alert color for color in ["red", "blue", "pink"]
var color, i, len, ref;
ref = ["red", "blue", "pink"];
for (i = 0, len = ref.length; i < len; i++) {
color = ref[i];
alert(color);
}
条件をつける
alert color for color in ["red", "blue",
"pink"] when color isnt "blue"
var color, i, len, ref;
ref = ["red", "blue", "pink"];
for (i = 0, len = ref.length; i < len; i++) {
color = ref[i];
if (color !== "blue") {
alert(color);
}
}
何番目かを追記する
alert "#{i}: #{color}" for color, i in ["red", "blue",
"pink"]
var color, i, j, len, ref;
ref = ["red", "blue", "pink"];
for (i = j = 0, len = ref.length; j < len; i = ++j) {
color = ref[i];
alert(i + ": " + color);
}
オブジェクトに対する繰り返し処理
results =
taguchi: 40
fkoji: 80
dotinstall: 60
for name, score of results
alert "#{name}: #{score}"
var name, results, score;
results = {
taguchi: 40,
fkoji: 80,
dotinstall: 60
};
for (name in results) {
score = results[name];
alert(name + ": " + score);
}
11. 関数
関数の書き方
function()は->記述できる
一行で書くこともできる
呼び出しは()をつける
hello = -> alert "hello"
hello()
var hello;
hello = function() {
return alert("hello");
};
hello();
引数が必要な時
引数は->の前に記述
引数がある時の呼び出しは()不要
hello = (name) ->
alert "hello"
hello "taguchi"
var hello;
hello = function(name) {
return alert("hello");
};
hello("taguchi");
引数に初期値を設定
hello = (name = "taguchi") ->
alert "hello"
hello()
var hello;
hello = function(name) {
if (name == null) {
name = "taguchi";
}
return alert("hello");
};
hello();
返り値はreturnを使わない場合最後に評価された値になる
hello = -> "hello"
msg = hello()
alert msg
var hello, msg;
hello = function() {
return "hello";
};
msg = hello();
alert(msg);
即時関数(関数をその場で実行する)
do -> alert "hello"
(function() {
return alert("hello");
})();
12. 分割代入
複数の値を一気に代入
[a, b, c] = [1, 5, 10]
alert a
alert b
alert c
var a, b, c, ref;
ref = [1, 5, 10], a = ref[0], b = ref[1], c = ref[2];
alert(a);
alert(b);
alert(c);
値の入れ替え
x = 10
y = 20
[x, y] = [y, x]
alert x
alert y
var ref, x, y;
x = 10;
y = 20;
ref = [y, x], x = ref[0], y = ref[1];
alert(x);
alert(y);
関数の返り値を複数にする
results = (x) -> [x, x ** 2, x ** 3]
[a, b, c] = results 5
alert a
alert b
alert c
var a, b, c, ref, results;
results = function(x) {
return [x, Math.pow(x, 2), Math.pow(x, 3)];
};
ref = results(5), a = ref[0], b = ref[1], c = ref[2];
alert(a);
alert(b);
alert(c);
オブジェクトから特定の値を取り出す
user =
name: "taguchi"
score: 52
email: "taguchi@dotinstall.com"
{name, email} = user
alert naem
alert email
var email, name, user;
user = {
name: "taguchi",
score: 52,
email: "taguchi@dotinstall.com"
};
name = user.name, email = user.email;
alert(naem);
alert(email);
13. クラス
クラスの作成
クラス名は大文字から
constructorインスタンスを作るときに呼ばれるメソッド
thisは@で代換可能
constructorの引数に@プロパティを入れる事でも設定できる
###
class User
constructor: (name) ->
# this.name = name
@name = name
###
class User
constructor: (@name) ->
hello: -> alert "hello, #{@name}"
tom = new User "Tom"
alert tom.name
tom.hello()
var User, tom;
User = (function() {
function User(name) {
this.name = name;
}
User.prototype.hello = function() {
return alert("hello, " + this.name);
};
return User;
})();
tom = new User("Tom");
alert(tom.name);
tom.hello();
14. クラスの継承
クラスにextendsをつけることでクラスを継承できる
class User
constructor: (@name) ->
hello: -> alert "hello, #{@name}"
class AdminUser extends User
tom = new User "Tom"
# alert tom.name
# tom.hello()
bob = new AdminUser "Bob"
alert bob.name
bob.hello()
var AdminUser, User, bob, tom,
extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
hasProp = {}.hasOwnProperty;
User = (function() {
function User(name) {
this.name = name;
}
User.prototype.hello = function() {
return alert("hello, " + this.name);
};
return User;
})();
AdminUser = (function(superClass) {
extend(AdminUser, superClass);
function AdminUser() {
return AdminUser.__super__.constructor.apply(this, arguments);
}
return AdminUser;
})(User);
tom = new User("Tom");
bob = new AdminUser("Bob");
alert(bob.name);
bob.hello();
上書きも可能
親クラスの同名のメソッドはsuperで呼ぶことが可能
class User
constructor: (@name) ->
hello: -> alert "hello, #{@name}"
class AdminUser extends User
hello: ->
alert "admin says..."
super()
tom = new User "Tom"
# alert tom.name
# tom.hello()
alert bob.name
bob.hello()
var AdminUser, User, tom,
extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
hasProp = {}.hasOwnProperty;
User = (function() {
function User(name) {
this.name = name;
}
User.prototype.hello = function() {
return alert("hello, " + this.name);
};
return User;
})();
AdminUser = (function(superClass) {
extend(AdminUser, superClass);
function AdminUser() {
return AdminUser.__super__.constructor.apply(this, arguments);
}
AdminUser.prototype.hello = function() {
alert("admin says...");
return AdminUser.__super__.hello.call(this);
};
return AdminUser;
})(User);
tom = new User("Tom");
alert(bob.name);
bob.hello();
15. 存在演算子
Javascriptでは
0 '' -> falseになる
null / undefined以外でtrueを返すには?演算子を使う
rs = if x? then "found" else "not found"
alert rs
var rs;
rs = typeof x !== "undefined" && x !== null ? "found" : "not found";
alert(rs);
二項演算子
y = 10
x = y ? 20
alert x
var x, y;
y = 10;
x = y != null ? y : 20;
alert(x);
安全なアクセス演算子
オブジェクトのプロパティが存在していない場合undefinedを返す
user =
name: "taguchi"
alert user.score?.first
var ref, user;
user = {
name: "taguchi"
};
alert((ref = user.score) != null ? ref.first : void 0);
メソッドの場合関数かどうかの判定もする
alert user.sayhi?()
alert(typeof user.sayhi === "function" ? user.sayhi() : void 0);