Fast Forward Javascript

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

Transcript

1. Forward
   Fast
   Javascript
   Sho Kusano / rosylilly
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. ָͯ͠
   ͓͕ۚ
   ཉ͍͠
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. Let’s try CoffeeScript!
    

    View Slide

14. Example Cases
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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];
    }
    

    View Slide

18. Example Case: Prototypical Object
    class Abstruct
    prop: 'property'
    func: ()->
    class Class extends Abstruct
    

    View Slide

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]);
    }
    

    View Slide

20. Example Case: Object forEach
    object = {
    a: 1
    b: 2,
    c: 3
    }
    for key, val of object
    console.log val
    

    View Slide

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
    

    View Slide

22. Don’t worry!!
    

    View Slide

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

    View Slide

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

    View Slide

25. ಋೖ͕େมͦ͏……
    Rails3 ͕ WebFront ͳΒࠓ͔Β࢖͑·͢ɻ
    ͦͷଞɺ Coffee ͔Β JS ʹม׵Ͱ͖Δ͠
    ϒϥ΢β্Ͱ Coffee ಈ͔͢࢓૊Έ΋͋Δ
    ↓
    

    View Slide

26. ϝϯόʔͷઆಘ͕……
    ࣗ෼͕ࣾ಺ͰΤϰΝϯδΣϦετʹͳΔνϟϯεʂ
    ↓
    

    View Slide

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

    View Slide