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

JavaScript

Recruit
PRO
September 09, 2022

 JavaScript

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

Recruit
PRO

September 09, 2022
Tweet

More Decks by Recruit

Other Decks in Technology

Transcript

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

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


    (஌͓ͬͯ͘͜ͱ͸ॏཁ) ɾ جຊతͳه๏ ɾ ΫϥΠΞϯτ࣮૷ ɾ View ͱ ϩδοΫͷ 
 ੾Γ෼͚ ޙͰݟ͓ͯ͘ͱྑͦ͞͏ͳ΋ͷ https://github.com/asciidwango/js-primer js-primer Ͱݕࡧ
  3. ࠓ೔ͷྲྀΕ 1. JavaScript ͷجຊ 2. ԋश

  4. ৮ͬͯΈΑ͏

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

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

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

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

  10. ௨৴಺༰ΛΈͯΈΔ

  11. Chrome Devtools ͜Ε

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

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

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

  15. $ touch helloworld.j s $ code helloworld.j s $ node

    helloworld.j s Hello Worl d 0 1 0 2 console.log('Hello World');
  16. αʔόʔαΠυͷ JavaScript ͱ ΫϥΠΞϯταΠυͷ JavaScript • Ұൠతʹ Node.js Ͱಈ͔͢ JavaScript

    Λ 
 αʔόʔαΠυͷ JavaScript • ϒϥ΢βͰಈ͔͢ JavaScript Λ 
 ΫϥΠΞϯταΠυͷ JavaScript
  17. JavaScript ͷ Syntax

  18. Variable declaration ม਺ ɾ એݴ

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

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

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


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

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

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

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

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

    • ; Λ͚ͭͳͯ͘΋ ASI ͕উखʹ ; Λ͍ΕΔ ΦʔτηϛίϩϯΠϯαʔγϣϯ ࣜจ • ࣜ͸จʹͳΕΔ → จʹͳͬͨࣜΛ ࣜจ // ࣜจ 1 + 1;
  29. ϒϩοΫจ • {, } Λ࢖ͬͯෳ਺ͷจΛؚΉจΛॻ͚Δ { console.log("hoge") ; console.log("poge") ;

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

  31. ؔ਺એݴͱؔ਺ࣜ function Greeting() { console.log('hello' ) } • จͱࣜͱ͍͏͜ͱ͕ҧ͏ •

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

    Greeting = function() { console.log('hello' ) } const Greeting = () => { console.log(‘hello' ) }
  33. ଋറͱ͸ UIJT XJOEPX EPDVNFOU JOTUBODF" • ϝϞϦ্ͷ object ͱࣝผࢠ Λඥ෇͚Δ͜ͱ

    • JavaScript ͷΞϩʔؔ਺Ͱͳ͍ؔ਺͸ this ͱ͍͏ࣝผࢠʹ 
 ର࣮ͯ͠ߦ͢ΔίϯςΩετʹԠͯ͡ඥ෇͚Δ object ͕มΘΔ
  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.ag e const name =

    parson.name ͜Ε͸ ͜͏͔͚Δ const { age, name } = parson
  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
  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` ͕࢖͑Δ
  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); // 10 0 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 fi eld

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

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

    ϒϥ΢βͷ JavaScript ͸ ݪଇγϯάϧεϨου (main thread) Ͱ࣮ߦ͞ΕΔ (worker ΋͋Δׂ͕Ѫ) Α͋͘Δצҧ͍ : γϯάϧεϨου === ಉظॲཧ͔͠ͳ͍ ࣮ࡍʹ͸Πϕϯτϧʔϓͱ͍͏΋ͷͰλεΫΛΩϡʔͰ؅ཧͯ͠ 
 ͦͷ࣌఺࣌఺Ͱಈ͔͢΂͖ॲཧΛΩϡʔ͔ΒऔΓग़ͯ͠ॲཧ͍ͯ͠Δ
  55. Πϕϯτϧʔϓ ֓ཁ 4DSJQU 5JNFS &WFOU DMJDL NPVTFNPWF .JDSPUBTL 3FOEFS .JDSPUBTL

    3FOEFS <script src=”…”> ϒϥ΢βͷ rendering ͳʹ͔͠ΖͷλεΫ࣮ߦத͸ rendering ͞Εͳ͍ .addEventListener(…) ͷ callback setTimeout(() => {}) ͷ callback Promise ɾɾɾ
  56. callback ʹΑΔඇಉظ taskA(() => { taskB(() => { taskC(() =>

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

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

  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 Ͱ௫Ή͜ͱ͕Ͱ͖Δ
  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 Ͱॻ͚Δ
  65. Module

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

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

  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
  70. DOM ͷૠೖ const parent = document.createElement("div") ; const child =

    document.createElement("span") ; parent.appendChild(child) ; console.log(parent) ; // <div><span></span></div > ଞʹ΋ insertBefore, replaceChild ౳͕͋Δ
  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: ࣗ෼ࣗ਎ͷཁૉΛऔΓআ͖͍ͨͱ͖
  72. Πϕϯτ

  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 Λ࣮૷͍ͯ͠ΔͷͰΠϕϯτΛѻ͑Δ
  74. ϑϩϯτΤϯυΛ ։ൃ͢Δ্Ͱ େ੾ͳ͜ͱ

  75. ϑϩϯτΤϯυ։ൃͰॏཁͳ͜ͱ • View ͱ ϩδοΫΛ੾Γ཭͢ 
 7JFX ϩδοΫ มߋස౓ :

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

    Flux • ͳͲͳͲ… ViewͱϩδοΫΛ੾Γ཭ͨ͢Ίʹ༷ʑͳΞʔΩςΫνϟύλʔϯ͕༗Δ 

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

  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 Ͱݕࡧ
  79. ԋश 1. JavaScript ͷجຊ 2. ԋश

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

    JavaScript Λ 
 ॻ͚ΔΑ͏ʹͳ͍ͬͯͩ͘͞
  81. ίʔεબ୒ ϏΪφʔίʔε Ξυόϯευίʔε JavaScript ॻ͍ͨ͜ͱແ͍ਓ޲͖ `javascripting` ͱ͍͏υϦϧ ΛਐΊΔɺ͕࣌ؒ༨Ε͹ TODO ؅ཧΞϓϦ։ൃ

    React.js / Vue.js ౳ Λ׆༻ͯ͠ΞϓϦέʔγϣϯΛ։ൃͨ͜͠ͱ͋Δਓ޲͖ ༩͑ΒΕͨ HTML, CSS, API αʔό ͔Β ϑϧεΫϥονͰ TODO ؅ཧΞϓϦΛ׬੒ͤ͞Δ ϕʔγοΫίʔε JavaScript Λ গ͠ॻ͍ͨ͜ͱ͋Δਓ޲͖ લ೚ऀͷυΩϡϝϯτΛ ݩʹ ్த·Ͱ։ൃ͞Εͨ TODO ؅ཧΞϓϦΛ׬੒ͤ͞Δ
  82. ͦΕͧΕͷ໨ඪઃఆ ϏΪφʔίʔε Ξυόϯευίʔε ϕʔγοΫίʔε JavaScript Λ ಡΈ / ॻ͖ Ͱ͖ΔΑ͏ʹͳΔ

    ਓͷॻ͍ͨ JavaScript ΛಡΊΔΑ͏ʹͳΓ JavaScript ͔Β DOMΛ׆༻Ͱ͖ΔΑ͏ʹͳΔ ػೳΛ࣮૷͢ΔͷʹՃ͑ͯ ந৅Խ΍ΞʔΩςΫνϟύλʔϯΛ ࣗ෼Ͱ࣮૷͢Δͷʹ௅ઓ
  83. ϏΪφʔίʔε

  84. ४උ $ npm install @recruit-tech/javascripting - g $ javascriptin g

    ↑ ͜ΕΛ࣮ߦ ↓ Έ͍ͨͳը໘͕ͰΕ͹ OK
  85. ೔ຊޠ΁ͷม͑ํ

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

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

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