Slide 1

Slide 1 text

CoffeeScript KTͷϑΝϯͳͷͰKTॻ͘ͷ΍Ί·͢ܕݴޠ !HFUBNBTVJMBCDBNQ CoffeeScript version 1.6.2

Slide 2

Slide 2 text

What is CoffeeScript ίϯύΠϧ͢ΔͱKTʹͳΔಠࣗͷݴޠ KTͱൺ΂ͯهड़ྔ͕গͳ͘ࡁΉ

Slide 3

Slide 3 text

What is CoffeeScript 3VCZ΍1ZUIPOͷΑ͏ʹॻ͚Δ ϒϩοΫ͸ΠϯσϯτͰදݱ͢Δ จܳతϓϩάϥϛϯάࢦ޲ͳݴޠઃܭ ৚݅෼ͷޙஔ΍഑ྻͷ؆қه๏ͳͲ

Slide 4

Slide 4 text

What is CoffeeScript +BWB4DSJQUͷҋΛٵऩ͢Δ ؀ڥʹΑ࣮ͬͯ૷ɾಈ࡞͕ҟͳΔҋϝιου WBSJJJUFNMFOHUIJ ͱ͔ͷҋه๏ ϗΠεςΟϯάͱ͔͍͏ҋ࢓༷

Slide 5

Slide 5 text

