モダンJavaScript再入門 / Re-introduction to Modern JavaScript

FRONTEND CONFERENCE 2019の登壇資料です。
https://2019.kfug.jp/session/onoueyosuke

Webサイト・Webアプリ制作への高まる要求に耐えられるようにJavaScriptは進化を続けてきました。特にこの約5年間で、JavaScriptはモダンなプログラミング言語へと大きな進化を遂げ、開発効率は劇的に高まりました。一方で、古いままの情報も多く、最新技術をキャッチアップするのは大変な面もあります。本セッションでは、新しくJavaScriptを学びたい人や昔に勉強した人、なんとなく書いている人が入門・再入門できるように、JavaScriptのモダンな書き方をなるべく実用的な例をまじえてご紹介します。また、将来のWebの変化についていけるように、これから先のJavaScriptがどのように進化していくのかの展望についてもお話しします。

1. ඌ্༸հ Ϟμϯ+BWB4DSJQU࠶ೖ໳ '30/5&/%
   $0/'&3&/$&
   
   ೥݄೔
2. ࣗݾ঺հ w ඌ্༸հ
   :PTVLF
   0OPVF
   w ೔ຊେֶจཧֶ෦৘ใՊֶՊ।ڭत
   w גࣜձࣾఇࠃσʔλόϯΫ٬һݚڀһ
   w 8FCٕज़͕޷͖Ͱ͢ IUUQTUXJUUFSDPN@MJLS 'PMMPX
   .F IUUQTWETMBCKQ
3. ͓ئ͍ w $PNNFOU
   4DSFFOΛ࢖༻͍ͯ͠·͢
   IUUQTDPNNFOUTDSFFODPN
   w #
   ͰπΠʔτ͢ΔͱεΫϦʔϯʹྲྀΕ·͢
   w ʮGSPOULBOTBJ
   #ʯ
   ͰπΠʔτ͍ͯͩ͘͠͞
   w ࣭໰ɺฉ͖͍ͨ͜ͱͳͲؾܰʹͲ͏ͧʂ
4. Կނ+BWB4DSJQUΛֶͿ͔ʁ w ຊ֨తͳ41"։ൃ͕Ͱ͖ΔΑ͏ʹͳΔ
   w ύϑΥʔϚϯεͳͲͷར఺͕ೝ஌͞ΕྲྀΑ͏ʹͳͬͨ
   w ϞμϯͳπʔϧɾϑϨʔϜϫʔΫͷυΩϡϝϯτΛಡΊΔ
   w ৽͍͠πʔϧʹ͸৽͍ٕ͠ज़͕औΓೖΕΒΕ͍ͯΔ
   w ྲྀߦΓʹྲྀ͞Εͳ͍جຊ͕਎ʹ෇͘
   w πʔϧ͕มΘͬͯ΋௨༻͢ΔྗΛ͚ͭΔ
5. ຊηογϣϯͷ໨ඪ w +BWB4DSJQUΛ৽ֶ͘͠ͼ͍ͨਓɺݹ͍஌ࣝΛΞοϓσʔτͨ͠ ͍ਓ͕Ϟμϯ+BWB4DSJQUͷΩʔϫʔυΛΩϟονΞοϓ͢Δ
   w ϝδϟʔͳ8FCϑϩϯτΤϯυϑϨʔϜϫʔΫ
   ʢ"OHVMBSɺ3FBDUɺ7VFʣͷνϡʔτϦΞϧɾαϯϓϧΛ
   ಡΈਐΊΒΕΔ஌ࣝΛ͚ͭΔ
   ˞+BWB4DSJQUಛ༗ͷ෦෼Λத৺ʹ࿩͢ͷͰɺ
   ɹϓϩάϥϛϯάࣗମ͸େମΘ͔Δલఏʹ͍ͤͯͩ͘͞͞
6. ຊηογϣϯͰ࿩͢͜ͱɾ࿩͞ͳ͍͜ͱ w ࿩͢͜ͱ
   w Ϟμϯ+BWB4DSJQUͰ41"Λ࡞Δ্Ͱඞཁͳ࠷খݶͷ஌ࣝ
   w ࿩͞ͳ͍͜ͱ
   w σΟʔϓͳ࿩ɺྺ࢙తࣄ৘ͱ͔
   w ಛఆͷϑϨʔϜϫʔΫɺ+BWB4DSJQUΛॻͨ͘Ίͷπʔϧͷ࿩
