Fast Forward Javascript

Transcript

1. Forward Fast Javascript Sho Kusano / rosylilly

2. Profile Sho Kusano rosylilly Facebook: sho.kusano Twitter: rosylilly Mail: [email protected]

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