JavaScript

2022年度リクルート エンジニアコース新人研修の講義資料です

Transcript

1. JavaScript
   
   
   Bootcamp 2022
   2022, 6 April @ Recruit
   
   
   Kento TSUJI
   
   
   @maxmellon
   

   View Slide

2. ΍Δ͜ͱɺ΍Βͳ͍͜ͱ
   ΍Δ͜ͱ ΍Βͳ͍͜ͱ
   ɾ ϥΠϒϥϦͷ࢖͍ํ
   
   
   ɾ build΍preprocessपΓ
   
   
   ɾ ϨΨγʔͳه๏ͷৄࡉ
   

   (஌͓ͬͯ͘͜ͱ͸ॏཁ)
   ɾ جຊతͳه๏
   
   
   ɾ ΫϥΠΞϯτ࣮૷
   
   
   ɾ View ͱ ϩδοΫͷ
   

   ੾Γ෼͚
   ޙͰݟ͓ͯ͘ͱྑͦ͞͏ͳ΋ͷ
   https://github.com/asciidwango/js-primer js-primer Ͱݕࡧ
   

   View Slide

3. ࠓ೔ͷྲྀΕ
   1. JavaScript ͷجຊ
   
   
   2. ԋश
   

   View Slide

4. ৮ͬͯΈΑ͏
   

   View Slide

5. ͱΓ͋͑ͣಈ͔ͯ͠ΈΔ
   PDF ͰΈ͍ͯΔํ΁ : gifΞχϝͳͷͰදࣔ͞Ε·ͤΜ
   

   View Slide

6. $ node -
   v
   
   v14.16.
   1
   
   $ nod
   e
   
   > // ͜͜ͰJavaScriptΛ࣮ߦ͢Δ͜ͱ͕Ͱ͖·͢
   undefine
   d
   
   > 1 + 1
   ;
   
   2
   
   > var test = "hoge"
   ;
   
   undefine
   d
   
   > tes
   t
   
   'hoge
   '
   
   > function sample()
   {
   
   ... var num = 5
   ;
   
   ... return num
   ;
   
   ...
   }
   
   undefine
   d
   
   > sample(
   )
   
   5
   

   View Slide

7. ϒϥ΢βͰ΋ಈ͔ͯ͠ΈΔ
   

   View Slide

8. Chrome Devtools
   ΞυϨεόʔ͔Β http://example.com ΁ΞΫηε
   ͜Ε
   

   View Slide

9. Node.js ͷ REPLͷΑ͏ʹ ࣮ߦͰ͖Δ
   ϩάग़ྗʹՃ͑ͯ࠷ޙͷࣜͷ݁Ռ͕දࣔ͞ΕΔ
   

   View Slide

10. ௨৴಺༰ΛΈͯΈΔ
    

    View Slide

11. Chrome Devtools
    ͜Ε
    

    View Slide

12. ͕͜͜੺͘ͳ͍ͬͯΔͷΛ֬ೝ͔ͯ͠ΒϦϩʔυ͢Δ
    C
    

    View Slide

13. JavaScript ͷ ϑΝΠϧΛ
    
    
    ࡞ͬͯಈ͔ͯ͠ΈΔ
    

    View Slide

14. Hello World
    PDF ͰΈ͍ͯΔํ΁ : gifΞχϝͳͷͰදࣔ͞Ε·ͤΜ
    

    View Slide

15. $ touch helloworld.j
    s
    
    $ code helloworld.j
    s
    
    $ node helloworld.j
    s
    
    Hello Worl
    d
    
    0
    1
    
    0
    2
    
    console.log('Hello World');
    

    View Slide

16. αʔόʔαΠυͷ JavaScript ͱ
    
    
    ΫϥΠΞϯταΠυͷ JavaScript
    • Ұൠతʹ Node.js Ͱಈ͔͢ JavaScript Λ
    

    αʔόʔαΠυͷ JavaScript
    
    
    • ϒϥ΢βͰಈ͔͢ JavaScript Λ
    

    ΫϥΠΞϯταΠυͷ JavaScript
    

    View Slide

17. JavaScript ͷ Syntax
    

    View Slide

18. Variable declaration
    
    
    ม਺ ɾ એݴ
    

    View Slide

19. Variable declaration
    είʔϓ ࠶୅ೖ Մมෆม
    DPOTU
    MFU
    WBS
    

    View Slide

20. Variable declaration
    είʔϓ ࠶୅ೖ Մมෆม
    DPOTU ϒϩοΫ ෆՄ Մม
    MFU ϒϩοΫ Մೳ Մม
    WBS ؔ਺ Մೳ Մม
    

    View Slide

