What is CoffeeScript

jsのファンなのでjs書くのやめます型言語CoffeeScriptについて、増井研究室合宿の勉強会で適当に発表しました

Transcript

1. CoffeeScript KTͷϑΝϯͳͷͰKTॻ͘ͷ΍Ί·͢ܕݴޠ !HFUB
   NBTVJMBCDBNQ CoffeeScript version 1.6.2
2. What is CoffeeScript ίϯύΠϧ͢ΔͱKTʹͳΔಠࣗͷݴޠ KTͱൺ΂ͯهड़ྔ͕গͳ͘ࡁΉ
3. What is CoffeeScript 3VCZ΍1ZUIPOͷΑ͏ʹॻ͚Δ ϒϩοΫ͸ΠϯσϯτͰදݱ͢Δ จܳతϓϩάϥϛϯάࢦ޲ͳݴޠઃܭ ৚݅෼ͷޙஔ΍഑ྻͷ؆қه๏ͳͲ
4. What is CoffeeScript +BWB4DSJQUͷҋΛٵऩ͢Δ ؀ڥʹΑ࣮ͬͯ૷ɾಈ࡞͕ҟͳΔҋϝιου WBS
   JJJUFNMFOHUI J ͱ͔ͷҋه๏ ϗΠεςΟϯάͱ͔͍͏ҋ࢓༷
