JavaScript Bootcamp 2019

JavaScript Bootcamp 2019

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

Eea9a05e6e222a3d50c73f54a49fadf4?s=128

Recruit Technologies

June 24, 2019
Tweet

Transcript

  1. JavaScript Bootcamp 2019 2019, 12th April @ Recruit Technologies Kento

    TSUJI @maxmellon
  2. ࣗݾ঺հ • Github: @maxmellon • Twitter: @maxmellon_9039 • ϦΫϧʔτςΫϊϩδʔζ 18೥

    ৽ଔೖࣾ • ࠷ۙ Apex ΍ͬͯΔΑʙ
  3. ΍Δ͜ͱɺ΍Βͳ͍͜ͱ ΍Δ͜ͱ ΍Βͳ͍͜ͱ ɾ ɾ جຊతͳه๏ ɾ ΫϥΠΞϯτ࣮૷ ɾ αʔόʔ࣮૷

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

    • ϑϩϯτΤϯυͷͨΊͷαʔόʔ΍ύϑΥʔϚϯ ενϡʔχϯάɺϢʔβϏϦςΟ޲্ͳͲ༷ʑ
  5. ϦΫϧʔτͷ
 ϑϩϯτΤϯδχΞͬͯ ͳʹ͢Δͷʁ

  6. ࣗ෼ͷ৔߹

  7. ۀ຿಺༰ • Airγϑτͱ͍͏αʔϏεͷ
 ϑϩϯτΤϯυΛ։ൃ͍ͯ͠Δ • ࠷ۙ͸ओʹύϑΥʔϚϯενϡʔϯϯά • ώΞϦϯάߦͬͨΓ΋͢Δ͠
 Ϣʔβʔମݧ࠷େԽͷͨΊʹͳΜͰ΋΍Δ

  8. Airγϑτ ͱ͸

  9. None
  10. None
  11. None
  12. "JSγϑτར༻͍ͯ͠ΔͷͰ͕͢ Ξοϓσʔτ͕͔͋ͬͯΒ ͘͢͝ॏ͍ΜͰ͢ΑͶʜ Ͳ͏ʹ͔ͯ͠
 ૣ͘ͳΒͳ͍Ͱ͠ΐ͏͔ʁ ͳΔ΄Ͳʜ ࣗ෼ͷύιίϯ͕ѱ͍ͷͰ͠ΐ͏͔ʁ ΫϥΠΞϯτ ΅͘ ↓

    ͋Δ೔
  13. ࣮ࡍʹݟʹߦ͘ͷ΋࢓ࣄ

  14. - ஗͍ݪҼ͸αʔόʔͰ͸ͳ͔ͬͨ - ΫϥΠΞϯτͷPC͕௿εϖοΫͩͬͨ - ։ൃऀʹൺ΂ͯ௿εϖοΫͳPC͕ଟ͘ར༻͞Ε͍ͯΔ ݹ͍ ஗͍ ฉ͍ͯΈΔͱ

  15. • γϑτͷྔ͕༧૝ΑΓଟ͔ͬͨ • άϧʔϓػೳͰళฮͷछผΛ͍ͯͨ͠ • HTMLͷඳըΑΓJavaScriptͷ࣮ߦ͕஗͔ͬͨ ϘτϧωοΫͷ΄ͱΜͲ͕ +BWB4DSJQUͷ࣮ߦ ˋ 9.8ඵ

    1.1ඵ 3.5ඵ 0.1ඵ JavaScriptͷ࣮ߦ HTMLͷඳը CSSͷద༻ ͦͷଞ ࣮ࡍʹ๚໰͢Δͱ
  16. ώΞϦϯάͱσʔλ͔Β ௐࠪͯ͠ϘτϧωοΫΛಛఆ

  17. ΋ͨ͘͞Μͷ໰୊Λ ಛఆɺղܾ ϝϯόʔζϒϩάʹ ܝࡌࡁΈ

  18. 13.5 ඵ͔Β 2.6ඵʹվળ After Before 2.6ඵ 13.5ඵ ౦ژNodeֶԂࡇ ‘18 HTML5

    Conferenceʹͯ ঺հ 11ඵ ແବΛΧοτ ඳը׬ྃ ඳը׬ྃ ܭࢉ΍Ϧιʔεͷऔಘ ݁Ռ 50%ͷϢʔβʔͰ 5.0ඵ͔Β1.5ඵʹऩ·ΔΑ͏ʹ
  19. ߴ͍ٕज़ͱ ͍ܰϑοτϫʔΫ Λ໨ࢦ͕ͯ͠Μ͹ͬͯ·͢

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

  21. ৮ͬͯΈΑ͏

  22. ͱΓ͋͑ͣಈ͔ͯ͠ΈΔ

  23. $ 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
  24. Hello World

  25. Hello World

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

    World 01 02 console.log('Hello World');
  27. JavaScript ͷ͋Ε͜Ε • Variable declaration • function • object •

    class • promise
  28. Variable declaration

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

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

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

    • var ͸ lint Ͱېࢭ͢Δ͜ͱ΋ଟ͍
  34. function

  35. ؔ਺એݴͱؔ਺ࣜ function Greeting() { console.log('hello') } const Greeting = function()

    {
 console.log('hello') } • syntax ͸Α͘ࣅ͍ͯΔ • એݴ͸ ר্͖͕͛ى͖Δ
  36. ؔ਺ࣜͱΞϩʔϑΝϯΫγϣϯ const Greeting = function() { console.log('hello') } const Greeting

    = () => { console.log('hello') } • ୹͔͚͘Δ • ΞϩʔϑΝϯΫγϣϯ͸ this Λଋറ͠ͳ͍ ؔ਺ࣜͱΞϩʔϑΝϯΫγϣϯͷҧ͍ ୹͔͚͘ΔͷͰΞϩʔϑΝϯΫγϣϯΛ࢖͏৔໘͸ଟ͍
  37. JavaScript ʹ͓͚Δ this • Ξϩʔؔ਺Ҏ֎ͷؔ਺ • Ϋϥε • ΦϒδΣΫτ •

    bindؔ਺ thisͷίϯςΩετ͕มΘΔ৔໘ ҰൠతͳݴޠͱUIJT͕ҧ͏ͱݴΘΕΔͷ͸ UIJTͷίϯςΩετ͕มΘͬͯ͠·͏͔Β https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/this
  38. ΞϩʔϑΝϯΫγϣϯ const foo = (a, b) => { return a

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

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

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

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

    { return this._age; }, get name() { return this._name; } }; ObjectͰ΋ήολʔ΍ηολʔ͕࢖͑Δ • private ͕ͳ͔ͬͨ࣌୅͸
 ͜͏͍͏ײ͡ͰΧϓηϧԽͯͨ͠
  45. Object Λ࡞Δ const age = 23 const name = 'Kento

    TSUJI' const parson = { age: age, name: name, } ͜Ε͸ ͜͏͔͚Δ const age = 23 const name = 'Kento TSUJI' const parson = { age, name, }
  46. Object ͔Β஋ΛऔΓग़͢ const age = parson.age const name = parson.name

    ͜Ε͸ const { age, name } = parson ͜͏͔͚Δ
  47. Object Λίϐʔ͢Δ const copied = { ...parson } const copied

    = Object.assign({}, parson) Shallow Copy جຊతʹͬͪ͜ͷॻ͖ํͰॻ͘ Object ͕ωετͨ͠ͱ͖ɼ ࢠͷObjectͷࢀর͸มԽ͠ͳ͍͜ͱʹ஫ҙ ͜ΕΛάάΔͱ͖͸ `spread operator` ͱ͔ εϓϨουԋࢉࢠͱ͔
  48. Object ΛϚʔδ͢Δ const a = { foo: 1, hoge: 'a',

    } const b = { hoge: 'b', poge: 2, } const merged = { ...a, ...b } { foo: 1, hoge: 'b', poge: 2, } ϚʔδͰ΋ `spread operator` ͕࢖͑Δ
  49. class

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

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


    AnyClass.ptototype.method ͷΑ͏ʹදݱ͢Δ
 ↑ ͜Ε͸ new AnyClass().method() • ελςΟοΫؔ਺͸AnyClass.staticMethod
  53. ༨ஊ private class field

  54. Ϟμϯͳϒϥ΢βͰ͸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 } }
  55. Ϟμϯͳϒϥ΢βͰ͸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 } }
  56. ಉظ / ඇಉظ

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

  58. callbackʹΑΔඇಉظ taskA(() => { taskB(() => { taskC(() => {

    … }) }) }) ͲΜͲΜωετ͕ਂ͘ͳ͍ͬͯͬͯ͠·͏
  59. promise

  60. 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 Ͱ ࣦഊϋϯυϥͷίʔϧόοΫΛ෇༩͢Δ
  61. taskA(() => { taskB(() => { taskC(() => { …

    }) }) }) taskA() .then(() => taskB()) .then(() => taskC()) callbackΑΓ΋Θ͔Γ΍͘͢ॻ͘͜ͱ͕Ͱ͖Δ
  62. 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Ͱ͖Δ
  63. 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)
 return res + 1
 }) ࣮ߦ͢ΔͱͲΜͳϩάग़ྗ͞ΕΔʁ
  64. 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" }
  65. async / await

  66. async function function resolveAfter2Seconds() { return new Promise(resolve => {

    setTimeout(() => { resolve('resolved'); }, 2000); }); } async function asyncCall() { console.log('calling'); const result = await resolveAfter2Seconds(); console.log(result); // expected output: 'resolved' } ಉظؔ਺ͷΑ͏ʹPromiseΛѻ͏
  67. const doSomeThing = () => {
 taskA() .then(() => taskB())

    .then(() => taskC()) } callbackΑΓ΋Θ͔Γ΍͘͢ॻ͘͜ͱ͕Ͱ͖Δ const doSomeThing = async () => { await taskA() await taskB() await taksC() }
  68. ԋश

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

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

  71. ΨϯΨϯ ਐΊͪΌ͍ͬͯͩ͘͞ (1h ΄ͲऔΓ·͢)

  72. ޙ൒

  73. ԋश 1. JavaScript ΛͱΓ͍͋ͣ৮ͬͯΈΔ 2. JavaScript Ͱ؆୯ͳΞϓϦέʔγϣϯΛ
 ࡞ͬͯΈΔ

  74. ࠔͬͨͱ͖ • ҰൠతͳهࣄͷલʹυΩϡϝϯτΛಡΉบΛ
 ͚ͭ·͠ΐ͏ • ΋͠OSSΛར༻͍ͯ͠ΔͷͰ͋Ε͹ɺ
 ιʔείʔυ΋ಡΉΑ͏ʹҙࣝ͠·͠ΐ͏ • ࠓճͷ৔߹ɺMDN͕࠷΋ࢀߟʹͳΔͱ
 ͓΋͍·͢

  75. ex. JavaScript ͔Β DOMΛ࡞Γ͍ͨ

  76. ͜͜Ͱ࢖͑ͦ͏ͳAPI • Document.createElement
 https://developer.mozilla.org/ja/docs/Web/API/Document/createElement • Document.querySelector
 https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector • Array.prototype.forEach
 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

    • Array.prototype.map
 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map
  77. JavaScript͔ΒDOMΛૢ࡞͢Δ • DOMπϦʔͷ࡞੒ํ๏
 https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model/How_to_create_a_DOM_tree

  78. 0. ༻ҙ • https://github.com/MaxMEllon/todo-mvc/ Λfork • git clone • npm

    install • npm start • ϒϥ΢βͰ http://localhost:3000 ʹΞΫηεʂ
  79. 1. APIΛઃܭ͢Δ • create (GET) read (POST) update (PATCH) delete

    (DELETE) ͷ4ͭ • read ͸ TODO Λશ݅औಘ • TODO ͸ ໊લͱ׬͔ྃͨ͠
 Ͳ͏͔ͷεςʔλε͔Βߏ੒ ͻͱ·ͣ Read ͚ͩ Agreed Λ࢖ͬͯ ઃܭͯ͠ΈΑ͏
  80. 2. API͔ΒTODOҰཡΛඳը͢Δ ͖ͬ͞࡞ͬͨ
 agreed ͔Βऔಘʂ

  81. 3. Form͔ΒจࣈྻΛೖྗͯ͠TODOΛ
 ࡞੒Ͱ͖ΔΑ͏ʹ͢Δ

  82. 4. TODOΛ׬ྃঢ়ଶʹͰ͖ΔΑ͏ʹ͢Δ
 (API௨৴ࠐͰ)

  83. 5. TODOΛ࡟আͰ͖ΔΑ͏ʹ͢Δ

  84. 6. TODOͷDONEʹͳͬͨ݅਺Λ਺͑Δ

  85. 7. Server Λ࣮૷͢Δ

  86. Φϓγϣφϧͳ՝୊ • TODOͷ໊લΛฤूͰ͖ΔΑ͏ʹͯ͠ΈΑ͏ • σβΠϯΛม͑ͯΈΑ͏ • MVVM΍FluxͰॻ͖௚ͯ͠ΈΑ͏ • WebComponents Ͱॻ͖௚ͯ͠ΈΑ͏