Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Fast Forward Javascript

2e7087b86608d4497c209eb9ba14d8f5?s=47 Sho Kusano
October 16, 2012

Fast Forward Javascript

立ち止まってる暇なんてない。 CoffeeScript の紹介です。

2e7087b86608d4497c209eb9ba14d8f5?s=128

Sho Kusano

October 16, 2012
Tweet

Transcript

  1. Forward Fast Javascript Sho Kusano / rosylilly

  2. Profile Sho Kusano rosylilly Facebook: sho.kusano Twitter: rosylilly Mail: rosylilly@aduca.org

  3. Profile Works Dwango/Qteras Model (স) 10/28(Fri) Numero Tokyo

  4. ―― Too Many Works ࢓ࣄ͸ࣺͯΔ΄Ͳ͋Δ

  5. Q. Javascript͕؆୯ͩͱࢥ͏ํ ஏ͔͕ͣ͠ΒͣڍखΛ͓ئ͍͠·͢

  6. A. ๻ʹͱͬͯ͸೉͍͠ Ͱ͖ΔݶΓॻ͖ͨ͘ͳ͍

  7. ָ͕ग़དྷΕ͹ͦΕ͕Ұ൪

  8. ָͯ͠ ͓͕ۚ ཉ͍͠

  9. CoffeeScript is a little language that compiles into JavaScript. http://coffeescript.org/

  10. Fast Forward Javascript ߴ଎ʹ લ΁ਐΉͨΊͷ CoffeeScript

  11. Javascript ʹ͸᠘͕ଟ͍ this scope, Prototypical Object, Object forEach

  12. ʰલਐ͢Δ͜ͱʱʹूதग़དྷͳ͍

  13. Let’s try CoffeeScript!

  14. Example Cases

  15. Example Case: This binding var object = { name: 'obj',

    func: function(){ console.log(this.name); } } object.func(); // → obj var f = object.func; f(); // → undefined var other = {name: 'other', func: f}; other.func(); // → other
  16. Example Case: This Binding class Example name: 'obj' func: ()=>

    console.log @name object = new Example object.func() # → obj f = object.func f() # → obj other = { name: 'other' func: f } other.func() # → obj
  17. Example Case: Prototypical Object var Abstruct = function() { this.prop

    = 'property'; } Abstruct.prototype.func = function(){}; var Class = function() { } Class.prototype = {}; for(var method in Abstruct.prototype) { Class.prototype[method] = Abstruct.prototype[method]; }
  18. Example Case: Prototypical Object class Abstruct prop: 'property' func: ()->

    class Class extends Abstruct
  19. Example Case: Object forEach var object = { a: 1,

    b: 2, c: 3 } for(var key in object) { if(object.hasOwnProperty(key)) console.log(object[key]); }
  20. Example Case: Object forEach object = { a: 1 b:

    2, c: 3 } for key, val of object console.log val
  21. Many Features! Destructuring Assignment, Function binding, Embedded JavaScript, Switch/When/Else, Try/Catch/Finally,

    Chained Comparisons, String Interpolation, Block Strings, and Block Comments, Block Regular Expressions, Cake, and Cakefiles, "text/coffeescript" Script Tags
  22. Don’t worry!!

  23. ֮͑Δͷ͕େมͦ͏... Javascript Ͱۤ͠Ή࣌ؒͱ CoffeeScript Λ֮͑Δ࣌ؒ ͲͪΒ͕௕͍͔ ↓

  24. ΋͏Ұݸݴޠ֮͑Δͷ͸ͪΐͬͱ…… ͋͘·Ͱ JS ͷγϯλοΫεγϡΨʔͱ ଊ͑ͯΑ͍ (JSX, HeXe ͳͲͱൺ΂ͯ) ↓

  25. ಋೖ͕େมͦ͏…… Rails3 ͕ WebFront ͳΒࠓ͔Β࢖͑·͢ɻ ͦͷଞɺ Coffee ͔Β JS ʹม׵Ͱ͖Δ͠

    ϒϥ΢β্Ͱ Coffee ಈ͔͢࢓૊Έ΋͋Δ ↓
  26. ϝϯόʔͷઆಘ͕…… ࣗ෼͕ࣾ಺ͰΤϰΝϯδΣϦετʹͳΔνϟϯεʂ ↓

  27. Thank you for listening. rosylilly Fin Fast Forward Javascript