JavaScript Bootcamp 2020

2020年度リクルート新人ブートキャンプ エンジニアコースの講義資料です

Transcript

1. JavaScript
   Bootcamp 2020
   2020, 7th April @ Recruit Technologies
   Kento TSUJI
   @maxmellon
   

   View Slide

2. ΍Δ͜ͱɺ΍Βͳ͍͜ͱ
   ΍Δ͜ͱ ΍Βͳ͍͜ͱ
   ɾ ϥΠϒϥϦͷ࢖͍ํ
   ɾ build΍preprocessपΓ
   ɾ ϨΨγʔͳه๏ͷৄࡉ
   (஌͓ͬͯ͘͜ͱ͸ॏཁ)
   ɾ جຊతͳه๏
   ɾ ΫϥΠΞϯτ࣮૷
   ɾ View ͱ ϩδοΫͷ
   ੾Γ෼͚
   ޙͰݟ͓ͯ͘ͱྑͦ͞͏ͳ΋ͷ
   https://github.com/asciidwango/js-primer js-primer Ͱݕࡧ
   

   View Slide

3. ϑϩϯτΤϯυΤϯδχΞͱ
   JavaScript
   • ϦΫϧʔτςΫϊϩδʔζͷ “ϑϩϯτΤϯυΤ
   ϯδχΞ” ͷఆٛ͸޿ͯ͘ਂ͍
   • HTML/CSS/JSΛ۶ࢦͯ͠ΫϥΠΞϯτΛ࡞Δ͚ͩ
   Ͱ͸ͳ͍
   • ϑϩϯτΤϯυͷͨΊͷαʔόʔ΍ύϑΥʔϚϯ
   ενϡʔχϯάɺϢʔβϏϦςΟ޲্ͳͲ༷ʑ
   

   View Slide

4. ࠓ೔ͷྲྀΕ
   1. JavaScript ͷجຊ
   2. JavaScript ΛͱΓ͋͑ͣ৮ͬͯΈΔ
   3. JavaScript Ͱ؆୯ͳΞϓϦέʔγϣϯΛ
   ࡞ͬͯΈΔ
   

   View Slide

5. ৮ͬͯΈΑ͏
   

   View Slide

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

   View Slide

7. $ node -v
   v11.10.1
   $ node
   > // ͜͜ͰJavaScriptΛ࣮ߦ͢Δ͜ͱ͕Ͱ͖·͢
   undefined
   > 1 + 1;
   2
   > var test = "hoge";
   undefined
   > test
   'hoge'
   > function sample() {
   ... var num = 5;
   ... return num;
   ... }
   undefined
   > sample()
   5
   

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

11. ௨৴಺༰ΛΈͯΈΔ
    

    View Slide

12. Chrome Devtools
    ͜Ε
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

16. $ touch helloworld.js
    $ code helloworld.js
    $ node helloworld.js
    Hello World
    01
    02
    console.log('Hello World');
    

    View Slide

17. αʔόʔαΠυͷ JavaScript ͱ
    ΫϥΠΞϯταΠυͷ JavaScript
    • Ұൠతʹ Node.js Ͱಈ͔͢ JavaScript Λ
    αʔόʔαΠυͷ JavaScript
    • ϒϥ΢βͰಈ͔͢ JavaScript Λ
    ΫϥΠΞϯταΠυͷ JavaScript
    ࡢ೔ͷલ൒ͷߨٛͰ΋঺հ͞Ε·ͨ͠Ͷ
    

    View Slide

18. JavaScript ͷ Syntax
    

    View Slide

19. Variable declaration
    ม਺ ɾ એݴ
    

    View Slide

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

    View Slide

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

    View Slide

22. είʔϓ
    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

23. ࠶୅ೖ ͱ ՄมɺෆՄม
    ؔ਺
    (άϩʔόϧ)
    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

24. ͲΕ͔ͭ͑͹͍͍ͷʁ
    • ࠶୅ೖ͸ϩδοΫΛෳࡶԽͤ͞Δ͜ͱ͕ଟ͍
    → جຊతʹ const
    • Ͳ͏ͯ͠΋࠶୅ೖ͍ͨ͠ͱ͖
    → let
    • var ͸ lint Ͱېࢭ͢Δ͜ͱ΋ଟ͍
    

    View Slide

25. ࣜͱจ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

29. จ
    • จ͸ॲཧ͢Δ 1 εςοϓ
    • จ຤ʹ ; Λ͚ͭΔͱ จͷ۠੾ΓʹͳΔ
    • ; Λ͚ͭͳͯ͘΋ ASI ͕উखʹ ; Λ͍ΕΔ
    • if จ ΍ for จ ΋จ͔ͩΒ୅ೖͰ͖ͳ͍
    ΦʔτηϛίϩϯΠϯαʔγϣϯ
    

    View Slide

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

    View Slide

