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

Fast Forward Javascript

Sho Kusano
October 16, 2012

Fast Forward Javascript

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

Sho Kusano

October 16, 2012
Tweet

More Decks by Sho Kusano

Other Decks in Programming

Transcript

  1. Forward
    Fast
    Javascript
    Sho Kusano / rosylilly

    View Slide

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

    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