5. What is CoffeeScript +BWB4DSJQUΛ΋ͬͱศརʹ͢Δ GPS&BDIΛ(PPE1BSUTʹஔ͖׵͑ͨΓ "SSBZQSPUPUZQFNBQͰ͖ͨΓ BCD ΛνΣοΫ͢Δ࣌ʹB͕VOEFpOFEͰ ΋UISPX
   &SSPS͞Εͳ͍ه๏ͱ͔
6. ֮͑ΔͷͩΔ͘ͳ͍ʁ
7. KBWBTDSJQUͷҋʹٵΘΕΔ࿑ྗ
   
   ௒͑ΒΕͳ͍น
   
   $P⒎FF4DSJQUΛ֮͑Δ࿑ྗ
8. KBWBTDSJQUॻ͚ͯ3VCZ͔1ZUIPO஌ͬͯΕ͹ ࣌ؒ͘Β͍Ͱॻ͚ΔΑ͏ʹͳΓ·͢ ͱΑ͘ݴΘΕΔ KBWBTDSJQUͷҋʹͱΒΘΕͣϓϩάϥϜΛॻ͜͏
9. ৯͍߹Θͤฏؾͳͷʁ K2VFSZͱ͔͞
10. *UT
    KVTU
    KBWBTDSJQU $P⒎FFΛ࢖͏ࣄͰҾ͖ى͜͞ΕΔ໰୊͸ຆͲແ͍ ௨ৗͷखॱͰTDSJQU
    TSD͢Ε͹࢖͑·͢
11. Τϥʔϝοηʔδ͕Ϋιͬͯ ฉ͍͚ͨͲʁ
12. ͔ΒDP⒎FFͷΤϥʔߦ਺͕ग़·͢ ະͩʹʮσόοΨ͕Ϋιʯͱ͔ݴͬͯΔਓ͸ ୯ʹDP⒎FF͕ݏ͍ͳਓͰ͋ΔՄೳੑ͕ߴ͍
13. ίϯύΠϧͩΔ͘ͳ͍ʁ
14. Φʔτϝʔγϣϯπʔϧ͕෗Δఔ͋Δ DP⒎FF
    XD $PEF,JU (VBSE DPOOFDUBTTFUT 3BJMT
     BOE
    NPSF
15. Φʔτϝʔγϣϯʹधཁ͕͋Δ
    
    ͩΔΈ͕͋Δ Կ΋࢖Θͳ͚Ε͹͔֬ʹͩΔ͍
16. $P⒎FF͍͢͝ʂ طଘίʔυ΋ॻ͖׵͑Α͏ʂ
17. ΍Ί͓͍ͯͨ΄͏͕٢ ॴײͱͯ͠͸୯ͳΔ࣌ؒͷແବ جຊతʹ৽نϓϩδΣΫτͰ࠾༻͞ΕΔ΂͖
18. Πϯετʔϧ͢Δ
19. ϗϯτʹ࢖͍෺ʹͳΔͷ͔ ͪΐΖͬͱࢼͯ͠Έ͍ͨΜ͚ͩͲ IUUQDP⒎FFTDSJQUPSH DMJDL <53:
    $0''&&4$3*15>
20. OPEFΛΠϯετʔϧ CSFX
    JOTUBMM
    OPEFKT
    MJOVYͰ͸CVJMEਪ঑ DP⒎FFΛΠϯετʔϧ OQN
    JOTUBMM
    H
    DP⒎FFTDSJQU XIFODF
    DP⒎FFͱ͔ͯ͠ग़͖ͯͨΒ͓L
21. ͲΜͳײ͡Ͱॻ͚Δͷ
22. 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()
23. 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Մೳ
24. 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(); ίϯύΠϧ͢Δͱ͜͏ͳΔ ͭ·Γ ϒϥ΢βηʔϑʹ ॻ͜͏ͱ͢Δͱ͜͏ͳΔ ʂʂ௕͍ʂʂ
25. https://github.com/polarmobile/coffeescript-style-guide conventions for the CoffeeScript Best-practices and coding
26. DP⒎FF  ͷެࣜʹ ղઆՃ͑ͯΈͨ
27. 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 ϩʔΧϧม਺͸ είʔϓઌ಄Ͱએݴ εϖʔεͷࠨଆ͕ؔ਺ εϖʔεͷӈଆ͕Ҿ਺ ͜ΕͰແ໊ؔ਺
28. 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 + "..."; }; σϑΥϧτ஋ͷએݴ ม਺ͷຒΊࠐΈ͕Մೳ
29. Function (Context) Account = (customer, cart) -> @customer = customer @cart = cart $('.shopping_cart').bind 'click', (event) => @customer.purchase @cart ࣍ͷείʔϓ಺Ͱ΋ ಉ͡ίϯςΫετΛ࢖༻͢Δ UIJT͕มΘΒͳ͍ UIBU
    
    UIJTͯ͠ UIBUΛ࢖͏ͷͱಉ͡ॲཧ
30. 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
31. 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 ͓·͚ࢀর
32. 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(); ม਺໊ͷॏෳ ϩʔΧϧม਺Խ͢Δ
33. 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]; ΧϯϚ͍Βͳ͍
34. Objects kids = brother: name: "Max" age: 11 sister: name: "Ida" age: 9 kids = { brother: { name: "Max", age: 11 }, sister: { name: "Ida", age: 9 } }; ΧϯϚ΋\^΋͍Βͳ͍ ΠϯσϯτͰೖΕࢠΛදݱ
35. 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 ޙஔ  ࡾ߲ԋࢉ
36. Conditions (Chain) cholesterol = 127 healthy = 200 > cholesterol > 60 var cholesterol, healthy; cholesterol = 127; healthy = (200 > cholesterol && cholesterol > 60); ͋Γͦ͏Ͱແ͔ͬͨ ൺֱԋࢉࢠͷνΣΠϯ
37. 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จΛ੍ޚՄೳ
38. 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͔ΒฦΓ஋͕΋Β͑Δ
39. 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Ͱ͖Δ ແ໊ؔ਺ͱ࣮ͯ͠ߦ
40. 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
41. 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 = ->ɹΈͨ͘࢖͑Δ
42. Operators (Exists?) if (typeof a != 'undefined' && typeof a.b != 'undefined' && typeof a.b.c !='undefined') { console.log a.b.c } else { console.log 'andefaindo!!!' } ͜Μͳܦݧ͋Γ·ͤΜ͔
43. Operators (Exists?) if a?.b?.c console.log a.b.c else console.log 'andefaindo!!!' ͰଘࡏΛ֬ೝͰ͖·͢
44. Destructuring Assignment a = 1 b = 2 [a, b] = [b, a] [a, b, c] = '0-1-2'.split '-' console.log a, b, c tag = "<impossible>" [open, contents..., close] = tag.split("") options = name: "geta6", age: 24, height: 178 {name, age, height} = options ม਺ͷೖΕସ͑ TQMJUͷฦΓ஋ΛׂΓ౰ͯ PQUJPOT͔Β LFZ໊Λ୳ࡧ class Animal constructor: (@name) -> ͜ͷײ͕֮௫ΊΔͱ!OBNFͰUIJTOBNF
    
    BSH ɹɹɹͷؾ࣋ͪѱ͕ܰ͞ݮ͢Δͱࢥ͍·͢
