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

JavaScript

Recruit
PRO
August 18, 2021

 JavaScript

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

Recruit
PRO

August 18, 2021
Tweet

More Decks by Recruit

Other Decks in Technology

Transcript

  1. JavaScript Bootcamp 2021 2021, 26 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 $ node > // ͜͜ͰJavaScriptΛ࣮ߦ͢Δ͜ͱ͕Ͱ͖·͢ undefined

    > 1 + 1; 2 > var test = "hoge"; undefined > test 'hoge' > function sample() { ... var num = 5; ... return num; ... } undefined > 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.js $ code helloworld.js $ node helloworld.js Hello

    World 01 02 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 ͕উखʹ ; Λ͍ΕΔ • if จ ΍ for จ ΋จ͔ͩΒ୅ೖͰ͖ͳ͍ ΦʔτηϛίϩϯΠϯαʔγϣϯ
  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. ଋറͱ͸ 5IJT 8JOEPX %PDVNFOU *OTUBODF" • ϝϞϦ্ͷ 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.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. ΋͠ඇಉظ͕ͳ͔ͬͨΒͲ͏ͳΔ͔ • αʔόʔ͔ΒσʔλΛड͚औΔ·Ͱ ଞͷૢ࡞͕Ͱ͖ͳ͍ • ΫϦοΫ͢Δͱϒϥ΢β͕ݻ·Δ • ॲཧ͕Ұ͔ͭͣͭ͠Ͱ͖ͳ͍ • ϒϥ΢βͷ

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

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

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

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

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

    { node.parentNode.removeChild(node); } DOM ʹؔ͢Δ API ͸ https://qiita.com/uhyo/items/1c565b61d934cbb88c2e ͳͲ͕Θ͔Γ΍͍͢
  70. SPA Λ࡞Δ্Ͱ େ੾ͳ͜ͱ

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

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

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

  74. ࠔͬͨͱ͖ • ׂ͍͔ͭ͘Ѫͨ͠΋ͷ͕͋Γ·͢ ԋࢉࢠ : 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 Ͱݕࡧ
  75. ex. JavaScript ͔Β DOMΛ࡞Γ͍ͨ • ҰൠͷهࣄΑΓ΋ ͳΔ΂͘ MDN ΛಡΉบΛ ʢݚमͱ͍͏ҙຯ΋ࠐΊͯʣ

    • ௐ΂ͯΘ͔Βͳ͔ͬͨͱ͖͸ ԿΛͨͯ͘͠ɼͲ͏ௐ΂͔ͨ ڞ༗ͯ͘͠ΕΔͱخ͍͔͠΋
  76. ԋश 1. JavaScript ͷجຊ 2. ԋश

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

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

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

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

  81. ४උ $ npm install @recruit-tech/javascripting -g $ javascripting ↑ ͜ΕΛ࣮ߦ

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

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

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

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