What is CoffeeScript +BWB4DSJQUΛ΋ͬͱศརʹ͢Δ GPS&BDIΛ(PPE1BSUTʹஔ͖׵͑ͨΓ "SSBZQSPUPUZQFNBQͰ͖ͨΓ BCD ΛνΣοΫ͢Δ࣌ʹB͕VOEFpOFEͰ ΋UISPX&SSPS͞Εͳ͍ه๏ͱ͔

Slide 6

Slide 6 text

֮͑ΔͷͩΔ͘ͳ͍ʁ

Slide 7

Slide 7 text

KBWBTDSJQUͷҋʹٵΘΕΔ࿑ྗ ௒͑ΒΕͳ͍น $P⒎FF4DSJQUΛ֮͑Δ࿑ྗ

Slide 8

Slide 8 text

KBWBTDSJQUॻ͚ͯ3VCZ͔1ZUIPO஌ͬͯΕ͹ ࣌ؒ͘Β͍Ͱॻ͚ΔΑ͏ʹͳΓ·͢ ͱΑ͘ݴΘΕΔ KBWBTDSJQUͷҋʹͱΒΘΕͣϓϩάϥϜΛॻ͜͏

Slide 9

Slide 9 text

৯͍߹Θͤฏؾͳͷʁ K2VFSZͱ͔͞

Slide 10

Slide 10 text

*UTKVTUKBWBTDSJQU $P⒎FFΛ࢖͏ࣄͰҾ͖ى͜͞ΕΔ໰୊͸ຆͲແ͍ ௨ৗͷखॱͰTDSJQUTSD͢Ε͹࢖͑·͢

Slide 11

Slide 11 text

Τϥʔϝοηʔδ͕Ϋιͬͯ ฉ͍͚ͨͲʁ

Slide 12

Slide 12 text

͔ΒDP⒎FFͷΤϥʔߦ਺͕ग़·͢ ະͩʹʮσόοΨ͕Ϋιʯͱ͔ݴͬͯΔਓ͸ ୯ʹDP⒎FF͕ݏ͍ͳਓͰ͋ΔՄೳੑ͕ߴ͍

Slide 13

Slide 13 text

ίϯύΠϧͩΔ͘ͳ͍ʁ

Slide 14

Slide 14 text

Φʔτϝʔγϣϯπʔϧ͕෗Δఔ͋Δ DP⒎FFXD $PEF,JU (VBSE DPOOFDUBTTFUT 3BJMT BOENPSF

Slide 15

Slide 15 text

Φʔτϝʔγϣϯʹधཁ͕͋ΔͩΔΈ͕͋Δ Կ΋࢖Θͳ͚Ε͹͔֬ʹͩΔ͍

Slide 16

Slide 16 text

$P⒎FF͍͢͝ʂ طଘίʔυ΋ॻ͖׵͑Α͏ʂ

Slide 17

Slide 17 text

΍Ί͓͍ͯͨ΄͏͕٢ ॴײͱͯ͠͸୯ͳΔ࣌ؒͷແବ جຊతʹ৽نϓϩδΣΫτͰ࠾༻͞ΕΔ΂͖

Slide 18

Slide 18 text

Πϯετʔϧ͢Δ

Slide 19

Slide 19 text

ϗϯτʹ࢖͍෺ʹͳΔͷ͔ ͪΐΖͬͱࢼͯ͠Έ͍ͨΜ͚ͩͲ IUUQDP⒎FFTDSJQUPSH DMJDL <53:$0''&&4$3*15>

Slide 20

Slide 20 text

OPEFΛΠϯετʔϧ CSFXJOTUBMMOPEFKT MJOVYͰ͸CVJMEਪ঑ DP⒎FFΛΠϯετʔϧ OQNJOTUBMMHDP⒎FFTDSJQU XIFODFDP⒎FFͱ͔ͯ͠ग़͖ͯͨΒ͓L

Slide 21

Slide 21 text

ͲΜͳײ͡Ͱॻ͚Δͷ

Slide 22

Slide 22 text

class Animal constructor: (@name) -> move: (meters) -> alert "#{@name} moved #{meters}m." class Snake extends Animal move: -> alert "Slithering..." super 5 class Horse extends Animal move: -> alert "Galloping..." super 45 sam = new Snake "Sammy the Python" tom = new Horse "Tommy the Palomino" sam.move() tom.move()

Slide 23

Slide 23 text

class Animal constructor: (@name) -> move: (meters) -> alert "#{@name} moved #{meters}m." class Snake extends Animal move: -> alert "Slithering..." super 5 class Horse extends Animal move: -> alert "Galloping..." super 45 sam = new Snake "Sammy the Python" tom = new Horse "Tommy the Palomino" sam.move() tom.move() UIJTOBNFୈҰҾ਺ !͸UIJTͷ͜ͱɺ͸লུՄೳ ม਺ͷຒΊࠐΈ DMBTT͸OFX'VODUJPOͯ͠ QSPUPUZQFΛ֦ு͢Δίʔυͱಉٛ TVQFSΫϥεͷࢀর΋Մೳ WBS͍Βͳ͍ Ҿ਺ΛऔΔ৔߹ ͸লུՄೳ GVODUJPO FYUFOETՄೳ

Slide 24

Slide 24 text

var Animal, Horse, Snake, sam, tom, _ref, _ref1, __hasProp = {}.hasOwnProperty, __extends = 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; }; Animal = (function() { function Animal(name) { this.name = name; } Animal.prototype.move = function(meters) { return alert(this.name + (" moved " + meters + "m.")); }; return Animal; })(); Snake = (function(_super) { __extends(Snake, _super); function Snake() { _ref = Snake.__super__.constructor.apply(this, arguments); return _ref; } Snake.prototype.move = function() { alert("Slithering..."); return Snake.__super__.move.call(this, 5); }; return Snake; })(Animal); Horse = (function(_super) { __extends(Horse, _super); function Horse() { _ref1 = Horse.__super__.constructor.apply(this, arguments); return _ref1; } Horse.prototype.move = function() { alert("Galloping..."); return Horse.__super__.move.call(this, 45); }; return Horse; })(Animal); sam = new Snake("Sammy the Python"); tom = new Horse("Tommy the Palomino"); sam.move(); tom.move(); ίϯύΠϧ͢Δͱ͜͏ͳΔ ͭ·Γ ϒϥ΢βηʔϑʹ ॻ͜͏ͱ͢Δͱ͜͏ͳΔ ʂʂ௕͍ʂʂ

Slide 25

Slide 25 text

https://github.com/polarmobile/coffeescript-style-guide conventions for the CoffeeScript Best-practices and coding

Slide 26

Slide 26 text

DP⒎FF ͷެࣜʹ ղઆՃ͑ͯΈͨ

Slide 27

Slide 27 text

Function square = (x) -> x * x cube = (x) -> (square x) * x var cube, square; square = function(x) { return x * x; }; cube = function(x) { return square(x) * x; }; SFUVSO͞Εͯͳ͚Ε͹ ࣗಈͰSFUVSO ϩʔΧϧม਺͸ είʔϓઌ಄Ͱએݴ εϖʔεͷࠨଆ͕ؔ਺ εϖʔεͷӈଆ͕Ҿ਺ ͜ΕͰແ໊ؔ਺

Slide 28

Slide 28 text

Function (Default) fill = (container, liquid = "coffee") -> "Filling the #{container} with #{liquid}..." var fill; fill = function(container, liquid) { if (liquid == null) { liquid = "coffee"; } return "Filling the " + container + " with " + liquid + "..."; }; σϑΥϧτ஋ͷએݴ ม਺ͷຒΊࠐΈ͕Մೳ

Slide 29

Slide 29 text

Function (Context) Account = (customer, cart) -> @customer = customer @cart = cart $('.shopping_cart').bind 'click', (event) => @customer.purchase @cart ࣍ͷείʔϓ಺Ͱ΋ ಉ͡ίϯςΫετΛ࢖༻͢Δ UIJT͕มΘΒͳ͍ UIBUUIJTͯ͠ UIBUΛ࢖͏ͷͱಉ͡ॲཧ

Slide 30

Slide 30 text

Function (Splats) gold = silver = rest = "unknown" awardMedals = (first, second, others...) -> gold = first silver = second rest = others contenders = [ "Usain Bolt" "Asafa Powell" "Tyson Gay" "Michael Phelps" ] awardMedals contenders... alert "Gold: " + gold alert "Silver: " + silver alert "The Field: " + rest BSHVNFOUTΛ࢖Θͣ ෆಛఆ਺ͷҾ਺Λड͚औΕΔ ΋ͪΖΜ࢖ͬͯ΋ྑ͍ NBQ૬౰ άϩʔόϧίϯςΫετͰBQQMZ

Slide 31

Slide 31 text

Function (Splats) var awardMedals, contenders, gold, rest, silver, __slice = [].slice; gold = silver = rest = "unknown"; awardMedals = function() { var first, others, second; first = arguments[0], second = arguments[1], others = 3 <= arguments.length ? __slice.call(arguments, 2) : []; gold = first; silver = second; return rest = others; }; contenders = ["Usain Bolt", "Asafa Powell", "Tyson Gay", "Michael Phelps"]; awardMedals.apply(null, contenders); alert("Gold: " + gold); alert("Silver: " + silver); alert("The Field: " + rest); BSHVNFOUT͕Ҏ্ͳΒ "SSBZQSPUPUZQFTMJDFΛDBMM άϩʔόϧίϯςΫετͰBQQMZ ͓·͚ࢀর

Slide 32

Slide 32 text

Variable Safety outer = 1 changeNumbers = -> inner = -1 outer = 10 inner = changeNumbers() var changeNumbers, inner, outer; outer = 1; changeNumbers = function() { var inner; inner = -1; return outer = 10; }; inner = changeNumbers(); ม਺໊ͷॏෳ ϩʔΧϧม਺Խ͢Δ

Slide 33

Slide 33 text

Arrays bits = [ 1, 0, 1 0, 0, 1 1, 1, 0 ] numbers = [3..6] numbers = [3...6] var bits, numbers; bits = [1, 0, 1, 0, 0, 1, 1, 1, 0]; numbers = [3, 4, 5, 6]; numbers = [3, 4, 5]; ΧϯϚ͍Βͳ͍

Slide 34

Slide 34 text

Objects kids = brother: name: "Max" age: 11 sister: name: "Ida" age: 9 kids = { brother: { name: "Max", age: 11 }, sister: { name: "Ida", age: 9 } }; ΧϯϚ΋\^΋͍Βͳ͍ ΠϯσϯτͰೖΕࢠΛදݱ

Slide 35

Slide 35 text

Conditions var date, mood; if (singing) { mood = greatlyImproved; } if (happy && knowsIt) { clapsHands(); chaChaCha(); } else { showIt(); } date = friday ? sue : jill; mood = greatlyImproved if singing if happy and knowsIt clapsHands() chaChaCha() else showIt() date = if friday then sue else jill ޙஔ ࡾ߲ԋࢉ

Slide 36

Slide 36 text

Conditions (Chain) cholesterol = 127 healthy = 200 > cholesterol > 60 var cholesterol, healthy; cholesterol = 127; healthy = (200 > cholesterol && cholesterol > 60); ͋Γͦ͏Ͱແ͔ͬͨ ൺֱԋࢉࢠͷνΣΠϯ

Slide 37

Slide 37 text

Array Loops var i, item, _i, _j, _len, _len1, _ref, _ref2; _ref = ['a', 'b', 'c']; for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) { item = _ref[i]; get(i + 1, item); } _ref1 = ['a', 'b', 'c']; for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) { item = _ref1[_j]; if (food !== 'c') { get(item); } } get i + 1, item for item, i in ['a', 'b', 'c'] get item for item in ['a', 'b', 'c'] when food isnt 'c' JO BSSBZ ͷ࣌͸ WBMVF JOEFY XIFOͰGPSจΛ੍ޚՄೳ

