What is CoffeeScript

What is CoffeeScript

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

019c906aa98e907cc7951cab7d4850ea?s=128

geta6

May 05, 2013
Tweet

Transcript

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

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

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

  4. What is CoffeeScript +BWB4DSJQUͷҋΛٵऩ͢Δ ؀ڥʹΑ࣮ͬͯ૷ɾಈ࡞͕ҟͳΔҋϝιου WBSJJJUFNMFOHUI 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. *UTKVTUKBWBTDSJQU $P⒎FFΛ࢖͏ࣄͰҾ͖ى͜͞ΕΔ໰୊͸ຆͲແ͍ ௨ৗͷखॱͰTDSJQUTSD͢Ε͹࢖͑·͢

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

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

  13. ίϯύΠϧͩΔ͘ͳ͍ʁ

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

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

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

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

  18. Πϯετʔϧ͢Δ

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

  20. OPEFΛΠϯετʔϧ CSFXJOTUBMMOPEFKT MJOVYͰ͸CVJMEਪ঑ DP⒎FFΛΠϯετʔϧ OQNJOTUBMMHDP⒎FFTDSJQU XIFODFDP⒎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͕มΘΒͳ͍ UIBUUIJTͯ͠ 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ͰUIJTOBNFBSH ɹɹɹͷؾ࣋ͪѱ͕ܰ͞ݮ͢Δͱࢥ͍·͢
  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ͳΒউखʹॲཧͯ͘͠ΕΔ