$30 off During Our Annual Pro Sale. View Details »

JavaScript Bootcamp 2020

JavaScript Bootcamp 2020

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

Recruit Technologies

August 21, 2020
Tweet

More Decks by Recruit Technologies

Other Decks in Technology

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