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

JavaScript

Avatar for Recruit Recruit PRO
August 18, 2021

 JavaScript

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

Avatar for Recruit

Recruit PRO

August 18, 2021
Tweet

More Decks by Recruit

Other Decks in Technology

Transcript

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

    ɾ جຊతͳه๏ ɾ ΫϥΠΞϯτ࣮૷ ɾ View ͱ ϩδοΫͷ ੾Γ෼͚ ޙͰݟ͓ͯ͘ͱྑͦ͞͏ͳ΋ͷ https://github.com/asciidwango/js-primer js-primer Ͱݕࡧ
  2. $ 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
  3. αʔόʔαΠυͷ JavaScript ͱ ΫϥΠΞϯταΠυͷ JavaScript • Ұൠతʹ Node.js Ͱಈ͔͢ JavaScript

    Λ αʔόʔαΠυͷ JavaScript • ϒϥ΢βͰಈ͔͢ JavaScript Λ ΫϥΠΞϯταΠυͷ JavaScript
  4. είʔϓ 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 ؔ਺ (άϩʔόϧ)
  5. ࠶୅ೖ ͱ ՄมɺෆՄม ؔ਺ (άϩʔόϧ) 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) // []
  6. ࣜͱจ • JavaScript ͸ จ (Statement) ͱ ࣜ (Expression) ͔Βߏ੒͞Ε͍ͯΔ

    • ࣜ͸ධՁ͢Δͱ݁Ռͷ஋͕͋Δ • จ͸ॲཧͷ̍εςοϓ • ࣜ͸จʹͳΕΔ
  7. ࣜ // 1 ͸͔ࣜͩΒ୅ೖͰ͖Δ const a = 1 // JavaScript

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

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

    (true) { console.log("hoge"); console.log("poge"); } • ྫ : if จͱϒϩοΫจͷ૊Έ߹Θͤ
  10. ଋറͱ͸ 5IJT 8JOEPX %PDVNFOU *OTUBODF" • ϝϞϦ্ͷ object ͱࣝผࢠ Λඥ෇͚Δ͜ͱ

    • JavaScript ͷΞϩʔؔ਺Ͱͳ͍ؔ਺͸ this ͱ͍͏ࣝผࢠʹ ର࣮ͯ͠ߦ͢ΔίϯςΩετʹԠͯ͡ඥ෇͚Δ object ͕มΘΔ
  11. JavaScript ʹ͓͚Δ this • Ξϩʔؔ਺Ҏ֎ͷؔ਺ • Ϋϥε • ΦϒδΣΫτ •

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

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

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

    { return this._age; }, get name() { return this._name; } }; ήολʔ΍ηολʔ͕࢖͑Δ
  17. 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, }
  18. 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
  19. Object ΛϚʔδ͢Δ const a = { foo: 1, hoge: 'a',

    } const b = { hoge: 'b', poge: 2, } const merged = { ...a, ...b } { foo: 1, hoge: 'b', poge: 2, } ϚʔδͰ΋ `spread` ͕࢖͑Δ
  20. ΫϥεએݴͱΫϥεࣜ class Hoge { method() { 
 } } const

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

    AnyClass.prototype.method ͷΑ͏ʹදݱ͢Δ ↑ ͜Ε͸ new AnyClass().method() • ελςΟοΫؔ਺͸AnyClass.staticMethod ࣮࣭తʹ͸౶ҥߏจ͚ͩͲɼclassߏจͰॻ͔Εͨ΋ͷΛ prototype Ͱਖ਼֬ʹ࠶ݱ͢Δͷ͸ͪΐͬͱେม
  23. Ϟμϯͳϒϥ΢βͰ͸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 } }
  24. Ϟμϯͳϒϥ΢βͰ͸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 } }
  25. ΋͠ඇಉظ͕ͳ͔ͬͨΒͲ͏ͳΔ͔ • αʔόʔ͔ΒσʔλΛड͚औΔ·Ͱ ଞͷૢ࡞͕Ͱ͖ͳ͍ • ΫϦοΫ͢Δͱϒϥ΢β͕ݻ·Δ • ॲཧ͕Ұ͔ͭͣͭ͠Ͱ͖ͳ͍ • ϒϥ΢βͷ

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

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

    { }) }) }) • ͍ͭऴΘΔ͔Θ͔Βͳ͍ taskA ʹ callback ؔ਺Λ ౉ͯ͠ऴΘ͔ͬͯΒ࣮ߦ͢ΔॲཧΛҠৡ͢Δ ωετ͕ͲΜͲΜਂ͘ͳͬͯ͠·͏
  28. 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 Ͱ ࣦഊϋϯυϥͷίʔϧόοΫΛ෇༩͢Δ
  29. 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Ͱ͖Δ
  30. 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) }) ࣮ߦ͢ΔͱͲΜͳϩάग़ྗ͞ΕΔʁ
  31. 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" }
  32. 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 Ͱॻ͚Δ
  33. Ϟδϡʔϧͷྺ࢙ • <script> λά ΍ prototype.js ͳͲ…. • AMD (RequireJS)

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

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

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

    { node.parentNode.removeChild(node); } DOM ʹؔ͢Δ API ͸ https://qiita.com/uhyo/items/1c565b61d934cbb88c2e ͳͲ͕Θ͔Γ΍͍͢
  38. SPAΛ࡞Δ্Ͱॏཁͳ͜ͱ • View ͱ ϩδοΫΛ੾Γ཭͢ 7JFX ϩδοΫ มߋස౓ : ߴ

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

    Flux • ͳͲͳͲ… ViewͱϩδοΫΛ੾Γ཭ͨ͢Ίʹ༷ʑͳΞʔΩςΫνϟύλʔϯ͕༗Δ
  40. ࠔͬͨͱ͖ • ׂ͍͔ͭ͘Ѫͨ͠΋ͷ͕͋Γ·͢ ԋࢉࢠ : 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 Ͱݕࡧ
  41. ex. JavaScript ͔Β DOMΛ࡞Γ͍ͨ • ҰൠͷهࣄΑΓ΋ ͳΔ΂͘ MDN ΛಡΉบΛ ʢݚमͱ͍͏ҙຯ΋ࠐΊͯʣ

    • ௐ΂ͯΘ͔Βͳ͔ͬͨͱ͖͸ ԿΛͨͯ͘͠ɼͲ͏ௐ΂͔ͨ ڞ༗ͯ͘͠ΕΔͱخ͍͔͠΋
  42. ίʔεબ୒ ϏΪφʔίʔε Ξυόϯευίʔε JavaScript ॻ͍ͨ͜ͱແ͍ਓ޲͖ `javascripting` ͱ͍͏υϦϧ ΛਐΊΔɺ͕࣌ؒ༨Ε͹ TODO ؅ཧΞϓϦ։ൃ

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

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