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

ඌ্༸հ Ϟμϯ+BWB4DSJQU࠶ೖ໳ '30/5&/%$0/'&3&/$& ೥݄೔

ࣗݾ঺հ w ඌ্༸հ :PTVLF0OPVF w ೔ຊେֶจཧֶ෦৘ใՊֶՊ।ڭत w גࣜձࣾఇࠃσʔλόϯΫ٬һݚڀһ w
8FCٕज़͕޷͖Ͱ͢ IUUQTUXJUUFSDPN@MJLS 'PMMPX.F IUUQTWETMBCKQ

͓ئ͍ w $PNNFOU4DSFFOΛ࢖༻͍ͯ͠·͢ IUUQTDPNNFOUTDSFFODPN w #ͰπΠʔτ͢ΔͱεΫϦʔϯʹྲྀΕ·͢ w ʮGSPOULBOTBJ#ʯͰπΠʔτ͍ͯͩ͘͠͞ w ࣭໰ɺฉ͖͍ͨ͜ͱͳͲؾܰʹͲ͏ͧʂ

Կނ+BWB4DSJQUΛֶͿ͔ʁ w ຊ֨తͳ41"։ൃ͕Ͱ͖ΔΑ͏ʹͳΔ w ύϑΥʔϚϯεͳͲͷར఺͕ೝ஌͞ΕྲྀΑ͏ʹͳͬͨ w ϞμϯͳπʔϧɾϑϨʔϜϫʔΫͷυΩϡϝϯτΛಡΊΔ w ৽͍͠πʔϧʹ͸৽͍ٕ͠ज़͕औΓೖΕΒΕ͍ͯΔ w
ྲྀߦΓʹྲྀ͞Εͳ͍جຊ͕਎ʹ෇͘ w πʔϧ͕มΘͬͯ΋௨༻͢ΔྗΛ͚ͭΔ

ຊηογϣϯͷ໨ඪ w +BWB4DSJQUΛ৽ֶ͘͠ͼ͍ͨਓɺݹ͍஌ࣝΛΞοϓσʔτͨ͠ ͍ਓ͕Ϟμϯ+BWB4DSJQUͷΩʔϫʔυΛΩϟονΞοϓ͢Δ w ϝδϟʔͳ8FCϑϩϯτΤϯυϑϨʔϜϫʔΫ ʢ"OHVMBSɺ3FBDUɺ7VFʣͷνϡʔτϦΞϧɾαϯϓϧΛ ಡΈਐΊΒΕΔ஌ࣝΛ͚ͭΔ ˞+BWB4DSJQUಛ༗ͷ෦෼Λத৺ʹ࿩͢ͷͰɺ ɹϓϩάϥϛϯάࣗମ͸େମΘ͔Δલఏʹ͍ͤͯͩ͘͞͞

ຊηογϣϯͰ࿩͢͜ͱɾ࿩͞ͳ͍͜ͱ w ࿩͢͜ͱ w Ϟμϯ+BWB4DSJQUͰ41"Λ࡞Δ্Ͱඞཁͳ࠷খݶͷ஌ࣝ w ࿩͞ͳ͍͜ͱ w σΟʔϓͳ࿩ɺྺ࢙తࣄ৘ͱ͔ w
ಛఆͷϑϨʔϜϫʔΫɺ+BWB4DSJQUΛॻͨ͘Ίͷπʔϧͷ࿩

ΦϒδΣΫτͱม਺

جຊతͳΦϒδΣΫτ 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 })

ม਺ͷએݴ 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'

ΦϒδΣΫτͷॳظԽͱ෼ׂ୅ೖ w TIPSUIBOEQSPQFSUJFT w ஋͕ϓϩύςΟ໊ͱಉ͡ม਺໊ͷͱ͖ ஋ͷ෦෼ΛলུͰ͖Δ w DPNQVUFEQSPQFSUJFT w ϓϩύςΟ໊Λม਺Ͱࢦఆ͢Δ
w ෼ׂ୅ೖʢEFTUSVDUVSJOHBTTJHONFOUʣ w ഑ྻ΍ΦϒδΣΫτ͔ΒҰ෦ͷ஋ΛऔΔ w SFTUQBSBNFUFST 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