Slide 38

Slide 38 text

Object Loops var age, ages, child, yearsOld; yearsOld = { max: 10, ida: 9, tim: 11 }; ages = (function() { var _results; _results = []; for (child in yearsOld) { age = yearsOld[child]; _results.push("" + child + " is " + age); } return _results; })(); yearsOld = max: 10, ida: 9, tim: 11 ages = for child, age of yearsOld "#{child} is #{age}" PG PCKFDU ͷ࣌͸ LFZ WBMVF GPS͔ΒฦΓ஋͕΋Β͑Δ

Slide 39

Slide 39 text

Closure Loops var filename, _fn, _i, _len; _fn = function(filename) { return fs.readFile(filename, function(err, contents) { return compile(filename, contents.toString()); }); }; for (_i = 0, _len = list.length; _i < _len; _i++) { filename = list[_i]; _fn(filename); } for filename in list do (filename) -> fs.readFile filename, (err, contents) -> compile filename, contents.toString() TIFMMϥΠΫʹGPS_EPͰ͖Δ ແ໊ؔ਺ͱ࣮ͯ͠ߦ

Slide 40

Slide 40 text

Switch wheretogo = switch day when "Mon" then go work when "Tue" then go relax when "Thu" then go iceFishing when "Fri", "Sat" if day is bingoDay go bingo go dancing when "Sun" then go church else go work TXJUDI͔ΒฦΓ஋Λ΋Β͑Δ CSFBL΍͸ෆཁ ҰߦͰॻ࣌͘͸UIFO ෳ਺ߦͳΒUIFO͍Βͳ͍ EFGBVMU͡Όͳͯ͘FMTF