31. function
    

    View Slide

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

    View Slide

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

    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.age
    const name = parson.name
    ͜Ε͸
    ͜͏͔͚Δ
    const { age, name } = parson
    

    View Slide

44. 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. 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); // 100
    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 field
    

    View Slide

51. Ϟμϯͳϒϥ΢βͰ͸private field ͕࢖͑Δ
    • ϨΨγʔϒϥ΢βͰ࢖͏ʹ͸ transpile ͳͲͷϓϦϓϩηε͕ඞཁ
    https://github.com/tc39/proposal-private-fields/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 field ͕࢖͑Δ
    • ϨΨγʔϒϥ΢βͰ࢖͏ʹ͸ transpile ͳͲͷϓϦϓϩηε͕ඞཁ
    https://github.com/tc39/proposal-private-fields/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. ΋͠ඇಉظ͕ͳ͔ͬͨΒͲ͏ͳΔ͔
    • αʔόʔ͔ΒσʔλΛड͚औΔ·Ͱ
    ଞͷૢ࡞͕Ͱ͖ͳ͍
    • ΫϦοΫ͢Δͱϒϥ΢β͕ݻ·Δ
    • ॲཧ͕Ұ͔ͭͣͭ͠Ͱ͖ͳ͍
    Α͋͘Δצҧ͍ : γϯάϧεϨου === ಉظॲཧ͔͠ͳ͍
    ࣮ࡍʹ͸Πϕϯτϧʔϓͱ͍͏΋ͷͰλεΫΛΩϡʔͰ؅ཧͯ͠
    ͦͷ࣌఺࣌఺Ͱಈ͔͢΂͖ॲཧΛΩϡʔ͔ΒऔΓग़ͯ͠ॲཧ͍ͯ͠Δ
    

    View Slide

55. callback ʹΑΔඇಉظ
    taskA(() => {
    taskB(() => {
    taskC(() => {
    })
    })
    })
    • ͍ͭऴΘΔ͔Θ͔Βͳ͍ taskA ʹ callback ؔ਺Λ
    ౉ͯ͠ऴΘ͔ͬͯΒ࣮ߦ͢ΔॲཧΛҠৡ͢Δ
    ωετ͕ͲΜͲΜਂ͘ͳͬͯ͠·͏
    

    View Slide

56. promise
    

    View Slide

57. 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

58. 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

59. 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

60. 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

61. async / await
    

    View Slide

62. 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

63. Module
    

    View Slide

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

    View Slide

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

    View Slide

66. DOM
    

    View Slide

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

    View Slide

68. DOM ͷ࡟আ
    // ਌ཁૉ͕ෆ໌ɺෆఆͷ৔߹ͷํ๏
    Const node = document.getElementById("nested");
    if (node.parentNode) {
    node.parentNode.removeChild(node);
    }
    DOM ʹؔ͢Δ API ͸
    https://qiita.com/uhyo/items/1c565b61d934cbb88c2e
    ͳͲ͕Θ͔Γ΍͍͢
    

    View Slide

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

    View Slide

70. ࠔͬͨͱ͖
    • ׂ͍͔ͭ͘Ѫͨ͠΋ͷ͕͋Γ·͢
    ԋࢉࢠ : https://jsprimer.net/basic/operator/
    σʔλܕ : https://jsprimer.net/basic/data-type/
    ৚݅෼ذ : https://jsprimer.net/basic/condition/
    ϧʔϓ : https://jsprimer.net/basic/loop/
    ޙͰݟ͓ͯ͘ͱྑͦ͞͏ͳ΋ͷ
    https://github.com/asciidwango/js-primer js-primer Ͱݕࡧ
    

    View Slide

71. ex. JavaScript ͔Β DOMΛ࡞Γ͍ͨ
    • ҰൠͷهࣄΑΓ΋
    ͳΔ΂͘ MDN ΛಡΉบΛ
    ʢݚमͱ͍͏ҙຯ΋ࠐΊͯʣ
    • ௐ΂ͯΘ͔Βͳ͔ͬͨͱ͖͸
    ԿΛͨͯ͘͠ɼͲ͏ௐ΂͔ͨ
    ڞ༗ͯ͘͠ΕΔͱخ͍͔͠΋
    

    View Slide

72. ԋश
    1. JavaScript ͷجຊ
    2. JavaScript ΛͱΓ͋͑ͣ৮ͬͯΈΔ
    3. JavaScript Ͱ؆୯ͳΞϓϦέʔγϣϯΛ
    ࡞ͬͯΈΔ
    

    View Slide

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

    View Slide

74. ೔ຊޠ΁ͷม͑ํ
    

    View Slide

75. ΨϯΨϯ
    ਐΊͪΌ͍ͬͯͩ͘͞
    

    View Slide

76. ޙ൒
    

    View Slide

77. ԋश
    1. JavaScript ͷجຊ
    2. JavaScript ΛͱΓ͋͑ͣ৮ͬͯΈΔ
    3. JavaScript Ͱ؆୯ͳΞϓϦέʔγϣϯΛ
    ࡞ͬͯΈΔ
    

    View Slide