7. ΦϒδΣΫτͱม਺
8. جຊతͳΦϒδΣΫτ w ਺஋ɿ/VNCFS
   w ੔਺ͱ࣮਺ͷ۠ผ͸ͳ͍
   w େ͖͍੔਺஋ͷͨΊʹ#JH*OU͕ಋೖ༧ఆ
   w จࣈྻɿ4USJOH
   w ഑ྻɿ"SSBZ
   w ΦϒδΣΫτɿ0CKFDU
   w ΦϒδΣΫτͷ࣋ͭ஋͸ϓϩύςΟͱݺͿ
   w LFZWBMVFܕͷσʔλߏ଄ͱͯ͠΋࢖༻ IUUQTEFWFMPQFSNP[JMMBPSHEPDT8FC+BWB4DSJQU3FGFSFODF(MPCBM@0CKFDUT 1 // ਺஋ 2 console.log(42) // ੔਺ 3 3.14 // ࣮਺ 4 5 // จࣈ 6 console.log('Hello,') // γϯάϧΫΦʔτͰғΉ 7 console.log("I'm Yosuke!") // μϒϧΫΦʔτͰ΋OK 8 9 // ഑ྻ 10 console.log([]) // ۭͷ഑ྻ 11 console.log([123, '456', 78.9]) // ͲΜͳΦϒδΣΫτͰ΋ೖΕΒΕΔ 12 13 // ΦϒδΣΫτ 14 console.log({}) // ۭͷΦϒδΣΫτ 15 console.log({ id: 11, name: 'Dr Nice' }) // ͲΜͳ஋Ͱ΋࣋ͯΔ 16 17 // ഑ྻͱΦϒδΣΫτͷ૊Έ߹Θͤ 18 console.log([{ id: 11, name: 'Dr Nice' }, { id: 12, name: 'Narco' }]) 19 console.log({ 20 todos: [ 21 { text: 'Learn JavaScript' }, 22 { text: 'Learn Vue' }, 23 { text: 'Build something awesome' } 24 ] 25 })
9. ม਺ͷએݴ w DPOTU
   w ม਺΁ͷ୅ೖ͕Ͱ͖ͳ͍
   w ΦϒδΣΫτͷத਎ͷมߋ͸Մೳ
   w MFU
   w ม਺΁ͷ୅ೖ͕Ͱ͖Δ
   w ϒϩοΫείʔϓ
   w ಉ͡ϒϩοΫͰͷ࠶એݴ͸Ͱ͖ͳ͍
   w جຊ͸DPOTUɺͦΕͰͰ͖ͳ͍͜ͱ͸MFUɺ
   WBS͸جຊతʹ࢖Θͳ͍ IUUQTEFWFMPQFSNP[JMMBPSHEPDT8FC+BWB4DSJQU3FGFSFODF4UBUFNFOUTMFU IUUQTEFWFMPQFSNP[JMMBPSHEPDT8FC+BWB4DSJQU3FGFSFODF4UBUFNFOUTDPOTU 1 // const 2 const todo = { text: 'Learn JavaScript' } 3 const magicNumber = 7 4 5 // constͰએݴͨ͠ม਺΁ͷ୅ೖ͸Τϥʔ 6 // todo = { text: 'Learn Modern JavaScript' } 7 // ΠϯΫϦϝϯτɺՃࢉ୅ೖ౳΋Τϥʔ 8 // magicNumber++ 9 // magicNumber += 2 10 // ϓϩύςΟͷॻ͖׵͑͸OK 11 todo.text = 'Learn Modern JavaScript' 12 13 // let 14 let awesomeValue = 42 15 16 // letͰએݴͨ͠ม਺΁ͷ୅ೖ 17 // ܕ͕มΘͬͯ΋OK 18 awesomeValue = '42' 19 20 // ϒϩοΫείʔϓ 21 let speaker1 = 'Yosuke Onoue' 22 const speaker2 = 'Kentaro Okuno' 23 console.log(speaker1) // > Yosuke Onoue 24 { 25 // ϒϩοΫ͕ҧ͑͹࠶એݴͰ͖Δ 26 const speaker1 = '@likr' 27 console.log(speaker1) // > @likr 28 } 29 // ϒϩοΫΛൈ͚Δͱݩͷ஋ʹ໭Δ 30 console.log(speaker1) // > Yosuke Onoue 31 // ಉ͡ϒϩοΫͰͷ࠶એݴ͸Τϥʔ 32 // let speaker1 = 'Kazuki Yamashita' 33 // let speaker2 = 'Masahiko Sakakibara'
10. ΦϒδΣΫτͷॳظԽͱ෼ׂ୅ೖ w TIPSUIBOE
    QSPQFSUJFT
    w ஋͕ϓϩύςΟ໊ͱಉ͡ม਺໊ͷͱ͖
    ஋ͷ෦෼ΛলུͰ͖Δ
    w DPNQVUFE
    QSPQFSUJFT
    w ϓϩύςΟ໊Λม਺Ͱࢦఆ͢Δ
    w ෼ׂ୅ೖʢEFTUSVDUVSJOH
    BTTJHONFOUʣ
    w ഑ྻ΍ΦϒδΣΫτ͔ΒҰ෦ͷ஋ΛऔΔ
    w SFTU
    QBSBNFUFST
    w ෼ׂ୅ೖͰ࢖༻ͨ͠Ҏ֎ͷ෦෼Λड͚औΔ 1 // shorthand properties 2 const id = 11 3 const name = 'Dr Nice' 4 const hero = { id, name } 5 console.log(hero.id) // > 11 6 console.log(hero.name) // > Dr Nice 7 8 // computed properties 9 const propertyName = 'text' 10 const todo = { [propertyName]: 'Learn JavaScript' } 11 console.log(todo.text) // > Learn JavaScript 12 13 // ෼ׂ୅ೖ 14 const session = { room: 'B5', speaker: '@likr', start: '11:00' } 15 const { room, speaker } = session 16 console.log(room, speaker) // > B5 @likr 17 const { start: startTime } = session 18 console.log(startTime) // > 11:00 19 20 const primes = [2, 3, 5, 7] 21 const [p1, p2] = primes 22 console.log(p1, p2) // > p1 p2 23 24 // rest parameters 25 const [head, ...tail] = primes 26 console.log(head) // > 2 27 console.log(tail) // > [ 3, 5, 7 ] 28 29 const session2 = { room: 'B5', speaker: '@okunokentaro', start: '11:45' } 30 const { speaker: speaker2, ...rest } = session2 31 console.log(rest.room) // > B5 32 console.log(rest.speaker) // > undefined IUUQTEFWFMPQFSNP[JMMBPSHEPDT8FC+BWB4DSJQU3FGFSFODF0QFSBUPST%FTUSVDUVSJOH@BTTJHONFOU IUUQTEFWFMPQFSNP[JMMBPSHEPDT8FC+BWB4DSJQU3FGFSFODF0QFSBUPST0CKFDU@JOJUJBMJ[FS
11. ؔ਺
12. Ξϩʔؔ਺ w ؔ਺ͷ࡞੒
    w +BWB4DSJQUͷؔ਺͸ୈҰڃΦϒδΣΫτ
    w ม਺΁ͷ୅ೖ΍ɺؔ਺΁ͷड͚౉͕͠Մೳ
    w ؔ਺Λड͚औΔؔ਺
    w ؔ਺Λฦؔ͢਺
    w ؔ਺ͷཧղ͸Ϟμϯ+4ཧղͷۙಓ
    w GVODUJPO͸ඞཁੑ͕ݮ͍ͬͯΔ 1 // ؔ਺ͷ࡞੒ 2 const selfIntroduction = () => { 3 console.log("I'm Yosuke!") 4 } 5 selfIntroduction() // > I'm Yosuke! 6 7 // Ҿ਺ͱ໭Γ஋ 8 const add = (a, b) => { 9 return a + b 10 } 11 console.log(add(1, 2)) // > 3 12 13 // ͚ࣜͩͳΒϒϩοΫͱreturn͕ෆཁ 14 const twice = (x) => 2 * x 15 console.log(twice(3.14)) // > 6.28 16 17 // ؔ਺Λม਺ʹ୅ೖͰ͖Δ 18 const f = twice 19 console.log(f(1)) // > 2 20 21 // ؔ਺Λฦؔ͢਺ 22 const makeGreet = (message) => { 23 return (name) => { 24 console.log(message, name) 25 } 26 } 27 const greet = makeGreet('Goodmorning') 28 greet('Yosuke') // > Goodmorning Yosuke 29 greet('everyone') // > Goodmorning everyone 30 31 // ؔ਺Λड͚औΔؔ਺ 32 const callTwice = (f) => { 33 f() 34 f() 35 } 36 callTwice(selfIntroduction) // > I'm Yosuke! I'm Yosuke! IUUQTEFWFMPQFSNP[JMMBPSHEPDT8FC+BWB4DSJQU3FGFSFODF'VODUJPOT"SSPX@GVODUJPOT
13. Ϋϥε
14. Ϋϥεʢʣ w Ϋϥεͷఆٛ
    w ϑϨʔϜϫʔΫ౳ͷίϯϙʔωϯτʹར༻
    w "OHVMBSɺ$VTUPN&MFNFOUT
    w DPOTUSVDUPS͸ίϯετϥΫλ༻ͷ໊લ
    w OFXͰΠϯελϯεԽ
    w Πϯελϯεͷಈ͖͸0CKFDUͱಉ͡ IUUQTEFWFMPQFSNP[JMMBPSHEPDT8FC+BWB4DSJQU3FGFSFODF4UBUFNFOUTDMBTT 1 // Ϋϥεͷఆٛ 2 class Circle { 3 // newͨ͠ͱ͖ʹݺͼग़͞ΕΔίϯετϥΫλ 4 constructor(r) { 5 // thisͰΠϯελϯεͷϓϩύςΟʹΞΫηε 6 this.r = r 7 } 8 9 // ϝιουͷఆٛ 10 area() { 11 return Math.PI * this.r * this.r 12 } 13 14 // Ҿ਺ͷ͋Δϝιου 15 contains(x, y) { 16 return this.r >= Math.sqrt(x * x + y * y) 17 } 18 } 19 20 // ΠϯελϯεԽ 21 const circle = new Circle(5) 22 // ϓϩύςΟͷΞΫηε 23 console.log(circle.r) // > 5 24 // ϝιουͷݺͼग़͠ 25 console.log(circle.area()) // > 78.53981633974483 26 console.log(circle.contains(-2, 3)) // > true 27 // ϓϩύςΟ͸௥ՃͰ͖Δ 28 circle.name = 'My cool circle' 29 console.log(circle.name) // > My cool circle 30 // ϓϩύςΟ͸ॻ͖׵͑Ͱ͖Δ 31 circle.r = 2 32 console.log(circle.contains(-2, 3)) // > false
15. Ϋϥεʢʣ w FYUFOETʹΑΔΫϥεͷܧঝ
    w TVQFSͰ਌ΫϥεͷίϯετϥΫλݺͼग़͠
    w HFUUFSTFUUFSͷఆٛ
    w TUBUJDʹΑΔΫϥεϝιουͷఆٛ
    w Πϯελϯεϝιου͸
    4PNF$MBTTQSPUPUZQFTPNF.FUIPE
    Ϋϥεϝιου͸
    4PNF$MBTTTUBUJD.FUIPE
    ͱදه͞ΕΔ͜ͱ͕ଟ͍
    w QSPUPUZQFͷ͜ͱ͸๨ΕΑ͏ IUUQTEFWFMPQFSNP[JMMBPSHEPDT8FC+BWB4DSJQU3FGFSFODF4UBUFNFOUTDMBTT 1 // Ϋϥεͷܧঝ 2 class HeroComponent extends HTMLElement { 3 constructor() { 4 // ਌ίϯετϥΫλͷݺͼग़͠ 5 super() 6 } 7 8 // static method(getter) 9 static get observedAttributes() { 10 return ['name'] 11 } 12 13 // name getter 14 get name() { 15 this.getAttribute('name') 16 } 17 18 // name setter 19 set name(value) { 20 this.setAttribute('name', value) 21 } 22 } 23 24 customElements.define('my-hero', HeroComponent) 25 const hero = document.createElement('my-hero') 26 console.log(hero) // > <my-hero></my-hero> 27 // getterʹΑΔname΁ͷΞΫηε 28 console.log(hero.name) // > null 29 // setterʹΑΔnameͷॻ͖׵͑ 30 hero.name = 'ϥʔϝϯϚϯ' 31 console.log(hero) // > <my-hero name='ϥʔϝϯϚϯ'></my-hero> 32 console.log(hero.name) // > ϥʔϝϯϚϯ
16. ৚݅෼ذ
17. ৚݅෼ذͱਅِ஋ w $ݴޠελΠϧͷJGจ
    w ࣜͱͯ͠࢖͍͍ͨ৔߹͸৚݅ԋࢉࢠ
    
    w ౳Ձԋࢉ͸ݪଇ
    ɺ
    w OVMMνΣοΫ͸
    
    ɺ
    w 'BMTZʢGBMTFͱΈͳ͞ΕΔ஋ʣ
    w GBMTFɺOVMMɺVOEFpOFEɺɺ/B/ɺ
    w ্هҎ֎͸5SVUIZʢUSVFͱΈͳ͞ΕΔ஋ʣ 1 // ifจ 2 const a = 1 3 const b = 2 4 if (a > b) { 5 console.log('a is greater than b') 6 } else { 7 console.log('a is less than or equal to b') 8 } 9 // > a is less than or equal to b 10 11 // ৚݅ԋࢉ 12 const hero = null 13 const message = hero == null ? 'loading' : 'hello, ' + hero.name 14 console.log(message) // > loading 15 16 const obj1 = {} 17 const obj2 = {} 18 // ΦϒδΣΫτͱ഑ྻ͸ಉҰੑͷνΣοΫ 19 console.log(obj1 === obj1) // > true 20 console.log(obj1 === obj2) // > false 21 22 obj1.name = '' 23 if (obj1.name) { 24 console.log('obj1.name is truthy') 25 } else { 26 console.log('obj1.name is falsy') 27 } 28 // > obj1.name is falsy 29 if ('name' in obj1) { 30 console.log('obj1 has name') 31 } 32 // > obj1 has name IUUQTEFWFMPQFSNP[JMMBPSHEPDT8FC+BWB4DSJQU3FGFSFODF4UBUFNFOUTJGFMTF IUUQTEFWFMPQFSNP[JMMBPSHEPDT8FC+BWB4DSJQU3FGFSFODF0QFSBUPST$POEJUJPOBM@0QFSBUPS
18. จࣈྻ
19. ςϯϓϨʔτϦςϥϧʢςϯϓϨʔτจࣈྻʣ w จࣈྻதʹࣜΛల։Ͱ͖Δ
    w ෳ਺ߦͷจࣈྻ͕ॻ͖΍͍͢ IUUQTEFWFMPQFSNP[JMMBPSHEPDT8FC+BWB4DSJQU3FGFSFODFUFNQMBUF@TUSJOHT 1 // ม਺ͷຒΊࠐΈ 2 const sessionCount = 19 3 console.log(`Today, we have ${sessionCount} sessions.`) 4 const name = '@okunokentaro' 5 const message = `next speaker is ${name}.` 6 console.log(message) 7 8 // ෳ਺ߦͷจࣈྻϦςϥϧ 9 const shaderSource = `#version 300 es 10 precision mediump float; 11 in vec4 vColor; 12 out vec4 oFragColor; 13 void main() { 14 oFragColor = vColor; 15 }` 16 17 const thisMayCauseVulnerability = ` 18 SELECT room, startTime 19 FROM sessions 20 WHERE name = ${name} 21 `
20. จࣈྻͷ৽͍͠ϝιου w SFQFBU
    w Ҿ਺ͷจࣈྻΛ܁Γฦͨ͠จࣈྻΛฦ͢
    w TUBSUT8JUIFOET8JUI
    w จࣈྻͷઌ಄຤ඌ͕Ҿ਺ͱҰக͢Δ͔
    w JODMVEFT
    w จࣈྻ͕Ҿ਺ͷจࣈྻΛؚΉ͔Ͳ͏͔
    w QBE4UBSUQBE&OE
    w ࢦఆͷ௕͞·ͰจࣈྻͷલޙΛຒΊΔ
    w USJNUSJN4UBSUUSJN&OE
    w จࣈྻͷʢલޙͷʣۭനΛऔΓআ͘ IUUQTEFWFMPQFSNP[JMMBPSHEPDT8FC+BWB4DSJQU3FGFSFODF(MPCBM@0CKFDUT4USJOH 1 // String.prototype.repeat 2 const pandas = 'panda'.repeat(3) 3 console.log(pandas) // > pandapandapanda 4 5 // String.prototype.startsWith 6 console.log(pandas.startsWith('pa')) // > true 7 8 // String.prototype.endsWith 9 console.log(pandas.endsWith('cat')) // > false 10 11 // String.prototype.includes 12 console.log(pandas.includes('and')) // > true 13 console.log(pandas.includes('ϚαΧϦ')) // > false 14 15 // String.prototype.padStart 16 console.log('panda'.padStart(10)) // > _____panda 17 const number = 123 18 console.log(number.toString().padStart(7, '0')) // > 0000123 19 20 // String.prototype.padEnd 21 console.log(`| ${'label'.padEnd(10)} |`) // > |_label______| 22 23 const dirtyText = ' aaa bbb ' 24 // String.prototype.trim 25 console.log(dirtyText.trim()) // > aaa__bbb 26 27 // String.prototype.trimStart 28 console.log(dirtyText.trimStart()) // > aaa__bbb______ 29 30 // String.prototype.trimEnd 31 console.log(dirtyText.trimEnd()) // > _____aaa__bbb
21. ίϨΫγϣϯͱ܁Γฦ͠
22. "SSBZͷϝιου w NBQ
    w ֤ཁૉʹؔ਺Λద༻ͨ͠഑ྻΛฦ͢
    w pMUFS
    w ৚݅Λຬͨͨ͠ཁૉΛ࢒ͨ͠഑ྻΛฦ͢
    w JODMVEFT
    w ഑ྻ͕Ҿ਺ͷཁૉΛؚΉ͔
    w JOEFY0GΑΓ΋ͪ͜ΒΛ࢖͏
    w pOEpOE*OEFY
    w ࠷ॳʹ৚݅ʹ౰ͯ͸·ΔཁૉఴࣈΛฦ͢ IUUQTEFWFMPQFSNP[JMMBPSHEPDT8FC+BWB4DSJQU3FGFSFODF(MPCBM@0CKFDUT"SSBZ 1 // Array.prototype.map 2 const heroes = [ 3 { id: 11, name: 'Dr Nice' }, 4 { id: 12, name: 'Narco' }, 5 { id: 13, name: 'Bombasto' } 6 ] 7 const names = heroes.map(({ name }) => name) 8 console.log(names) // > [ 'Dr Nice', 'Narco', 'Bombasto' ] 9 10 // Array.prototype.filter 11 const evenHeroes = heroes.filter(({ id }) => id % 2 === 0) 12 console.log(evenHeroes) // > [ { id: 12, name: 'Narco' } ] 13 14 // Array.prototype.includes 15 const name = 'panda' 16 if (names.includes(name)) { 17 console.log(`${name} is a hero`) 18 } else { 19 console.log(`${name} is not a hero`) 20 } 21 // panda is not a hero 22 23 // Array.prototype.find 24 const startsWithB = ({ name }) => name.startsWith('B') 25 const hero = heroes.find(startsWithB) 26 console.log(hero) // > { id: 13, name: 'Bombasto' } 27 28 // Array.prototype.find 29 const index = heroes.findIndex(startsWithB) 30 console.log(index) // > 2
23. .BQͱ4FU w .BQ
    w LFZWBMVFܕͷσʔλߏ଄
    w 0CKFDUͱҧ͍LFZʹΦϒδΣΫτΛ౉ͤΔ
    w 4FU
    w ू߹ܕ
    w ॏෳͷͳ͍ཁૉͷू߹Λද͢
    w ཁૉͷ௥Ճɾ࡟আɺཁૉΛ͔࣋ͭͷ൑ఆ 1 // Map 2 const heroes = new Map() 3 // Mapͷཁૉ௥Ճ 4 heroes.set(11, { name: 'Dr Nice' }) 5 heroes.set(12, { name: 'Narco' }) 6 heroes.set(13, { name: 'Bombasto' }) 7 8 // Mapͷཁૉ਺ 9 console.log(heroes.size) // > 3 10 // Mapͷཁૉऔಘ 11 console.log(heroes.get(11)) // > { name: 'Dr Nice' } 12 // Mapͷॴ༗֬ೝ 13 console.log(heroes.has(12)) // > true 14 // Mapͷཁૉ࡟আ 15 heroes.delete(12) 16 console.log(heroes.has(12)) // > false 17 18 // Set 19 const favoriteLanguages = new Set() 20 // Setͷཁૉ௥Ճ 21 favoriteLanguages.add('Rust') 22 favoriteLanguages.add('TypeScript') 23 favoriteLanguages.add('Rust') 24 // Setͷཁૉ਺ 25 console.log(favoriteLanguages.size) // > 2 26 // Setͷॴ༗֬ೝ 27 console.log(favoriteLanguages.has('Rust')) // > true 28 console.log(favoriteLanguages.has('JavaScript')) // > false 29 // Setͷཁૉ࡟আ 30 favoriteLanguages.delete('TypeScript') 31 console.log(favoriteLanguages.size) // > 1 IUUQTEFWFMPQFSNP[JMMBPSHEPDT8FC+BWB4DSJQU3FGFSFODF(MPCBM@0CKFDUT4FU IUUQTEFWFMPQFSNP[JMMBPSHEPDT8FC+BWB4DSJQU3FGFSFODF(MPCBM@0CKFDUT.BQ
24. ൓෮ՄೳΦϒδΣΫτ w ཁૉʹॱ൪ʹΞΫηεͰ͖ΔΦϒδΣΫτΛ ந৅Խͨ͠΋ͷʢ*UFSBCMFʣ
    w ΠςϨʔλϓϩτίϧΛ࣮૷͍ͯ͠Δ
    w "SSBZɺ0CKFDUɺ4USJOHɺ.BQɺ4FUɺ LFZTWBMVFTFOUSJFTͷ໭Γ஋ɺ/PEF-JTU౳ IUUQTEFWFMPQFSNP[JMMBPSHEPDT8FC+BWB4DSJQU3FGFSFODF*UFSBUJPO@QSPUPDPMT 1 // ൓෮ՄೳΦϒδΣΫτ͔ΒSetΛ࡞Δ 2 const charSet = new Set('onoue') 3 console.log(charSet) // > 4 5 // ൓෮ՄೳΦϒδΣΫτ͔Β഑ྻΛ࡞Δ 6 const charArray = Array.from(charSet) 7 console.log(charArray) 8 9 // [k1, v1], [k2, v2], ...ͷܗࣜͷ൓෮ՄೳΦϒδΣΫτ͔ΒMapΛ࡞Δ 10 const sessions = [{ speaker: '@likr' }, { speaker: '@okunokentaro' }] 11 const finished = new Map(sessions.map((s) => [s, false])) 12 13 // Mapͷ஋ͷ൓෮ՄೳΦϒδΣΫτ 14 console.log(Array.from(finished.keys())) 15 16 // MapͷΩʔͷ൓෮ՄೳΦϒδΣΫτ 17 console.log(new Set(finished.values())) 18 19 // querySelectorAllͷ໭Γ஋ʢNodeListʣ΋൓෮ՄೳΦϒδΣΫτ 20 const elements = document.querySelectorAll('option:selected') 21 // NodeList͸഑ྻ͡Όͳ͍ͨΊmapϝιουΛ࣋ͨͳ͍ 22 console.log(elements.map) // > undefined 23 // Array.fromͰ഑ྻʹม׵͔ͯ͠Βmap͢Δ 24 const checkedItems = Array.from(elements).map((e) => e.value)
25. GPSɺGPSJOɺGPSPG w GPS
    w $ݴޠελΠϧͷGPS
    w GPSJO
    w ΦϒδΣΫτͷϓϩύςΟ໊ΛॱʹऔΓग़ ͢
    w GPSPG
    w ΠςϨʔλͷཁૉΛॱʹऔΓग़͢
    w Ͱ͖Δ͚ͩGPSPGɺGPSJOΛ࢖͏ 1 // for 2 const editions = ['es1', 'es2', 'es3', 'es5', 'es2015'] 3 // Χ΢ϯλม਺͸letͰએݴ͢Δඞཁ͕͋Δ 4 for (let i = 0; i < editions.length; ++i) { 5 console.log(editions[i]) 6 } 7 8 // for-in 9 // ఴࣈ͕ॱ൪ʹiʹ୅ೖ͞ΕΔ 10 for (const i in editions) { 11 console.log(editions[i]) 12 } 13 const session = { speaker: '@_likr', room: 'B5', start: '11:00' } 14 // ϓϩύςΟ໊͕ॱ൪ʹpropertyʹ୅ೖ͞ΕΔ 15 for (const property in session) { 16 console.log(`${property}:${session[property]}`) 17 } 18 19 // for-of 20 // ཁૉ͕ॱ൪ʹiʹ୅ೖ͞ΕΔ 21 for (const edition of editions) { 22 console.log(edition) 23 } 24 25 // ofͷӈଆʹ͸൓෮ՄೳΦϒδΣΫτΛͱΔ͜ͱ͕Ͱ͖Δ 26 const primes = new Set([2, 3, 5, 7, 11]) 27 for (const prime of primes) { 28 console.log(prime) 29 } 30 const elements = document.querySelectorAll('option') 31 for (const element of elements) { 32 element.selected = true 33 } IUUQTEFWFMPQFSNP[JMMBPSHEPDT8FC+BWB4DSJQU3FGFSFODF4UBUFNFOUTGPS IUUQTEFWFMPQFSNP[JMMBPSHEPDT8FC+BWB4DSJQU3FGFSFODF4UBUFNFOUTGPSJO IUUQTEFWFMPQFSNP[JMMBPSHEPDT8FC+BWB4DSJQU3FGFSFODF4UBUFNFOUTGPSPG
26. ඇಉظॲཧ
27. ඇಉظॲཧͱ͸ʁ w ωοτϫʔΫ͔ΒͷσʔλऔಘɺϑΝΠϧͷಡΈࠐΈͳͲ
    ࣌ؒͷ͔͔Δʢ਺ϛϦඵʣॲཧΛ଴ͭؒʹଞͷॲཧΛ͢Δ
    w ϒϥ΢βͷඳըεϨουΛ઎༗͠ͳ͍ͨΊͷ޻෉
    w Ϟμϯͳ8FCϑϩϯτΤϯυ։ൃʹ͸ඞਢͷ஌ࣝ
28. 1SPNJTF w ඇಉظॲཧͷجຊ୯Ґ
    w 1SPNJTFΛ࡞Δ
    w ඇಉظॲཧ͕ऴΘͬͨΒҾ਺ͷίʔϧόο Ϋؔ਺Λݺͼग़͢Α͏ͳؔ਺Λ࡞Δ
    w 1SPNJTFΛ࢖͏
    w UIFODBUDIʹඇಉظॲཧͷ੒ޭ ʢSFTPMWFʣ·ͨ͸ࣦഊʢSFKFDUʣ࣌ͷॲཧ Λؔ਺ͱͯ͠౉͢
    w UIFO಺Ͱฦͨ݁͠Ռ΋1SPNJTFʹͳΔ
    w GFUDI΍*OEFYFE%#ͳͲͰΑ͘࢖͏ 1 // 1ඵ଴͚ͭͩͷPromise 2 const delay = new Promise((resolved) => { 3 // ඇಉظॲཧͷத਎ 4 setInterval(resolved, 1000) // ੒ޭͨ͠ΒresolvedΛݺͼग़͢ 5 }) 6 console.log(Date.now()) // > 1572645512905 7 delay.then(() => { 8 console.log(Date.now()) // > 1572645513906 9 }) 10 console.log(Date.now()) // > 1572645512905 11 12 // fetchͰWeb API͔ΒσʔλΛऔಘ͢Δ 13 // fetchͷ໭Γ஋͸Promise 14 const url = 'https://dog.ceo/api/breeds/image/random' 15 fetch(url) 16 .then((response) => { 17 // σʔλऔಘޙͷॲཧ 18 return response.json() // response.json()ͷ໭Γ஋͸Promise 19 }) 20 .then((data) => { 21 // JSONม׵ޙͷॲཧ 22 console.log(data) 23 }) 24 25 const invalidUrl = 'https://example.com/kfug2019' 26 fetch(invalidUrl) 27 .then((response) => response.text()) 28 .then((result) => { 29 console.log(result) 30 }) 31 .catch((error) => { 32 // ඇಉظॲཧࣦഊ࣌ͷॲཧ 33 console.log(error) // > TypeError: Failed to fetch 34 }) IUUQTEFWFMPQFSNP[JMMBPSHEPDT8FC+BWB4DSJQU3FGFSFODF(MPCBM@0CKFDUT1SPNJTF
29. BTZODBXBJU w 1SPNJTFΛ࢖͍΍͘͢͢ΔͨΊͷߏจ
    w BTZODΛ͚ͭͨؔ਺಺ͰBXBJU͕࢖͑Δ
    w BXBJUΛ͚ͭͨࣜ͸1SPNJTFͷ໭Γ஋ͱͯ͠ ධՁ͞ΕΔ
    w ݟ্͔͚ͷҧ͍͚ͩͰɺඇಉظॲཧͷಈ͖͸ 1SPNJTFͱಉ͡
    w ॱ൪ʹඇಉظॲཧ͢Δ৔߹͸BTZODBXBJUɺ
    ෳࡶͳ੍ޚॲཧ͡ΌඞཁͳΒ1SPNJTF IUUQTEFWFMPQFSNP[JMMBPSHEPDT8FC+BWB4DSJQU3FGFSFODF4UBUFNFOUTBTZOD@GVODUJPO 1 // secondsඵޙʹresolve͞ΕΔPromiseΛฦؔ͢਺ 2 const delay = (seconds) => { 3 return new Promise((resolved) => { 4 setInterval(resolved, seconds * 1000) 5 }) 6 } 7 8 // asyncؔ਺ͷଈ࣌ݺͼग़͠ 9 ;(async () => { 10 console.log(new Date().getSeconds()) // > 23 11 await delay(1) // delay(1)ͷϓϩϛε͕resolve͞ΕΔͷΛ଴ͭ 12 console.log(new Date().getSeconds()) // > 24 13 await delay(1) // delay(1)ͷϓϩϛε͕resolve͞ΕΔͷΛ଴ͭ 14 console.log(new Date().getSeconds()) // > 25 15 })() 16 17 // url͔ΒJSONܗࣜͰσʔλΛऔಘ͢Δؔ਺ 18 const fetchAsJson = async (url) => { 19 const response = await fetch(url) 20 const data = await response.json() 21 return data 22 } 23 24 const url = 'https://dog.ceo/api/breeds/image/random' 25 // asyncؔ਺ͷ໭Γ஋͸Promise 26 fetchAsJson(url).then((data) => { 27 console.log(data) 28 })
30. Ϟδϡʔϧ
31. Ϟδϡʔϧ w ෳ਺ϑΝΠϧʹ෼ׂ͞ΕͨιʔείʔυΛѻ ͏࢓૊Έ
    w XFCQBDL΍QBSDFMͳͲͷϞδϡʔϧόϯυ ϥʔͰϑΝΠϧʹ݁߹͢Δ৔߹͕ଟ͍
    w 8FCϒϥ΢βࣗ਎ͷϞδϡʔϧରԠ΋ਐΜͰ ͍Δ IUUQTEFWFMPQFSNP[JMMBPSHEPDT8FC+BWB4DSJQU3FGFSFODF4UBUFNFOUTFYQPSU IUUQTEFWFMPQFSNP[JMMBPSHEPDT8FC+BWB4DSJQU3FGFSFODF4UBUFNFOUTJNQPSU 1 // NPMͰΠϯετʔϧͨ͠ύοέʔδ͸ύοέʔδ໊͔ΒͷύεͰࢦఆ͢Δ 2 import React, { useEffect, useState } from 'react' 3 import { render } from 'react-dom' 4 // ࣗ࡞ͷϞδϡʔϧ͸૬ରύεͰࢦఆ͢Δ 5 // default exportͷimport 6 import MyButton from './MyButton.js' 7 // ໊લ෇͖exportͷimport 8 import { fetchMessage } from '../service/api' 9 10 const MyComponent = () => { 11 const [message, setMessage] = useState('') 12 useEffect(() => { 13 fetchMessage().then((message) => setMessage(message)) 14 }) 15 return <MyButton message={message} /> 16 } 1 import React from 'react' 2 import { render } from 'react-dom' 3 4 const MyButton = ({ message }) => { 5 return <button>{message}</button> 6 } 7 8 // default export 9 export default MyButton 1 // ໊લ෇͖export 2 export const fetchMessage = async () => { 3 const response = await fetch('https://example.com/message') 4 return await response.json() 5 } .Z#VUUPOKT TFSWJDFBQJJOEFYKT
32. ͓ΘΓʹ
33. Ϟμϯ+BWB4DSJQUΛ࢖ͬͯྑ͍͔ʁ w ຊηογϣϯͰ঺հͨ͠಺༰͸ɺ*&Ҏ֎ͷϒϥ΢βͰ͸
    ωΠςΟϒαϙʔτ͞Ε͍ͯΔ
    w CBCFM
    
    DPSFKTͰ͋Ε͹*&౳Ͱ΋໰୊ͳ͠
    w CBCFMɿ৽͍͠ه๏Λݹ͍ه๏΁ม׵͢ΔτϥϯεύΠϥ
    w DPSFKTɿݹ͍࢓༷Ͱ଍Γͳ͍ػೳΛิ͏1PMZpMM
    w DPNQBUJCJMJUZ
    UBCMFΛνΣοΫ
    IUUQTLBOHBYHJUIVCJPDPNQBUUBCMFFT
34. ·ͱΊ w Ϟμϯ+BWB4DSJQUͷϙΠϯτΛ͓͞Β͍͠·ͨ͠
    w +BWB4DSJQU͸Ϟμϯͳ8FC։ൃͷجຊͱͳΓ·͢
    w ΑΓৄֶ͘͠ͼ͍ͨਓ͸ҎԼͷαΠτΛࢀরͯ͠Έ͍ͯͩ͘͞
    w IUUQTEFWFMPQFSNP[JMMBPSH
    w IUUQTKTQSJNFSOFU
    w &OKPZ
    8FC
    %FWFMPQNFOU