Slide 41

Slide 41 text

Operators is isnt not and or true, yes, on false, no, off @, this of in :: @property, @.property unless hoge === !== ! && || true false this in prototype this.property if !hoge String::trim = ->ɹΈͨ͘࢖͑Δ

Slide 42

Slide 42 text

Operators (Exists?) if (typeof a != 'undefined' && typeof a.b != 'undefined' && typeof a.b.c !='undefined') { console.log a.b.c } else { console.log 'andefaindo!!!' } ͜Μͳܦݧ͋Γ·ͤΜ͔

Slide 43

Slide 43 text

Operators (Exists?) if a?.b?.c console.log a.b.c else console.log 'andefaindo!!!' ͰଘࡏΛ֬ೝͰ͖·͢

Slide 44

Slide 44 text

Destructuring Assignment a = 1 b = 2 [a, b] = [b, a] [a, b, c] = '0-1-2'.split '-' console.log a, b, c tag = "" [open, contents..., close] = tag.split("") options = name: "geta6", age: 24, height: 178 {name, age, height} = options ม਺ͷೖΕସ͑ TQMJUͷฦΓ஋ΛׂΓ౰ͯ PQUJPOT͔Β LFZ໊Λ୳ࡧ class Animal constructor: (@name) -> ͜ͷײ͕֮௫ΊΔͱ!OBNFͰUIJTOBNFBSH ɹɹɹͷؾ࣋ͪѱ͕ܰ͞ݮ͢Δͱࢥ͍·͢

Slide 45

Slide 45 text

Raw Javascript (eval) hi = `function() { return [document.title, "Hello JavaScript"].join(": "); }` ੜͷKBWBTDSJQU΋࢖͑·͢

Slide 46

Slide 46 text

Block (String) mobyDick = "Call me Ishmael. Some years ago -- never mind how long precisely -- having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world..." html = """ cup of coffeescript """ ͜ͷϥΠϯΛΠϯσϯτج४ʹग़ྗ \n cup of coffeescript\n ʹͳΔ ్தվߦ͸҆શʹແࢹ͞ΕΔ

Slide 47

Slide 47 text

Block (Comment) ### SkinnyMochaHalfCaffScript Compiler v1.0 Released under the MIT License ### ૬౰

Slide 48

Slide 48 text

Block (RegExp) OPERATOR = /// ^ ( ?: [-=]> # function | [-+*/%<>&|^!?=]= # compound assign / compare | >>>=? # zero-fill right shift | ([-+:])\1 # doubles | ([&|<>])\2=? # logic / shift | \?\. # soak access | \.{2,3} # range or splat ) /// 3FH&YQʹίϝϯτ͕͚ͭΒΕΔ εϖʔε͸શͯແࢹ͞ΕΔͷͰaTΛ࢖͏

Slide 49

Slide 49 text