78. TODO ؅ཧ ͷ
    SPA Λ࡞੒͢Δ
    

    View Slide

79. SPAΛ࡞Δ্Ͱॏཁͳ͜ͱ
    • View ͱ ϩδοΫΛ੾Γ཭͢
    7JFX ϩδοΫ
    มߋස౓ : ߴ มߋස౓ : ௿
    ςετ೉౓ : ߴ ςετ೉౓ : ௿
    ViewͱϩδοΫ͕ີ݁߹ʹͳΔͱ
    ςετ͕ॻ͖ʹ͔ͬͨ͘Γ
    มߋʹऑ͘ͳͬͨΓ͢Δ
    

    View Slide

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

    View Slide

81. ࠓճ͸ flux Ͱ࡞ͬͯΈΔ
    ͳͥ flux ͔ ͸͜ͷεϥΠυ͕Θ͔Γ΍͍͢
    https://speakerdeck.com/geta6/reacttofluxfalsekoto?slide=39
    7JFX %JTQBUDIFS
    4UPSF
    "DUJPO
    

    View Slide

82. ίʔεબ୒
    ϕʔγοΫίʔε
    νϟϨϯδίʔε
    TODOҰཡͱTODO࡞੒ ػೳ͕͢Ͱʹ࣮૷ࡁΈ
    طଘͷ࣮૷Λݟͳ͕Β TODO ͷ࡟আ ΍ TODO ͷߋ৽Λ࣮૷͍ͯ͘͠
    HTML + CSS + API αʔόʔ͚ͩͷঢ়ଶ͔ΒϑϧεΫϥονͰ TODO ΞϓϦΛ࡞੒͢Δ
    ΞʔΩςΫνϟϨϕϧͷઃܭ͔Βࣗ෼Ͱ΍ͬͯΑ͍ (Flux ͡Όͳͯ͘΋͍͍)
    https://github.com/recruit-tech/bootcamp-2020-js
    

    View Slide

83. ϕʔγοΫίʔεͷ
    ݱঢ়ͷ࣮૷ΛಡΜͰݟΔ
    

    View Slide

84. ͢Ͱʹ࣮૷͞Ε͍ͯΔػೳ(basic)
    ϕʔγοΫίʔε
    νϟϨϯδίʔε
    TODOҰཡͱTODO࡞੒ ػೳ͕͢Ͱʹ࣮૷ࡁΈ
    طଘͷ࣮૷Λݟͳ͕Β TODO ͷ࡟আ ΍ TODO ͷߋ৽Λ࣮૷͍ͯ͘͠
    HTML + CSS + API αʔόʔ͚ͩͷঢ়ଶ͔ΒϑϧεΫϥονͰ TODO ΞϓϦΛ࡞੒͢Δ
    ΞʔΩςΫνϟϨϕϧͷઃܭ͔Βࣗ෼Ͱ΍ͬͯΑ͍ (Flux ͡Όͳͯ͘΋͍͍)
    • TODO Ұཡͷऔಘ
    • TODO ͷ࡞੒
    ͜Ε͔Β࡞Δػೳ
    • TODO ࡟আ
    • TODO ͷ׬ྃঢ়ଶͷߋ৽
    

    View Slide

85. TODO࡟আ ΛεςοϓɾόΠɾεςοϓͰ࡞Δͱ͢Δͱ…
    ϕʔγοΫίʔε
    νϟϨϯδίʔε
    TODOҰཡͱTODO࡞੒ ػೳ͕͢Ͱʹ࣮૷ࡁΈ
    طଘͷ࣮૷Λݟͳ͕Β TODO ͷ࡟আ ΍ TODO ͷߋ৽Λ࣮૷͍ͯ͘͠
    HTML + CSS + API αʔόʔ͚ͩͷঢ়ଶ͔ΒϑϧεΫϥονͰ TODO ΞϓϦΛ࡞੒͢Δ
    ΞʔΩςΫνϟϨϕϧͷઃܭ͔Βࣗ෼Ͱ΍ͬͯΑ͍ (Flux ͡Όͳͯ͘΋͍͍)
    • 1. ࡟আϘλϯΛԡͨ͠Βର৅ͷTODOͷIDΛ
    ϩάʹग़͢
    • 2. ϩάग़ྗͷ୅ΘΓʹ Action Λ dispatch ͯ͠
    store Ͱ ϩάΛग़ྗ
    • 3. API αʔόʔ͸ߋ৽ͤͣ Store ͷσʔλ্Ͱ
    ࣮ࡍʹ࡟আ
    • 4. API ʹ௨৴͢Δ෦෼Λ࣮૷
    

    View Slide

86. ͦΕͰ͸ ࣮ࡍʹ
    खΛಈ͔ͯ͠ߦ͖·͠ΐ͏
    

    View Slide