CoffeeScriptってなんぞ？

CoffeeScriptってなんぞ？ kanazawa.js v1.7

水野隼登Webデザイナー株式会社DMM.comラボtwitter: @pocotan001

CoffeeScript？

CoffeeScriptはJavaScriptです。 CoffeeScript？

CoffeeScriptはJavaScriptです。 alert "Hello" .coffee CoffeeScript？

CoffeeScriptはJavaScriptです。 alert "Hello" .coffee alert("Hello"); .js CoffeeScript？

CoffeeScriptは小さな言語です。 CoffeeScript？

CoffeeScriptは小さな言語です。全60ページ CoffeeScript？

アジェンダ・ Less code! - 少ないコード・ Enhancements! - 機能の強化 CoffeeScript？

Less code!

うわ、私のJavaScript 1/3...？

Example 1$(function() { $("body").html("Hello");}); Less code!

; 要らない。$(function() { $("body").html("Hello")}) Less code!

; () 要らない。$ function() { $("body").html "Hello"} Less code!

; () {} 要らない。$ function() $("body").html "Hello" Less code!

インデントでブロックを表現$ function() $("body").html "Hello" Less code!

function() は ->$ -> $("body").html "Hello" Less code!

Example 2$("div").click(function(event) { $(this).css({ color: "red", fontSize: "14px" });}); Less code!

; () {} 要らない。$("div").click function(event) $(this).css color: "red", fontSize: "14px" Less code!

; () {} , 要らない。$("div").click function(event) $(this).css color: "red" fontSize: "14px" Less code!

インデントでブロックを表現$("div").click function(event) $(this).css color: "red" fontSize: "14px" Less code!

function(args) は (args) ->$("div").click (event) -> $(this).css color: "red" fontSize: "14px" Less code!

this は @$("div").click (event) -> $(@).css color: "red" fontSize: "14px" Less code!

Enhancements!

変数に var要らない。version = 1.7 Enhancements!

グローバル変数は明示的に。version = 1.7window.title = "kanazawa.js" Enhancements!

""の中では #{式} が使える。version = 1.7window.title = "kanazawa.js#{version}" Enhancements!

こんな書き方もokversion = 1.7window.title = "kanazawa.js#{version + 1}" Enhancements!

あいまいな == と != は使えない。# 1 === true1 == true Enhancements!

=== は isとも書ける。# 1 === true1 is true Enhancements!

JavaScript CoffeeScript=== is Enhancements!

JavaScript CoffeeScript=== is!== isnt! not&& and|| ortrue true, yes, onfalse false, no, off Enhancements!

すべての文が...if 1 is true "○"else "×" Enhancements!

式として扱える。result = if 1 is true "○"else "×" Enhancements!

基本的に最後の値が返る。result = if 1 is true "○"else "×" "no!" Enhancements!

関数においても同じ。sum = (x, y) -> ... x + y Enhancements!

関数は return 書いてもoksum = (x, y) -> ... return x + y Enhancements!

まとめ

短く書ける役に立つ機能コードが一貫性を持つ

"CoﬀeeScriptはJavaScriptをスタンダードなデザインパターンで書くための省略形の集合だ。" Reg Braithwaite

Thank you

http://makoto-tanaka.com	2587
https://twitter.com	32
http://nloc.tumblr.com	21
http://act2012bl.tumblr.com	20
http://webcache.googleusercontent.com	18
http://favtile.com	16
http://atm09td.tumblr.com	15
http://ab-sn5.tumblr.com	13
http://us-w1.rockmelt.com	12
http://tweetedtimes.com	10
http://unkei3.tumblr.com	9
http://192.168.3.249	8
https://si0.twimg.com	6
http://s.deeeki.com	3
http://edu.isc.chubu.ac.jp	3
https://twimg0-a.akamaihd.net	2
http://www.tumblr.com	2
http://paper.li	2
http://hrt.happy.nu	1
http://twicli.neocat.jp	1
http://cache.yahoofs.jp	1

CoffeeScriptってなんぞ？

by Hayato Mizuno

Accessibility

Categories

Upload Details

Usage Rights

21 Embeds 2,782

Statistics

CoffeeScriptってなんぞ？ Presentation Transcript