BQQMZͱ͔DBMMͱ͔ͳΜͳͷ ͓·͚

Slide 50

Slide 50 text

Tips: Apply/Call "QQMZ'VODUJPOQSPUPUZQFBQQMZ $BMM'VODUJPOQSPUPUZQFDBMM 'VODUJPOΛݺͼग़ͨ͢ΊͷϓϩτλΠϓϝιου

Slide 51

Slide 51 text

Tips: Apply/Call B.FUIPEDBMM UIBU > ୈҰҾ਺ʹίϯςΫετɺ ͭ·ΓB.FUIPE಺෦ͷUIJTΛࢦఆ͠·͢ ୈೋҾ਺Ҏ߱͸ΧϯϚ۠੾ΓͰ B.FUIPEʹऔΒ͍ͤͨҾ਺Λॻ͖·͢ ख࡞ۀͰؔ਺Λݺͼग़͢ʹ͸DBMM͕ศར

Slide 52

Slide 52 text

Tips: Apply/Call B.FUIPEBQQMZ UIBU ୈҰҾ਺ʹίϯςΫετɺ ͭ·ΓB.FUIPE಺෦ͷUIJTΛࢦఆ͠·͢ ୈೋҾ਺ʹ͸ϦετͰɺ B.FUIPEʹऔΒ͍ͤͨҾ਺Λॻ͖·͢ BSHVNFOUTͷΑ͏ͳϦετͷॲཧʹ͸BQQMZ͕ศར

Slide 53

Slide 53 text

Tips: Apply/Call ୈҰҾ਺ ίϯςΫετ ʹVOEFpOFE΍OVMMΛऔ ΔͱɺάϩʔόϧΦϒδΣΫτͱͯ͠ೝࣝ͞Ε·͢ MPDBMͳΒXJOEPXɺOPEFKTͳΒHMPCBM

Slide 54

Slide 54 text

Tips: Apply/Call class Test _logLevel = 0 echo: -> console.log.apply console, arguments if @getLogLevel() > 1 getLogLevel: -> _logLevel setLogLevel: (lv) -> _logLevel = lv test = new Test test.echo 'Debug Message!!' ͜Μͳ෩ʹ࢖͑ΔΑฤ

Slide 55

Slide 55 text

Tips: Apply/Call class Hoge hoge: -> console.log 'hoge', @ instanceof Hoge class Fuga fuga: -> console.log 'fuga', @ instanceof Hoge hoge = new Hoge fuga = new Fuga hoge.hoge() # hoge true fuga.fuga() # fuga false fuga.fuga.call hoge # fuga true )PHFͷΠϯελϯε͔νΣοΫ ίϯςΫετ͕IPHFͳͷͰUSVF ͭ͡ʹؾ࣋ͪѱ͍ ͜Μͳ͜ͱ΋Ͱ͖ΔΑฤ

Slide 56

Slide 56 text

$P⒎FFͬͯͳΜͰ ม਺Λઌ಄Ͱએݴ͢Δͷʁ ͓·͚

Slide 57

Slide 57 text

Tips: Hoisting var a = 0; (function() { console.log(a); var a = 2; }()); console.log(a); ͜͜ͰԿ͕දࣔ͞ΕΔ͔ ͜͜͸ʮʯ ˞KTͷείʔϓ୯Ґ͸GVODUJPO

Slide 58

Slide 58 text

var a = 0; (function() { console.log(a); var a = 2; }()); console.log(a); Tips: Hoisting

Slide 59

Slide 59 text

Tips: Hoisting ͋ʜ͋Γͷ··ɹࠓɹىͬͨ͜ࣄΛ࿩ͥ͢ʂ ʮείʔϓ಺෦Ͱએݴͨ͠ϩʔΧϧม਺͕શͯ ɹɹɹɹɹείʔϓͷઌ಄Ͱએݴͨ͠ࣄʹͳ͍ͬͯͨʯ ͳʜʜԿΛݴ͍ͬͯΔͷ͔Θ͔ΒͶʔͱࢥ͏͕ɹ ͓Ε΋ԿΛ͞Εͨͷ͔Θ͔Βͳ͔ͬͨʜʜ

Slide 60

Slide 60 text

Tips: Hoisting var a; a = 0; (function() { var a; console.log(a); a = 2; }()); console.log(a); ͜͏ͳΔ ͜Ε͕ϗΠεςΟϯά KTͰ༠ൃ͞ΕΔҋ࢓༷ $P⒎FFͳΒউखʹॲཧͯ͘͠ΕΔ