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

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

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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. ΦϒδΣΫτͱม਺
   

   View Slide

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

   View Slide

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'
   

   View Slide

10. ΦϒδΣΫτͷॳظԽͱ෼ׂ୅ೖ
    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
    

    View Slide

11. ؔ਺
    

    View Slide

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
    

    View Slide

13. Ϋϥε
    

    View Slide

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
    

    View Slide

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) // >
    27 // getterʹΑΔname΁ͷΞΫηε
    28 console.log(hero.name) // > null
    29 // setterʹΑΔnameͷॻ͖׵͑
    30 hero.name = 'ϥʔϝϯϚϯ'
    31 console.log(hero) // >
    32 console.log(hero.name) // > ϥʔϝϯϚϯ
    

    View Slide

16. ৚݅෼ذ
    

    View Slide

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
    

    View Slide

18. จࣈྻ
    

    View Slide

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 `
    

    View Slide

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
    

    View Slide

21. ίϨΫγϣϯͱ܁Γฦ͠
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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)
    

    View Slide

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
    

    View Slide

26. ඇಉظॲཧ
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

30. Ϟδϡʔϧ
    

    View Slide

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
    16 }
    1 import React from 'react'
    2 import { render } from 'react-dom'
    3
    4 const MyButton = ({ message }) => {
    5 return {message}
    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
    

    View Slide

32. ͓ΘΓʹ
    

    View Slide

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

    View Slide

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

    View Slide