JavaScript Bootcamp 2020

JavaScript Bootcamp 2020

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

Eea9a05e6e222a3d50c73f54a49fadf4?s=128

Recruit Technologies

August 21, 2020
Tweet

Transcript

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

    TSUJI @maxmellon
  2. ΍Δ͜ͱɺ΍Βͳ͍͜ͱ ΍Δ͜ͱ ΍Βͳ͍͜ͱ ɾ ϥΠϒϥϦͷ࢖͍ํ ɾ build΍preprocessपΓ ɾ ϨΨγʔͳه๏ͷৄࡉ (஌͓ͬͯ͘͜ͱ͸ॏཁ)

    ɾ جຊతͳه๏ ɾ ΫϥΠΞϯτ࣮૷ ɾ View ͱ ϩδοΫͷ ੾Γ෼͚ ޙͰݟ͓ͯ͘ͱྑͦ͞͏ͳ΋ͷ https://github.com/asciidwango/js-primer js-primer Ͱݕࡧ
  3. ϑϩϯτΤϯυΤϯδχΞͱ JavaScript • ϦΫϧʔτςΫϊϩδʔζͷ “ϑϩϯτΤϯυΤ ϯδχΞ” ͷఆٛ͸޿ͯ͘ਂ͍ • HTML/CSS/JSΛ۶ࢦͯ͠ΫϥΠΞϯτΛ࡞Δ͚ͩ Ͱ͸ͳ͍

    • ϑϩϯτΤϯυͷͨΊͷαʔόʔ΍ύϑΥʔϚϯ ενϡʔχϯάɺϢʔβϏϦςΟ޲্ͳͲ༷ʑ
  4. ࠓ೔ͷྲྀΕ 1. JavaScript ͷجຊ 2. JavaScript ΛͱΓ͋͑ͣ৮ͬͯΈΔ 3. JavaScript Ͱ؆୯ͳΞϓϦέʔγϣϯΛ

    ࡞ͬͯΈΔ
  5. ৮ͬͯΈΑ͏

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

  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
  8. ϒϥ΢βͰ΋ಈ͔ͯ͠ΈΔ

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

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

  11. ௨৴಺༰ΛΈͯΈΔ

  12. Chrome Devtools ͜Ε

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

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

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

  16. $ touch helloworld.js $ code helloworld.js $ node helloworld.js Hello

    World 01 02 console.log('Hello World');
  17. αʔόʔαΠυͷ JavaScript ͱ ΫϥΠΞϯταΠυͷ JavaScript • Ұൠతʹ Node.js Ͱಈ͔͢ JavaScript

    Λ αʔόʔαΠυͷ JavaScript • ϒϥ΢βͰಈ͔͢ JavaScript Λ ΫϥΠΞϯταΠυͷ JavaScript ࡢ೔ͷલ൒ͷߨٛͰ΋঺հ͞Ε·ͨ͠Ͷ
  18. JavaScript ͷ Syntax

  19. Variable declaration ม਺ ɾ એݴ

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

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

    ϒϩοΫ Մೳ Մม WBS ؔ਺ Մೳ Մม
  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 ؔ਺ (άϩʔόϧ)
  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) // []
  24. ͲΕ͔ͭ͑͹͍͍ͷʁ • ࠶୅ೖ͸ϩδοΫΛෳࡶԽͤ͞Δ͜ͱ͕ଟ͍ → جຊతʹ const • Ͳ͏ͯ͠΋࠶୅ೖ͍ͨ͠ͱ͖ → let

    • var ͸ lint Ͱېࢭ͢Δ͜ͱ΋ଟ͍
  25. ࣜͱจ

  26. ࣜͱจ • JavaScript ͸ จ (Statement) ͱ ࣜ (Expression) ͔Βߏ੒͞Ε͍ͯΔ

    • ࣜ͸ධՁ͢Δͱ݁Ռͷ஋͕͋Δ • จ͸ॲཧͷ̍εςοϓ • ࣜ͸จʹͳΕΔ ʢࣜจ ޙड़ ʣ
  27. ࣜ • ؆୯ʹݴ͏ͱม਺ʹ୅ೖͰ͖Δ΋ͷ • 13 ΍ ‘foo’ ͱ͍ͬͨϦςϥϧ • bar

    ͱ͍͏ ม਺ • ؔ਺ࣜ (ޙड़) ͳͲͳͲ
  28. ࣜ // 1 ͸͔ࣜͩΒ୅ೖͰ͖Δ const a = 1 // JavaScript

    ͷੈքͰ͸ؔ਺΋ࣜ const doSomeThing = function() { console.log('doSomeThing') } // ؔ਺͕୅ೖ͞Ε͍ͯΔͷͰݺͼग़͢͜ͱ͕Ͱ͖Δ doSomeThing()
  29. จ • จ͸ॲཧ͢Δ 1 εςοϓ • จ຤ʹ ; Λ͚ͭΔͱ จͷ۠੾ΓʹͳΔ

    • ; Λ͚ͭͳͯ͘΋ ASI ͕উखʹ ; Λ͍ΕΔ • if จ ΍ for จ ΋จ͔ͩΒ୅ೖͰ͖ͳ͍ ΦʔτηϛίϩϯΠϯαʔγϣϯ
  30. ϒϩοΫจ • {, } Λ࢖ͬͯෳ਺ͷจΛؚΉจΛॻ͚Δ { console.log("hoge"); console.log("poge"); } if

    (true) { console.log("hoge"); console.log("poge"); } • ྫ : if จͱϒϩοΫจͷ૊Έ߹Θͤ
  31. function

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

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

    Greeting = function() { console.log('hello') } const Greeting = () => { console.log(‘hello') }
  34. JavaScript ʹ͓͚Δ this • Ξϩʔؔ਺Ҏ֎ͷؔ਺ • Ϋϥε • ΦϒδΣΫτ •

    bindؔ਺ this ͷ ίϯςΩετ ͕มΘΔ৔໘ ҰൠతͳݴޠͱUIJT͕ҧ͏ͱݴΘΕΔͷ͸ UIJTͷίϯςΩετ͕มΘͬͯ͠·͏͔Β https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/this ࠓ͸׬શͳཧղ͡Όͳͯ͘΋ྑ͍ Θ͔Βͳ͘ͳͬͨΒௐ΂Α͏
  35. ΞϩʔϑΝϯΫγϣϯ const foo = (a, b) => { return a

    + b } ΞϩʔϑΝϯΫγϣϯͰ͸͕ࣜҰͭͷͱ͖ʹݶΓϒϩοΫΛলུ͔͚ͯ͠Δ const foo = (a, b) => a + b // ·ͨ͸ const foo = (a, b) => ( a + b
 ) ϒϩοΫΛলུͨ͠৔߹ɼͦͷࣜΛ࣮ߦͨ݁͠Ռ͕ return ͞ΕΔ
  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] σϑΥϧτҾ਺ Մม௕
  37. object

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

  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] + '.'); } }
  40. objectʹ͓͚Δmethod const person = { greeting() { alert('Hi!'); } };

    const person = { greeting: function() { alert('Hi!'); } }; • ӈͷํ͕୹͔͚͘Δ • ҙຯ͸શ͘ಉ͡
  41. const person = { _age: 25, _name: 'maxmellon', get age()

    { return this._age; }, get name() { return this._name; } }; ήολʔ΍ηολʔ͕࢖͑Δ
  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, }
  43. Object ͔Β஋ΛऔΓग़͢ const age = parson.age const name = parson.name

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

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

    Hoge = class { method() { } } • Ϋϥεએݴ͸ ר্͖͕͛ى͖ͳ͍ const Hoge = class Hoge { method() { } } Ϋϥεએݴ Ϋϥεࣜ ໊લ෇͖Ϋϥεࣜ
  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 ϝιουఆٛ
  49. Tips • JavaScript͸prototypeϕʔεͷݴޠ • class ͸ prorotypeͱObjectΛ࢖ͬͨ දݱΛ؆ܿʹΘ͔Γ΍͘͢ॻͨ͘Ίͷ΋ͷ • ͳͷͰ͍ΘΏΔΠϯελϯεϝιου͸

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

  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 } }
  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 } }
  53. ಉظ / ඇಉظ

  54. ΋͠ඇಉظ͕ͳ͔ͬͨΒͲ͏ͳΔ͔ • αʔόʔ͔ΒσʔλΛड͚औΔ·Ͱ ଞͷૢ࡞͕Ͱ͖ͳ͍ • ΫϦοΫ͢Δͱϒϥ΢β͕ݻ·Δ • ॲཧ͕Ұ͔ͭͣͭ͠Ͱ͖ͳ͍ Α͋͘Δצҧ͍ :

    γϯάϧεϨου === ಉظॲཧ͔͠ͳ͍ ࣮ࡍʹ͸Πϕϯτϧʔϓͱ͍͏΋ͷͰλεΫΛΩϡʔͰ؅ཧͯ͠ ͦͷ࣌఺࣌఺Ͱಈ͔͢΂͖ॲཧΛΩϡʔ͔ΒऔΓग़ͯ͠ॲཧ͍ͯ͠Δ
  55. callback ʹΑΔඇಉظ taskA(() => { taskB(() => { taskC(() =>

    { }) }) }) • ͍ͭऴΘΔ͔Θ͔Βͳ͍ taskA ʹ callback ؔ਺Λ ౉ͯ͠ऴΘ͔ͬͯΒ࣮ߦ͢ΔॲཧΛҠৡ͢Δ ωετ͕ͲΜͲΜਂ͘ͳͬͯ͠·͏
  56. promise

  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 Ͱ ࣦഊϋϯυϥͷίʔϧόοΫΛ෇༩͢Δ
  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Ͱ͖Δ
  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) }) ࣮ߦ͢ΔͱͲΜͳϩάग़ྗ͞ΕΔʁ
  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.<p>Tell you what, Ill make a deal: I'll keep writing if you keep reading. K?", "time" : 1314211127, "type" : "comment" }
  61. async / await

  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 Ͱॻ͚Δ
  63. Module

  64. Ϟδϡʔϧͷྺ࢙ • <script> λά ΍ prototype.js ͳͲ…. • AMD (RequireJS)

    • Browserify • UMD • ESModules ࠓ͸׬શͳཧղ͡Όͳͯ͘΋ྑ͍ ࿩͢ͱΩϦ͕ແ͘ͳΔ ͍Ζ͍Ζ ͋ͬͨ
  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 ͳͲ৭ʑͰ͖Δ෼ෳࡶ ࡉ͔͘͸ԋशͰ࢖͍ͳ͕Βղઆ
  66. DOM

  67. DOM ͷ ૠೖ const parent = document.createElement("div"); const child =

    document.createElement("span"); parent.appendChild(child); console.log(parent); // <div><span></span></div> ଞʹ΋ insertBefore, replaceChild ౳͕͋Δ
  68. DOM ͷ࡟আ // ਌ཁૉ͕ෆ໌ɺෆఆͷ৔߹ͷํ๏ Const node = document.getElementById("nested"); if (node.parentNode)

    { node.parentNode.removeChild(node); } DOM ʹؔ͢Δ API ͸ https://qiita.com/uhyo/items/1c565b61d934cbb88c2e ͳͲ͕Θ͔Γ΍͍͢
  69. ࠔͬͨͱ͖Ͳ͏͢Δ͔

  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 Ͱݕࡧ
  71. ex. JavaScript ͔Β DOMΛ࡞Γ͍ͨ • ҰൠͷهࣄΑΓ΋ ͳΔ΂͘ MDN ΛಡΉบΛ ʢݚमͱ͍͏ҙຯ΋ࠐΊͯʣ

    • ௐ΂ͯΘ͔Βͳ͔ͬͨͱ͖͸ ԿΛͨͯ͘͠ɼͲ͏ௐ΂͔ͨ ڞ༗ͯ͘͠ΕΔͱخ͍͔͠΋
  72. ԋश 1. JavaScript ͷجຊ 2. JavaScript ΛͱΓ͋͑ͣ৮ͬͯΈΔ 3. JavaScript Ͱ؆୯ͳΞϓϦέʔγϣϯΛ

    ࡞ͬͯΈΔ
  73. ४උ $ npm install @recruit-tech/javascripting -g $ javascripting ↑ ͜ΕΛ࣮ߦ

    ↓ Έ͍ͨͳը໘͕ͰΕ͹ OK
  74. ೔ຊޠ΁ͷม͑ํ

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

  76. ޙ൒

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

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

  79. SPAΛ࡞Δ্Ͱॏཁͳ͜ͱ • View ͱ ϩδοΫΛ੾Γ཭͢ 7JFX ϩδοΫ มߋස౓ : ߴ

    มߋස౓ : ௿ ςετ೉౓ : ߴ ςετ೉౓ : ௿ ViewͱϩδοΫ͕ີ݁߹ʹͳΔͱ ςετ͕ॻ͖ʹ͔ͬͨ͘Γ มߋʹऑ͘ͳͬͨΓ͢Δ
  80. View ͱ ϩδοΫΛ੾Γ཭͢ • MVC (Model-View-Controller) • MVVM (Model-View-ViewModel) •

    Flux • ͳͲͳͲ… ViewͱϩδοΫΛ੾Γ཭ͨ͢Ίʹ༷ʑͳΞʔΩςΫνϟύλʔϯ͕༗Δ
  81. ࠓճ͸ flux Ͱ࡞ͬͯΈΔ ͳͥ flux ͔ ͸͜ͷεϥΠυ͕Θ͔Γ΍͍͢ https://speakerdeck.com/geta6/reacttofluxfalsekoto?slide=39 7JFX %JTQBUDIFS

    4UPSF "DUJPO
  82. ίʔεબ୒ ϕʔγοΫίʔε νϟϨϯδίʔε TODOҰཡͱTODO࡞੒ ػೳ͕͢Ͱʹ࣮૷ࡁΈ طଘͷ࣮૷Λݟͳ͕Β TODO ͷ࡟আ ΍ TODO

    ͷߋ৽Λ࣮૷͍ͯ͘͠ HTML + CSS + API αʔόʔ͚ͩͷঢ়ଶ͔ΒϑϧεΫϥονͰ TODO ΞϓϦΛ࡞੒͢Δ ΞʔΩςΫνϟϨϕϧͷઃܭ͔Βࣗ෼Ͱ΍ͬͯΑ͍ (Flux ͡Όͳͯ͘΋͍͍) https://github.com/recruit-tech/bootcamp-2020-js
  83. ϕʔγοΫίʔεͷ ݱঢ়ͷ࣮૷ΛಡΜͰݟΔ

  84. ͢Ͱʹ࣮૷͞Ε͍ͯΔػೳ(basic) ϕʔγοΫίʔε νϟϨϯδίʔε TODOҰཡͱTODO࡞੒ ػೳ͕͢Ͱʹ࣮૷ࡁΈ طଘͷ࣮૷Λݟͳ͕Β TODO ͷ࡟আ ΍ TODO

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

    TODO ͷߋ৽Λ࣮૷͍ͯ͘͠ HTML + CSS + API αʔόʔ͚ͩͷঢ়ଶ͔ΒϑϧεΫϥονͰ TODO ΞϓϦΛ࡞੒͢Δ ΞʔΩςΫνϟϨϕϧͷઃܭ͔Βࣗ෼Ͱ΍ͬͯΑ͍ (Flux ͡Όͳͯ͘΋͍͍) • 1. ࡟আϘλϯΛԡͨ͠Βର৅ͷTODOͷIDΛ ϩάʹग़͢ • 2. ϩάग़ྗͷ୅ΘΓʹ Action Λ dispatch ͯ͠ store Ͱ ϩάΛग़ྗ • 3. API αʔόʔ͸ߋ৽ͤͣ Store ͷσʔλ্Ͱ ࣮ࡍʹ࡟আ • 4. API ʹ௨৴͢Δ෦෼Λ࣮૷
  86. ͦΕͰ͸ ࣮ࡍʹ खΛಈ͔ͯ͠ߦ͖·͠ΐ͏