21. είʔϓ
    let a = 1
    ;
    
    if (a === 1)
    {
    
    let a = 2
    ;
    
    console.log(a); //
    2
    
    }
    
    console.log(a); // 1
    ϒϩοΫ var a = 1
    ;
    
    if (a === 1)
    {
    
    var a = 2;
    
    
    console.log(a); //
    2
    
    }
    
    
    console.log(a); //
    2
    
    ؔ਺
    
    
    (άϩʔόϧ)
    

    View Slide

22. ࠶୅ೖ ͱ ՄมɺෆՄม
    ؔ਺
    
    
    (άϩʔόϧ)
    const ͸ ࠶୅ೖෆՄೳ
    const a =
    1
    
    a = 2 Uncaught SyntaxError: Identifier 'a' has already been declared
    const ࠶୅ೖ͕Ͱ͖ͳ͍͚ͩͰॻ͖׵͑ΕΔ
    const a = [
    ]
    
    a.push(1
    )
    
    console.log(a) // [1
    ]
    
    a.pop(
    )
    
    console.log(a) // []
    

    View Slide

23. ͲΕ͔ͭ͑͹͍͍ͷʁ
    • ࠶୅ೖ͸ϩδοΫΛෳࡶԽͤ͞Δ͜ͱ͕ଟ͍
    

    → جຊతʹ const
    
    
    • Ͳ͏ͯ͠΋࠶୅ೖ͍ͨ͠ͱ͖
    

    → let
    
    
    • var ͸ lint Ͱېࢭ͢Δ͜ͱ΋ଟ͍
    

    View Slide

24. ࣜͱจ
    

    View Slide

25. ࣜͱจ
    • JavaScript ͸ จ (Statement) ͱ ࣜ
    (Expression) ͔Βߏ੒͞Ε͍ͯΔ
    
    
    • ࣜ͸ධՁ͢Δͱ݁Ռͷ஋͕͋Δ
    
    
    • จ͸ॲཧͷ̍εςοϓ
    
    
    • ࣜ͸จʹͳΕΔ
    

    View Slide

26. ࣜ
    • ؆୯ʹݴ͏ͱม਺ʹ୅ೖͰ͖Δ΋ͷ
    
    
    • 13 ΍ ‘foo’ ͱ͍ͬͨϦςϥϧ
    
    
    • bar ͱ͍͏ ม਺
    
    
    • ؔ਺ࣜ (ޙड़)
    ͳͲͳͲ
    

    View Slide

27. ࣜ
    // 1 ͸͔ࣜͩΒ୅ೖͰ͖Δ
    const a = 1
    // JavaScript ͷੈքͰ͸ؔ਺΋ࣜ
    const doSomeThing = function()
    {
    
    console.log('doSomeThing'
    )
    
    }
    
    // ؔ਺͕୅ೖ͞Ε͍ͯΔͷͰݺͼग़͢͜ͱ͕Ͱ͖Δ
    doSomeThing(
    )
    
    

    View Slide

28. จ
    • จ͸ॲཧ͢Δ 1 εςοϓ
    
    
    • จ຤ʹ ; Λ͚ͭΔͱ จͷ۠੾ΓʹͳΔ
    
    
    • ; Λ͚ͭͳͯ͘΋ ASI ͕উखʹ ; Λ͍ΕΔ
    ΦʔτηϛίϩϯΠϯαʔγϣϯ
    ࣜจ
    • ࣜ͸จʹͳΕΔ → จʹͳͬͨࣜΛ ࣜจ
    // ࣜจ
    1 + 1;
    

    View Slide

29. ϒϩοΫจ
    • {, } Λ࢖ͬͯෳ਺ͷจΛؚΉจΛॻ͚Δ
    {
    
    console.log("hoge")
    ;
    
    console.log("poge")
    ;
    
    }
    if (true) {
    
    
    console.log("hoge")
    ;
    
    console.log("poge")
    ;
    
    }
    • ྫ : if จͱϒϩοΫจͷ૊Έ߹Θͤ
    

    View Slide

30. function
    

    View Slide

31. ؔ਺એݴͱؔ਺ࣜ
    function Greeting()
    {
    
    console.log('hello'
    )
    
    }
    • จͱࣜͱ͍͏͜ͱ͕ҧ͏
    
    
    • એݴ͸ר্͖͕͛ى͖Δ
    const Greeting = function()
    {
    
    console.log('hello'
    )
    
    }
    ؔ਺એݴ ؔ਺ࣜ
    

    View Slide