45. Raw Javascript (eval) hi = `function() { return [document.title, "Hello JavaScript"].join(": "); }` ੜͷKBWBTDSJQU΋࢖͑·͢
46. 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 = """ <strong> cup of coffeescript </strong> """ ͜ͷϥΠϯΛΠϯσϯτج४ʹग़ྗ <strong>\n cup of coffeescript\n</strong> ʹͳΔ ్தվߦ͸҆શʹແࢹ͞ΕΔ
47. Block (Comment) ### SkinnyMochaHalfCaffScript Compiler v1.0 Released under the MIT License ###  ૬౰
48. 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Λ࢖͏
49. BQQMZͱ͔DBMMͱ͔ͳΜͳͷ ͓·͚
50. Tips: Apply/Call "QQMZ
    
    'VODUJPOQSPUPUZQFBQQMZ $BMM
    
    'VODUJPOQSPUPUZQFDBMM 'VODUJPOΛݺͼग़ͨ͢ΊͷϓϩτλΠϓϝιου
51. Tips: Apply/Call B.FUIPEDBMM UIBU
    <BSH
    <
    BSH
    >>  ୈҰҾ਺ʹίϯςΫετɺ
    
    
    
    ͭ·ΓB.FUIPE಺෦ͷUIJTΛࢦఆ͠·͢ ୈೋҾ਺Ҏ߱͸ΧϯϚ۠੾ΓͰ
    
    
    
    B.FUIPEʹऔΒ͍ͤͨҾ਺Λॻ͖·͢ ख࡞ۀͰؔ਺Λݺͼग़͢ʹ͸DBMM͕ศར
52. Tips: Apply/Call B.FUIPEBQQMZ UIBU
    <BSHT>  ୈҰҾ਺ʹίϯςΫετɺ
    
    
    
    ͭ·ΓB.FUIPE಺෦ͷUIJTΛࢦఆ͠·͢ ୈೋҾ਺ʹ͸ϦετͰɺ
    
    
    
    B.FUIPEʹऔΒ͍ͤͨҾ਺Λॻ͖·͢ BSHVNFOUTͷΑ͏ͳϦετͷॲཧʹ͸BQQMZ͕ศར
53. Tips: Apply/Call ୈҰҾ਺ ίϯςΫετ ʹVOEFpOFE΍OVMMΛऔ ΔͱɺάϩʔόϧΦϒδΣΫτͱͯ͠ೝࣝ͞Ε·͢ MPDBMͳΒXJOEPXɺOPEFKTͳΒHMPCBM
54. 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!!' ͜Μͳ෩ʹ࢖͑ΔΑฤ
55. 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 ͭ͡ʹؾ࣋ͪѱ͍ ͜Μͳ͜ͱ΋Ͱ͖ΔΑฤ
56. $P⒎FFͬͯͳΜͰ ม਺Λઌ಄Ͱએݴ͢Δͷʁ ͓·͚
57. Tips: Hoisting var a = 0; (function() { console.log(a); var a = 2; }()); console.log(a); ͜͜ͰԿ͕දࣔ͞ΕΔ͔ ͜͜͸ʮʯ ˞KTͷείʔϓ୯Ґ͸GVODUJPO
58. var a = 0; (function() { console.log(a); var a = 2; }()); console.log(a); Tips: Hoisting
59. Tips: Hoisting ͋ʜ͋Γͷ··ɹࠓɹىͬͨ͜ࣄΛ࿩ͥ͢ʂ ʮείʔϓ಺෦Ͱએݴͨ͠ϩʔΧϧม਺͕શͯ ɹɹɹɹɹείʔϓͷઌ಄Ͱએݴͨ͠ࣄʹͳ͍ͬͯͨʯ ͳʜʜԿΛݴ͍ͬͯΔͷ͔Θ͔ΒͶʔͱࢥ͏͕ɹ ͓Ε΋ԿΛ͞Εͨͷ͔Θ͔Βͳ͔ͬͨʜʜ
60. Tips: Hoisting var a; a = 0; (function() { var a; console.log(a); a = 2; }()); console.log(a); ͜͏ͳΔ ͜Ε͕ϗΠεςΟϯά KTͰ༠ൃ͞ΕΔҋ࢓༷ $P⒎FFͳΒউखʹॲཧͯ͘͠ΕΔ