• Save
CoffeeScriptってなんぞ?
Upcoming SlideShare
Loading in...5
×
 

CoffeeScriptってなんぞ?

on

  • 26,813 views

kanazawa.js v1.7 - Back to Basics -(2012年3月31日開催)で使用したスライドです。

kanazawa.js v1.7 - Back to Basics -(2012年3月31日開催)で使用したスライドです。

Statistics

Views

Total Views
26,813
Views on SlideShare
19,232
Embed Views
7,581

Actions

Likes
82
Downloads
5
Comments
2

26 Embeds 7,581

http://makoto-tanaka.com 7291
http://nloc.tumblr.com 68
https://twitter.com 52
http://webcache.googleusercontent.com 35
http://act2012bl.tumblr.com 20
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://localhost 4
http://edu.isc.chubu.ac.jp 3
http://s.deeeki.com 3
https://www.google.co.jp 3
http://192.168.245.161 2
https://twimg0-a.akamaihd.net 2
http://paper.li 2
http://www.tumblr.com 2
http://twicli.neocat.jp 1
http://cache.yahoofs.jp 1
http://hrt.happy.nu 1
http://192.168.245.162 1
http://www.google.co.jp 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 使いやすそうですね。
    Are you sure you want to
    Your message goes here
    Processing…
  • いいね!
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

CoffeeScriptってなんぞ? CoffeeScriptってなんぞ? Presentation Transcript

  • 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!
  • まとめ
  • 短く書ける 役に立つ機能コードが一貫性を持つ
  • 短く書ける 役に立つ機能コードが一貫性を持つ
  • 短く書ける 役に立つ機能コードが一貫性を持つ
  • "CoffeeScriptはJavaScriptをスタンダードなデザインパターンで書くための省略形の集合だ。" Reg Braithwaite
  • Thank you