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

JavaScript

Avatar for Recruit Recruit PRO
September 09, 2022

 JavaScript

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

Avatar for Recruit

Recruit PRO

September 09, 2022
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 $ 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
  3. $ touch helloworld.j s $ code helloworld.j s $ node

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

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

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

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

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

    } if (true) { console.log("hoge") ; console.log("poge") ; } • ྫ : if จͱϒϩοΫจͷ૊Έ߹Θͤ
  11. ؔ਺એݴͱؔ਺ࣜ function Greeting() { console.log('hello' ) } • จͱࣜͱ͍͏͜ͱ͕ҧ͏ •

    એݴ͸ר্͖͕͛ى͖Δ const Greeting = function() { console.log('hello' ) } ؔ਺એݴ ؔ਺ࣜ
  12. ଋറͱ͸ UIJT XJOEPX EPDVNFOU JOTUBODF" • ϝϞϦ্ͷ object ͱࣝผࢠ Λඥ෇͚Δ͜ͱ

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

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

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

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

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

    parson.name ͜Ε͸ ͜͏͔͚Δ const { age, name } = parson
  21. 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
  22. 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` ͕࢖͑Δ
  23. ΫϥεએݴͱΫϥεࣜ class Hoge { method() { 
 } } const

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

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

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

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

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

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

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

    document.createElement("span") ; parent.appendChild(child) ; console.log(parent) ; // <div><span></span></div > ଞʹ΋ insertBefore, replaceChild ౳͕͋Δ
  42. 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: ࣗ෼ࣗ਎ͷཁૉΛऔΓআ͖͍ͨͱ͖
  43. ΠϕϯτͷϋϯυϦϯά 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 Λ࣮૷͍ͯ͠ΔͷͰΠϕϯτΛѻ͑Δ
  44. ϑϩϯτΤϯυ։ൃͰॏཁͳ͜ͱ • View ͱ ϩδοΫΛ੾Γ཭͢ 
 7JFX ϩδοΫ มߋස౓ :

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

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

  46. ࠔͬͨͱ͖ • ׂ͍͔ͭ͘Ѫͨ͠΋ͷ͕͋Γ·͢ 
 ԋࢉࢠ : 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 Ͱݕࡧ
  47. ίʔεબ୒ ϏΪφʔίʔε Ξυόϯευίʔε JavaScript ॻ͍ͨ͜ͱແ͍ਓ޲͖ `javascripting` ͱ͍͏υϦϧ ΛਐΊΔɺ͕࣌ؒ༨Ε͹ TODO ؅ཧΞϓϦ։ൃ

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

    ਓͷॻ͍ͨ JavaScript ΛಡΊΔΑ͏ʹͳΓ JavaScript ͔Β DOMΛ׆༻Ͱ͖ΔΑ͏ʹͳΔ ػೳΛ࣮૷͢ΔͷʹՃ͑ͯ ந৅Խ΍ΞʔΩςΫνϟύλʔϯΛ ࣗ෼Ͱ࣮૷͢Δͷʹ௅ઓ
  49. ४උ $ npm install @recruit-tech/javascripting - g $ javascriptin g

    ↑ ͜ΕΛ࣮ߦ ↓ Έ͍ͨͳը໘͕ͰΕ͹ OK