Ξϩʔؔ਺ 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

Ϋϥε

Ϋϥεʢʣ 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

Ϋϥεʢʣ 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) // > ϥʔϝϯϚϯ

৚݅෼ذ

৚݅෼ذͱਅِ஋ 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

จࣈྻ

ςϯϓϨʔτϦςϥϧʢςϯϓϨʔτจࣈྻʣ 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 `

จࣈྻͷ৽͍͠ϝιου 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

ίϨΫγϣϯͱ܁Γฦ͠

"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

.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

൓෮ՄೳΦϒδΣΫτ 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)

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

ඇಉظॲཧ

ඇಉظॲཧͱ͸ʁ w ωοτϫʔΫ͔ΒͷσʔλऔಘɺϑΝΠϧͷಡΈࠐΈͳͲ ࣌ؒͷ͔͔Δʢ਺ϛϦඵʣॲཧΛ଴ͭؒʹଞͷॲཧΛ͢Δ w ϒϥ΢βͷඳըεϨουΛ઎༗͠ͳ͍ͨΊͷ޻෉ w Ϟμϯͳ8FCϑϩϯτΤϯυ։ൃʹ͸ඞਢͷ஌ࣝ

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

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 })

Ϟδϡʔϧ

Ϟδϡʔϧ 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

͓ΘΓʹ

Ϟμϯ+BWB4DSJQUΛ࢖ͬͯྑ͍͔ʁ w ຊηογϣϯͰ঺հͨ͠಺༰͸ɺ*&Ҏ֎ͷϒϥ΢βͰ͸ ωΠςΟϒαϙʔτ͞Ε͍ͯΔ w CBCFM DPSFKTͰ͋Ε͹*&౳Ͱ΋໰୊ͳ͠ w CBCFMɿ৽͍͠ه๏Λݹ͍ه๏΁ม׵͢ΔτϥϯεύΠϥ w
DPSFKTɿݹ͍࢓༷Ͱ଍Γͳ͍ػೳΛิ͏1PMZpMM w DPNQBUJCJMJUZUBCMFΛνΣοΫ IUUQTLBOHBYHJUIVCJPDPNQBUUBCMFFT

·ͱΊ w Ϟμϯ+BWB4DSJQUͷϙΠϯτΛ͓͞Β͍͠·ͨ͠ w +BWB4DSJQU͸Ϟμϯͳ8FC։ൃͷجຊͱͳΓ·͢ w ΑΓৄֶ͘͠ͼ͍ͨਓ͸ҎԼͷαΠτΛࢀরͯ͠Έ͍ͯͩ͘͞ w IUUQTEFWFMPQFSNP[JMMBPSH w
IUUQTKTQSJNFSOFU w &OKPZ8FC%FWFMPQNFOU

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

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

Yosuke Onoue

More Decks by Yosuke Onoue

Other Decks in Programming

Featured

Transcript

ඌ্༸հ Ϟμϯ+BWB4DSJQU࠶ೖ໳ '30/5&/%$0/'&3&/$& ೥݄೔

ࣗݾ঺հ w ඌ্༸հ :PTVLF0OPVF w ೔ຊେֶจཧֶ෦৘ใՊֶՊ।ڭत w גࣜձࣾఇࠃσʔλόϯΫ٬һݚڀһ w

͓ئ͍ w $PNNFOU4DSFFOΛ࢖༻͍ͯ͠·͢ IUUQTDPNNFOUTDSFFODPN w #ͰπΠʔτ͢ΔͱεΫϦʔϯʹྲྀΕ·͢ w ʮGSPOULBOTBJ#ʯͰπΠʔτ͍ͯͩ͘͠͞ w ࣭໰ɺฉ͖͍ͨ͜ͱͳͲؾܰʹͲ͏ͧʂ

Կނ+BWB4DSJQUΛֶͿ͔ʁ w ຊ֨తͳ41"։ൃ͕Ͱ͖ΔΑ͏ʹͳΔ w ύϑΥʔϚϯεͳͲͷར఺͕ೝ஌͞ΕྲྀΑ͏ʹͳͬͨ w ϞμϯͳπʔϧɾϑϨʔϜϫʔΫͷυΩϡϝϯτΛಡΊΔ w ৽͍͠πʔϧʹ͸৽͍ٕ͠ज़͕औΓೖΕΒΕ͍ͯΔ w

ຊηογϣϯͰ࿩͢͜ͱɾ࿩͞ͳ͍͜ͱ w ࿩͢͜ͱ w Ϟμϯ+BWB4DSJQUͰ41"Λ࡞Δ্Ͱඞཁͳ࠷খݶͷ஌ࣝ w ࿩͞ͳ͍͜ͱ w σΟʔϓͳ࿩ɺྺ࢙తࣄ৘ͱ͔ w

ΦϒδΣΫτͱม਺

جຊతͳΦϒδΣΫτ w ਺஋ɿ/VNCFS w ੔਺ͱ࣮਺ͷ۠ผ͸ͳ͍ w େ͖͍੔਺஋ͷͨΊʹ#JH*OU͕ಋೖ༧ఆ w จࣈྻɿ4USJOH w

ม਺ͷએݴ w DPOTU w ม਺΁ͷ୅ೖ͕Ͱ͖ͳ͍ w ΦϒδΣΫτͷத਎ͷมߋ͸Մೳ w MFU w

ΦϒδΣΫτͷॳظԽͱ෼ׂ୅ೖ w TIPSUIBOEQSPQFSUJFT w ஋͕ϓϩύςΟ໊ͱಉ͡ม਺໊ͷͱ͖ ஋ͷ෦෼ΛলུͰ͖Δ w DPNQVUFEQSPQFSUJFT w ϓϩύςΟ໊Λม਺Ͱࢦఆ͢Δ

ؔ਺

Ξϩʔؔ਺ w ؔ਺ͷ࡞੒ w +BWB4DSJQUͷؔ਺͸ୈҰڃΦϒδΣΫτ w ม਺΁ͷ୅ೖ΍ɺؔ਺΁ͷड͚౉͕͠Մೳ w ؔ਺Λड͚औΔؔ਺ w

Ϋϥε

Ϋϥεʢʣ w Ϋϥεͷఆٛ w ϑϨʔϜϫʔΫ౳ͷίϯϙʔωϯτʹར༻ w "OHVMBSɺ$VTUPN&MFNFOUT w DPOTUSVDUPS͸ίϯετϥΫλ༻ͷ໊લ w

Ϋϥεʢʣ w FYUFOETʹΑΔΫϥεͷܧঝ w TVQFSͰ਌ΫϥεͷίϯετϥΫλݺͼग़͠ w HFUUFSTFUUFSͷఆٛ w TUBUJDʹΑΔΫϥεϝιουͷఆٛ w

৚݅෼ذ

৚݅෼ذͱਅِ஋ w $ݴޠελΠϧͷJGจ w ࣜͱͯ͠࢖͍͍ͨ৔߹͸৚݅ԋࢉࢠ w ౳Ձԋࢉ͸ݪଇɺ w OVMMνΣοΫ͸ɺ

จࣈྻ

ςϯϓϨʔτϦςϥϧʢςϯϓϨʔτจࣈྻʣ w จࣈྻதʹࣜΛల։Ͱ͖Δ w ෳ਺ߦͷจࣈྻ͕ॻ͖΍͍͢ IUUQTEFWFMPQFSNP[JMMBPSHEPDT8FC+BWB4DSJQU3FGFSFODFUFNQMBUF@TUSJOHT 1 // ม਺ͷຒΊࠐΈ 2

จࣈྻͷ৽͍͠ϝιου w SFQFBU w Ҿ਺ͷจࣈྻΛ܁Γฦͨ͠จࣈྻΛฦ͢ w TUBSUT8JUIFOET8JUI w จࣈྻͷઌ಄຤ඌ͕Ҿ਺ͱҰக͢Δ͔ w

ίϨΫγϣϯͱ܁Γฦ͠

"SSBZͷϝιου w NBQ w ֤ཁૉʹؔ਺Λద༻ͨ͠഑ྻΛฦ͢ w pMUFS w ৚݅Λຬͨͨ͠ཁૉΛ࢒ͨ͠഑ྻΛฦ͢ w

.BQͱ4FU w .BQ w LFZWBMVFܕͷσʔλߏ଄ w 0CKFDUͱҧ͍LFZʹΦϒδΣΫτΛ౉ͤΔ w 4FU w

൓෮ՄೳΦϒδΣΫτ w ཁૉʹॱ൪ʹΞΫηεͰ͖ΔΦϒδΣΫτΛ ந৅Խͨ͠΋ͷʢUFSBCMFʣ w ΠςϨʔλϓϩτίϧΛ࣮૷͍ͯ͠Δ w "SSBZɺ0CKFDUɺ4USJOHɺ.BQɺ4FUɺ LFZTWBMVFTFOUSJFTͷ໭Γ஋ɺ/PEF-JTU౳ IUUQTEFWFMPQFSNP[JMMBPSHEPDT8FC+BWB4DSJQU3FGFSFODFUFSBUJPO@QSPUPDPMT

GPSɺGPSJOɺGPSPG w GPS w $ݴޠελΠϧͷGPS w GPSJO w ΦϒδΣΫτͷϓϩύςΟ໊ΛॱʹऔΓग़ ͢

ඇಉظॲཧ

ඇಉظॲཧͱ͸ʁ w ωοτϫʔΫ͔ΒͷσʔλऔಘɺϑΝΠϧͷಡΈࠐΈͳͲ ࣌ؒͷ͔͔Δʢ਺ϛϦඵʣॲཧΛ଴ͭؒʹଞͷॲཧΛ͢Δ w ϒϥ΢βͷඳըεϨουΛ઎༗͠ͳ͍ͨΊͷ޻෉ w Ϟμϯͳ8FCϑϩϯτΤϯυ։ൃʹ͸ඞਢͷ஌ࣝ

1SPNJTF w ඇಉظॲཧͷجຊ୯Ґ w 1SPNJTFΛ࡞Δ w ඇಉظॲཧ͕ऴΘͬͨΒҾ਺ͷίʔϧόο Ϋؔ਺Λݺͼग़͢Α͏ͳؔ਺Λ࡞Δ w 1SPNJTFΛ࢖͏

BTZODBXBJU w 1SPNJTFΛ࢖͍΍͘͢͢ΔͨΊͷߏจ w BTZODΛ͚ͭͨؔ਺಺ͰBXBJU͕࢖͑Δ w BXBJUΛ͚ͭͨࣜ͸1SPNJTFͷ໭Γ஋ͱͯ͠ ධՁ͞ΕΔ w ݟ্͔͚ͷҧ͍͚ͩͰɺඇಉظॲཧͷಈ͖͸

Ϟδϡʔϧ

Ϟδϡʔϧ w ෳ਺ϑΝΠϧʹ෼ׂ͞ΕͨιʔείʔυΛѻ ͏࢓૊Έ w XFCQBDL΍QBSDFMͳͲͷϞδϡʔϧόϯυ ϥʔͰϑΝΠϧʹ݁߹͢Δ৔߹͕ଟ͍ w 8FCϒϥ΢βࣗ਎ͷϞδϡʔϧରԠ΋ਐΜͰ ͍Δ

͓ΘΓʹ

Ϟμϯ+BWB4DSJQUΛ࢖ͬͯྑ͍͔ʁ w ຊηογϣϯͰ঺հͨ͠಺༰͸ɺ&Ҏ֎ͷϒϥ΢βͰ͸ ωΠςΟϒαϙʔτ͞Ε͍ͯΔ w CBCFM DPSFKTͰ͋Ε͹&౳Ͱ΋໰୊ͳ͠ w CBCFMɿ৽͍͠ه๏Λݹ͍ه๏΁ม׵͢ΔτϥϯεύΠϥ w

·ͱΊ w Ϟμϯ+BWB4DSJQUͷϙΠϯτΛ͓͞Β͍͠·ͨ͠ w +BWB4DSJQU͸Ϟμϯͳ8FC։ൃͷجຊͱͳΓ·͢ w ΑΓৄֶ͘͠ͼ͍ͨਓ͸ҎԼͷαΠτΛࢀরͯ͠Έ͍ͯͩ͘͞ w IUUQTEFWFMPQFSNP[JMMBPSH w