32. ؔ਺ࣜͱΞϩʔϑΝϯΫγϣϯ
    • ୹͔͚͘Δ
    
    
    • ΞϩʔϑΝϯΫγϣϯ͸ this Λଋറ͠ͳ͍
    ؔ਺ࣜͱΞϩʔϑΝϯΫγϣϯͷҧ͍
    ୹͔͚͘ΔͷͰΞϩʔϑΝϯΫγϣϯΛ࢖͏৔໘͸ଟ͍
    const Greeting = function()
    {
    
    console.log('hello'
    )
    
    }
    const Greeting = () =>
    {
    
    console.log(‘hello'
    )
    
    }
    

    View Slide

33. ଋറͱ͸
    UIJT
    XJOEPX
    EPDVNFOU
    JOTUBODF"
    • ϝϞϦ্ͷ object ͱࣝผࢠ Λඥ෇͚Δ͜ͱ
    
    
    • JavaScript ͷΞϩʔؔ਺Ͱͳ͍ؔ਺͸ this ͱ͍͏ࣝผࢠʹ
    

    ର࣮ͯ͠ߦ͢ΔίϯςΩετʹԠͯ͡ඥ෇͚Δ object ͕มΘΔ
    

    View Slide

34. JavaScript ʹ͓͚Δ this
    • Ξϩʔؔ਺Ҏ֎ͷؔ਺
    
    
    • Ϋϥε
    
    
    • ΦϒδΣΫτ
    
    
    • bindؔ਺
    this ͷ ίϯςΩετ ͕มΘΔ৔໘
    ҰൠతͳݴޠͱUIJT͕ҧ͏ͱݴΘΕΔͷ͸
    UIJTͷίϯςΩετ͕มΘͬͯ͠·͏͔Β
    https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/this
    ࠓ͸׬શͳཧղ͡Όͳͯ͘΋ྑ͍
    

    Θ͔Βͳ͘ͳͬͨΒௐ΂Α͏
    

    View Slide

35. ΞϩʔϑΝϯΫγϣϯ
    const foo = (a, b) =>
    {
    
    return a +
    b
    
    }
    ΞϩʔϑΝϯΫγϣϯͰ͸͕ࣜҰͭͷͱ͖ʹݶΓϒϩοΫΛলུ͔͚ͯ͠Δ
    const foo = (a, b) => a +
    b
    
    // ·ͨ͸
    const foo = (a, b) =>
    (
    
    a + b

    )
    ϒϩοΫΛলུͨ͠৔߹ɼͦͷࣜΛ࣮ߦͨ݁͠Ռ͕ return ͞ΕΔ
    

    View Slide

36. Ҿ਺
    function doSomeThing(a, b, c = 0) {

    console.log('a %o', a
    )
    
    console.log('b %o', b
    )
    
    console.log('c %o', c
    )
    
    }
    
    doSomeThing(1, 2
    )
    
    // a
    1
    
    // b
    2
    
    // c
    0
    
    doSomeThing(...[1, 2, 3]
    )
    
    // a
    1
    
    // b
    2
    
    // c
    3
    
    function doSomeThing(...args) {

    console.log('args %o', args
    )
    
    }
    
    doSomeThing(1, 2, 3
    )
    
    // args [1, 2, 3
    ]
    
    doSomeThing([1], 2, 3
    )
    
    // args [[1], 2, 3
    ]
    
    doSomeThing(...[1, 2, 3]
    )
    
    // args [1, 2, 3
    ]
    
    σϑΥϧτҾ਺ Մม௕
    

    View Slide

37. object
    

    View Slide

38. Objectͱ͸
    • σʔλͱػೳͷू߹
    
    
    • ϓϩύςΟͱϝιου͕ઃఆͰ͖Δ
    

    View Slide

39. ྫ
    const person =
    {
    
    name: ['Bob', 'Smith']
    ,
    
    age: 32
    ,
    
    gender: 'male'
    ,
    
    interests: ['music', 'skiing']
    ,
    
    bio()
    {
    
    alert(`${this.name.join(' ')} is ${this.age} years old.`)
    ;
    
    }
    ,
    
    greeting()
    {
    
    alert('Hi! I\'m ' + this.name[0] + '.')
    ;
    
    }
    
    }
    
    

    View Slide

40. objectʹ͓͚Δmethod
    const person =
    {
    
    greeting()
    {
    
    alert('Hi!')
    ;
    
    }
    
    };
    const person =
    {
    
    greeting: function()
    {
    
    alert('Hi!')
    ;
    
    }
    
    };
    • ӈͷํ͕୹͔͚͘Δ
    
    
    • ҙຯ͸શ͘ಉ͡
    

    View Slide

