6
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

CoffeeScriptの書き方

Last updated at Posted at 2015-07-06

##基礎

###変数の宣言

string = 'abc'
float = 123
boolean = true

varとセミコロンが消えます

###コメント

# 1行のコメント

###
複数行のコメント複数行のコメント複数行のコメント複数行のコメント複数行のコメント複数行のコメント複数行のコメント複数行のコメント複数行のコメント複数行のコメント複数行のコメント複数行のコメント複数行のコメント複数行のコメント複数行のコメント複数行のコメント複数行のコメント複数行のコメント複数行のコメント複数行のコメント複数行のコメント複数行のコメント複数行のコメント複数行のコメント複数行のコメント複数行のコメント
###

###配列

array = [
	'aaa'
	'bbb'
	'ccc'
]

カンマの代わりに改行を使う

###オブジェクト

obj = {
	a: 111
	b: 222
	c: 333
}

配列と同様にカンマの代わりに改行を使う

###制御文

val = 10
if val is 10
	console.log '10'
else
	console.log 'not 10'

条件式を()でくくらない、if文の中身を{}でくくらない

array = [
	a
	b
	c
]

for string in array
	console.log string

###関数

test = -> 
	console.log 'test'

test変数に無名関数を代入することで、test関数として実行できるようになる。

number = '2'

test = (number)->
	console.log 'test' + number
	
test(number)

引数を指定したい場合は ->の前に()をつけ、引数を指定します。

###->と=>の違い

class Hello
  constructor: (@name) ->
    result = $('#result')
    result.on 'click', ->
      alert 'こんにちは'+@name

h = new Hello('Aさん')

これの結果は、こんにちはundefinendになってしまいます。原因は、初めの@はオブジェクト自身を指しているが、次の@はイベントの発生元である、要素オブジェクトを指しているからです。
この問題を解消するのが=>です。これを使うと=>の外側で使っている@をそのまま関数の内側でも使えるようになります。

6
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?