41. const person =
    {
    
    _age: 25
    ,
    
    _name: 'maxmellon'
    ,
    
    get age()
    {
    
    return this._age
    ;
    
    }
    ,
    
    get name()
    {
    
    return this._name
    ;
    
    }
    
    }
    ;
    
    ήολʔ΍ηολʔ͕࢖͑Δ
    

    View Slide

42. Object Λ࡞Δ
    const age = 26
    const name = 'Kento TSUJI'
    const parson =
    {
    
    age: age
    ,
    
    name: name
    ,
    
    }
    ͜Ε͸
    ͜͏͔͚Δ
    const age = 26
    const name = 'Kento TSUJI'
    const parson =
    {
    
    age
    ,
    
    name
    ,
    
    }
    

    View Slide

43. Object ͔Β஋ΛऔΓग़͢
    const age = parson.ag
    e
    
    const name = parson.name
    ͜Ε͸
    ͜͏͔͚Δ
    const { age, name } = parson
    

    View Slide

44. Tips: Object Λίϐʔ͢Δ
    const copied = { ...parson }
    const copied = Object.assign({}, parson)
    Object.assign ʹΑΔ Shallow Copy
    εϓϨου ʹΑΔ Shallow Copy
    Object ͕ωετͨ͠ͱ͖ɼ
    
    
    ࢠͷObjectͷࢀর͸มԽ͠ͳ͍͜ͱʹ஫ҙ
    ԋࢉࢠ͡Όͳ͍͚ͲԿނ͔
    

    εϓϨουԋࢉࢠͱΑ͘ݴΘΕ͕ͪ
    

    (MDN্΋Ұ࣌ظ͸ԋࢉࢠදهͩͬͨ)
    Object.assign ͱ εϓϨουߏจ ͸Ұݟྨࣅ͍ͯ͠Δ͕ҧ͍͕͋ΔͷͰ஫ҙ
    

    ಛʹ Object.prototype ͕ॻ͖׵͑ΒΕ͍ͯΔ৔߹ ಘΒΕΔ΋ͷ͕มΘ͖ͬͯ·͢
    
    
    JavaScript ͷ࢓༷ ϨϕϧͰ શ͘ผͷૢ࡞Λߦ͍ͬͯ·͢ (assign ͸ Set, spread ͸ CreateDataPropertyOrThrow
    

    View Slide

45. Tips: Object ΛϚʔδ͢Δ
    const a =
    {
    
    foo: 1
    ,
    
    hoge: 'a'
    ,
    
    }
    
    const b =
    {
    
    hoge: 'b'
    ,
    
    poge: 2
    ,
    
    }
    
    const merged = { ...a, ...b }
    {
    
    foo: 1
    ,
    
    hoge: 'b'
    ,
    
    poge: 2
    ,
    
    }
    ϚʔδͰ΋ `spread` ͕࢖͑Δ
    

    View Slide

46. class
    

    View Slide

47. ΫϥεએݴͱΫϥεࣜ
    class Hoge
    {
    
    method()
    {
    
    

    }
    
    }
    const Hoge = class
    {
    
    method()
    {
    
    }
    
    }
    • Ϋϥεએݴ͸ ר্͖͕͛ى͖ͳ͍
    const Hoge = class Hoge
    {
    
    method()
    {
    
    }
    
    }
    Ϋϥεએݴ Ϋϥεࣜ
    ໊લ෇͖Ϋϥεࣜ
    

    View Slide

48. class Rectangle
    {
    
    constructor(height, width)
    {
    
    this.height = height
    ;
    
    this.width = width
    ;
    
    }
    
    // ήολʔ
    get area()
    {
    
    return this.calcArea()
    ;
    
    }
    
    // ϝιου
    calcArea()
    {
    
    return this.height * this.width
    ;
    
    }
    
    }
    
    const square = new Rectangle(10, 10)
    ;
    
    console.log(square.area); // 10
    0
    
    square.height = 20; // 'aaaa'
    https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes
    ϝιουఆٛ
    

    View Slide

49. Tips
    • JavaScript͸prototypeϕʔεͷݴޠ
    
    
    • class ͸ prorotypeͱObjectΛ࢖ͬͨ
    

    දݱΛ؆ܿʹΘ͔Γ΍͘͢ॻͨ͘Ίͷ΋ͷ
    
    
    • ͳͷͰ͍ΘΏΔΠϯελϯεϝιου͸
    

    AnyClass.prototype.method ͷΑ͏ʹදݱ͢Δ
    

    ↑ ͜Ε͸ new AnyClass().method()
    
    
    • ελςΟοΫؔ਺͸AnyClass.staticMethod
    ࣮࣭తʹ͸౶ҥߏจ͚ͩͲɼclassߏจͰॻ͔Εͨ΋ͷΛ prototype Ͱਖ਼֬ʹ࠶ݱ͢Δͷ͸ͪΐͬͱେม
    

    View Slide

50. ༨ஊ
    
    
    private class
    fi
    eld
    

    View Slide

51. Ϟμϯͳϒϥ΢βͰ͸private
    fi
    eld ͕࢖͑Δ
    • ϨΨγʔϒϥ΢βͰ࢖͏ʹ͸ transpile ͳͲͷϓϦϓϩηε͕ඞཁ
    https://github.com/tc39/proposal-private-
    fi
    elds/blob/master/OLD_README.md
    class Point
    {
    
    #x = 0
    ;
    
    #y = 0
    ;
    
    constructor(x = 0, y = 0)
    {
    
    this.#x = +x
    ;
    
    this.#y = +y
    ;
    
    }
    
    get x() { return this.#x
    }
    
    set x(value) { this.#x = +value
    }
    
    get y() { return this.#y
    }
    
    set y(value) { this.#y = +value
    }
    
    }
    

    View Slide

52. Ϟμϯͳϒϥ΢βͰ͸private
    fi
    eld ͕࢖͑Δ
    • ϨΨγʔϒϥ΢βͰ࢖͏ʹ͸ transpile ͳͲͷϓϦϓϩηε͕ඞཁ
    https://github.com/tc39/proposal-private-
    fi
    elds/blob/master/OLD_README.md
    class Point
    {
    
    #x = 0
    ;
    
    #y = 0
    ;
    
    constructor(x = 0, y = 0)
    {
    
    this.#x = +x
    ;
    
    this.#y = +y
    ;
    
    }
    
    get x() { return this.#x
    }
    
    set x(value) { this.#x = +value
    }
    
    get y() { return this.#y
    }
    
    set y(value) { this.#y = +value
    }
    
    }
    

    View Slide

53. ಉظ / ඇಉظ
    

    View Slide

54. ΋͠ඇಉظ͕ͳ͔ͬͨΒͲ͏ͳΔ͔
    • αʔόʔ͔ΒσʔλΛड͚औΔ·Ͱ
    

    ଞͷૢ࡞͕Ͱ͖ͳ͍
    
    
    • ΫϦοΫ͢Δͱϒϥ΢β͕ݻ·Δ
    
    
    • ॲཧ͕Ұ͔ͭͣͭ͠Ͱ͖ͳ͍
    
    
    • ϒϥ΢βͷ JavaScript ͸ ݪଇγϯάϧεϨου
    (main thread) Ͱ࣮ߦ͞ΕΔ (worker ΋͋Δׂ͕Ѫ)
    Α͋͘Δצҧ͍ : γϯάϧεϨου === ಉظॲཧ͔͠ͳ͍
    
    
    ࣮ࡍʹ͸Πϕϯτϧʔϓͱ͍͏΋ͷͰλεΫΛΩϡʔͰ؅ཧͯ͠
    

    ͦͷ࣌఺࣌఺Ͱಈ͔͢΂͖ॲཧΛΩϡʔ͔ΒऔΓग़ͯ͠ॲཧ͍ͯ͠Δ
    

    View Slide

55. Πϕϯτϧʔϓ ֓ཁ
    4DSJQU
    5JNFS
    &WFOU DMJDL NPVTFNPWF
    
    .JDSPUBTL
    3FOEFS
    .JDSPUBTL
    3FOEFS
    <br/>ϒϥ΢βͷ rendering<br/><br/><br/>ͳʹ͔͠ΖͷλεΫ࣮ߦத͸ rendering ͞Εͳ͍<br/>.addEventListener(…) ͷ callback<br/>setTimeout(() => {}) ͷ callback<br/>Promise<br/>ɾɾɾ<br/>

    View Slide

56. callback ʹΑΔඇಉظ
    taskA(() =>
    {
    
    taskB(() =>
    {
    
    taskC(() =>
    {
    
    }
    )
    
    }
    )
    
    })
    • ͍ͭऴΘΔ͔Θ͔Βͳ͍ taskA ʹ callback ؔ਺Λ
    

    ౉ͯ͠ऴΘ͔ͬͯΒ࣮ߦ͢ΔॲཧΛҠৡ͢Δ
    ωετ͕ͲΜͲΜਂ͘ͳͬͯ͠·͏
    

    View Slide

57. promise
    

    View Slide

58. promise
    new Promise((resolve, reject) =>
    {
    
    asynchronizedTask((err, result) =>
    {
    
    if (err) reject(err
    )
    
    resolve(result
    )
    
    }
    )
    
    }
    )
    
    .then(res => console.log(res)
    )
    
    .catch(err => console.error(err))
    • ඇಉظॲཧͷந৅Խ
    
    
    • then Ͱ ੒ޭͨ͠ͱ͖ͷϋϯυϥΛ ෇༩͢Δ ৽͍͠PromiseΛฦ͢
    

    (ݫີʹ͸ࣦഊϋϯυϥ΋௥ՃͰ͖Δʣ
    
    
    • catch Ͱ ࣦഊϋϯυϥͷίʔϧόοΫΛ෇༩͢Δ
    

    View Slide

59. promise
    QSPNJTF
    UIFO IBOEMFS
    
    UIFO IBOEMFS
    
    DBUDI PO3FKFDUJPO
    
    FSSPSIBOEMJOH
    QSPNJTF
    UIFO IBOE
    UIFO IBOE
    DBUDI PO3FKF
    ଴ػঢ়ଶ
    ੒ޭ
    ࣦഊ
    promise͕ࣦഊͨ͠ͱ͖
    

    thenͷୈೋҾ਺ͷhandlerͰྫ֎͕ग़ͨͱ͖
    return
    return ੒ޭ
    ࣦഊ
    thenͷϋϯυϥ͸ඞͣPromiseΛฦ͢ͷͰ chainͰ͖Δ
    chainͰ͖Δ
    

    View Slide

60. example
    new Promise(resolve =>
    {
    
    // 1ඵޙʹ ୈ1Ҿ਺ͷؔ਺Λ࣮ߦ͢Δ
    setTimeout(() => resolve(1), 1000
    )
    
    }
    )
    
    .then(res =>
    {
    
    console.log(res
    )
    
    return res + 1
    }
    )
    
    .then(res =>
    {
    
    console.log(res
    )
    
    return res + 1
    }
    )
    
    .then(res =>
    {
    
    console.log(res
    )
    
    })
    ࣮ߦ͢ΔͱͲΜͳϩάग़ྗ͞ΕΔʁ
    

    View Slide

61. fetch API
    const url = 'https://hacker-news.firebaseio.com/v0/item/
    2921983.json?print=pretty'
    fetch(url
    )
    
    .then(resp => resp.json()
    )
    
    .then(resp => console.log(resp)
    )
    
    • ྫ͑͹ɼhacker news ͷ API Λୟ͘ͱ͢Δ
    {
    
    "by" : "norvig"
    ,
    
    "id" : 2921983
    ,
    
    "kids" : [ 2922097, 2922429, 2924562, 2922709, 2922573, 2922140, 2922141 ]
    ,
    
    "parent" : 2921506
    ,
    
    "text" : "Aw shucks, guys ... you make me blush with your compliments.Tell you what, Ill
    make a deal: I'll keep writing if you keep reading. K?"
    ,
    
    "time" : 1314211127
    ,
    
    "type" : "comment
    "
    
    }
    

    View Slide

62. async / await
    

    View Slide

63. Example
    // promise ʹରͯ͠ await ͢Δ͜ͱ͕Ͱ͖Δ
    let value = await promise;
    • await ͸ promise ͕֬ఆͨ͠ͱ͖ʹͦͷ݁ՌΛฦ͢·Ͱ଴ػ͢Δ
    // ଞͷखଓ͖ͱಉ༷ʹ try-catch ͕͔͚Δ
    try {
    let value = await promise
    ;
    
    } catch (err)
    {
    
    console.error(err)

    }
    • reject ͞Εͨ promise ͸ try-catch ߏจͷ catch Ͱ௫Ή͜ͱ͕Ͱ͖Δ
    

    View Slide

64. async function
    const url = 'https://hacker-news.firebaseio.com/v0/item/
    2921983.json?print=pretty'
    const fetchAsync = async () =>
    {
    
    try
    {
    
    const resp = await fetch(url
    )
    
    return resp.json(
    )
    
    } catch (err)
    {
    
    console.error(err
    )
    
    }
    
    }
    
    await fetchAsync()
    ಉظؔ਺ͷΑ͏ʹPromiseΛѻ͏
    
    
    Promise Λ async / await Ͱॻ͚Δ
    

    View Slide

65. Module
    

    View Slide

66. Ϟδϡʔϧͷྺ࢙
    • λά ΍ prototype.js ͳͲ….<br/><br/><br/>• AMD (RequireJS)<br/><br/><br/>• Browserify<br/><br/><br/>• UMD<br/><br/><br/>• ESModules<br/>ࠓ͸׬શͳཧղ͡Όͳͯ͘΋ྑ͍<br/>
<br/>࿩͢ͱΩϦ͕ແ͘ͳΔ<br/><br/><br/>͍Ζ͍Ζ ͋ͬͨ<br/>

    View Slide

67. ࠓ೔ͷԋशͰ࢖͏΋ͷ
    Webଆ : ESModules
    APIଆ : CommonJS
    import doSomeThing from './doSomeThing.js'
    const a = 1
    export default a
    const doSomeThing = require('./doSomeThing'
    )
    
    const a = 1
    module.exports = a
    Import / export ͸ಛʹෳࡶɼ໊લ෇͖ ΍ default, as ͳͲ৭ʑͰ͖Δ෼ෳࡶ
    

    View Slide

68. DOM
    

    View Slide

69. DOM ͷऔಘ
    // id ʹΑΔཁૉͷऔಘ
    const element = document.getElementbyId("id")
    ;
    
    // ηϨΫλʹΑΔཁૉͷऔಘ ʢઌ಄1݅ʣ
    const element = document.querySelector("div > .class");
    ୯Ұ
    ෳ਺
    // id ʹΑΔཁૉͷऔಘ
    const element = document.getElementbyClassName("class")
    ;
    
    // ηϨΫλʹΑΔཁૉͷऔಘ ʢϚον͢Δ΋ͷ͢΂ͯʣ
    const element = document.querySelectorAll("div.class");
    CSSηϨΫλ : https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Selectors
    

    View Slide

70. DOM ͷૠೖ
    const parent = document.createElement("div")
    ;
    
    const child = document.createElement("span")
    ;
    
    parent.appendChild(child)
    ;
    
    console.log(parent)
    ;
    
    // >
    
    ଞʹ΋ insertBefore, replaceChild ౳͕͋Δ
    

    View Slide

71. DOM ͷ࡟আ
    const node = document.getElementById("node")
    ;
    
    node.removeChild(node);
    DOM ʹؔ͢Δ API ͸
    

    https://qiita.com/uhyo/items/1c565b61d934cbb88c2e
    
    
    ͳͲ͕Θ͔Γ΍͍͢
    // ਌ཁૉ͕ෆ໌ɺෆఆͷ৔߹ͷํ๏
    const node = document.getElementById("nested")
    ;
    
    if (node.parentNode)
    {
    
    node.removeChild(node)
    ;
    
    }
    Tips: ࣗ෼ࣗ਎ͷཁૉΛऔΓআ͖͍ͨͱ͖
    

    View Slide

72. Πϕϯτ
    

    View Slide

73. ΠϕϯτͷϋϯυϦϯά
    const node = document.getElementById("nested")
    ;
    
    const handler = () =>
    {
    
    console.log("clicked !!")

    }
    
    // Ϧεφͷొ࿥
    node.addEventListener("click", handler
    )
    
    // ΠϕϯτͷൃՐ
    node.dispatchEvent(new CustomEvent("custom-event")
    )
    
    // Ϧεφͷ࡟আ
    node.removeEventlistener("click", handler)
    • Πϕϯτ͸ EventTarget ͱ͍͏ΠϯλʔϑΣΠεʹجͮ͘
    
    
    • DOM ͸ EventTarget Λ࣮૷͍ͯ͠ΔͷͰΠϕϯτΛѻ͑Δ
    

    View Slide

74. ϑϩϯτΤϯυΛ
    
    
    ։ൃ͢Δ্Ͱ
    
    
    େ੾ͳ͜ͱ
    

    View Slide

75. ϑϩϯτΤϯυ։ൃͰॏཁͳ͜ͱ
    • View ͱ ϩδοΫΛ੾Γ཭͢
    

    7JFX ϩδοΫ
    มߋස౓ : ߴ มߋස౓ : ௿
    ςετ೉౓ : ߴ ςετ೉౓ : ௿
    ViewͱϩδοΫ͕ີ݁߹ʹͳΔͱ
    

    ςετ͕ॻ͖ʹ͔ͬͨ͘Γ
    

    มߋʹऑ͘ͳͬͨΓ͢Δ
    

    View Slide

76. View ͱ ϩδοΫΛ੾Γ཭͢
    • MVC (Model-View-Controller)
    
    
    • MVVM (Model-View-ViewModel)
    
    
    • Flux
    
    
    • ͳͲͳͲ…
    ViewͱϩδοΫΛ੾Γ཭ͨ͢Ίʹ༷ʑͳΞʔΩςΫνϟύλʔϯ͕༗Δ
    

    

    View Slide

77. ࠔͬͨͱ͖Ͳ͏͢Δ͔
    

    View Slide

78. ࠔͬͨͱ͖
    • ׂ͍͔ͭ͘Ѫͨ͠΋ͷ͕͋Γ·͢
    

    ԋࢉࢠ : https://jsprimer.net/basic/operator/
    

    σʔλܕ : https://jsprimer.net/basic/data-type/
    

    ৚݅෼ذ : https://jsprimer.net/basic/condition/
    

    ϧʔϓ : https://jsprimer.net/basic/loop/
    

    try-catch ߏจ : https://jsprimer.net/basic/error-try-catch/
    ޙͰݟ͓ͯ͘ͱྑͦ͞͏ͳ΋ͷ
    https://github.com/asciidwango/js-primer js-primer Ͱݕࡧ
    

    View Slide

79. ԋश
    1. JavaScript ͷجຊ
    
    
    2. ԋश
    

    View Slide

80. ԋशͷ৺ߏ͑
    • ՝୊ΛऴΘΒͤΔ͜ͱΛ໨తͱ͠ͳ͍Ͱ͍ͩ͘͞
    
    
    • पΓͷਓͷਐḿΛؾʹ͢Δඞཁ͸͋Γ·ͤΜ
    
    
    • ࣭໰͢Δલʹࣗ෼ͳΓʹෆ໌఺Λਪଌͯ͠ΈΑ͏
    
    
    • JavaScript ݚमલΑΓগ͠Ͱ΋ JavaScript Λ
    

    ॻ͚ΔΑ͏ʹͳ͍ͬͯͩ͘͞
    

    View Slide

81. ίʔεબ୒
    ϏΪφʔίʔε
    Ξυόϯευίʔε
    JavaScript ॻ͍ͨ͜ͱແ͍ਓ޲͖
    
    
    `javascripting` ͱ͍͏υϦϧ ΛਐΊΔɺ͕࣌ؒ༨Ε͹ TODO ؅ཧΞϓϦ։ൃ
    React.js / Vue.js ౳ Λ׆༻ͯ͠ΞϓϦέʔγϣϯΛ։ൃͨ͜͠ͱ͋Δਓ޲͖
    ༩͑ΒΕͨ HTML, CSS, API αʔό ͔Β ϑϧεΫϥονͰ TODO ؅ཧΞϓϦΛ׬੒ͤ͞Δ
    ϕʔγοΫίʔε
    JavaScript Λ গ͠ॻ͍ͨ͜ͱ͋Δਓ޲͖
    
    
    લ೚ऀͷυΩϡϝϯτΛ ݩʹ ్த·Ͱ։ൃ͞Εͨ TODO ؅ཧΞϓϦΛ׬੒ͤ͞Δ
    

    View Slide

82. ͦΕͧΕͷ໨ඪઃఆ
    ϏΪφʔίʔε
    Ξυόϯευίʔε
    ϕʔγοΫίʔε
    JavaScript Λ ಡΈ / ॻ͖
    
    
    Ͱ͖ΔΑ͏ʹͳΔ
    ਓͷॻ͍ͨ JavaScript ΛಡΊΔΑ͏ʹͳΓ
    
    
    JavaScript ͔Β DOMΛ׆༻Ͱ͖ΔΑ͏ʹͳΔ
    ػೳΛ࣮૷͢ΔͷʹՃ͑ͯ
    
    
    ந৅Խ΍ΞʔΩςΫνϟύλʔϯΛ
    
    
    ࣗ෼Ͱ࣮૷͢Δͷʹ௅ઓ
    

    View Slide

83. ϏΪφʔίʔε
    

    View Slide

84. ४උ
    $ npm install @recruit-tech/javascripting -
    g
    
    $ javascriptin
    g
    
    ↑ ͜ΕΛ࣮ߦ
    ↓ Έ͍ͨͳը໘͕ͰΕ͹ OK
    

    View Slide

85. ೔ຊޠ΁ͷม͑ํ
    

    View Slide

86. ϕʔγοΫίʔε
    ϕʔγοΫίʔε
    Ξυόϯευίʔε
    

    View Slide

87. ४උ
    • https://github.com/recruit-tech/bootcamp-js
    Λfork
    
    
    • README ʹैͬͯ ணख
    

    View Slide

88. ͦΕͰ͸ԋशʹ
    
    
    औΓ૊Έ·͠ΐ͏ʂ
    

    View Slide