Riot.js in WPD-Week

Reactがメンドクサイ僕らのためのフロントエンド
「RIOT」
http://peatix.com/event/156859/view

Transcript

1. Tsutomu Kawamura @cognitom Librize LLC / OpenSource Cafe, Shimokitazawa React͕ϝϯυΫαΠ๻ΒͷͨΊͷϑϩϯτΤϯυ
2. cognitom
4. HJUIVCDPNDPHOJUPN
5. ࠓ೔ɺ࿩͢͜ͱ
6. w 3JPUKT
   ͱ͸
   w 3JPUͰίϯϙʔωϯτΛॻ͘
   w ίϯϙʔωϯτ
   
   )5.-෦඼
   w 3JPU
   Λ΋͏গ͠ ΍͍͞͠
   લ൒ ΊΜͲ͍
   ޙ൒ w ࠷ۙͷϑϩϯτΤϯυ͸ɺͳͥ
 ϝϯυΫαΠͷ͔
   w Ͳ͏͢Δ
7. ૝ఆΦʔσΟΤϯε
9. 3JPUKT
   ͱ͸
10. ೥݄
    
    WFS
11. ۙ೔
    
    WFS
12. ࠷΋γϯϓϧͰɺ͍ܰ
    6*ϥΠϒϥϦ
13. খ͍͜͞ͱ͸ɺળ
14. ͚ͬ͜͏ਓؾ
    
    
15. ίΞίϛολʔͷډ৔ॴ
16. Կ͕Ͱ͖Δͷ
17. 3FBDU 1PMZNFS 7VF 3JPU "OHVMBS ʜ 6* 'MVY 3FEVY ΄͔֤छ
    ͋Γ͗͢ ʜ ϑϨʔϜϫʔΫϧʔλ $44 4BTT -&44 #&. 1PTU$44 ʜ $44 3PMMVQ #SPXTFSJGZ 8FC1BDL 4ZTUFN+4 ʜ .PEVMF
    #VOEMFS HVMQ OQN NBLF HSVOU ʜ λεΫϥϯφʔ &4 5ZQF4DSJQU 'MPX $P⒎FF4DSJQU &4 ʜ ݴޠ &YQSFTT -PPQCBDL 3FMBZ ,PB ʜ αʔόαΠυ LBSNB SFDUBOHVMBS OJHIUNBSF ʜ ςετɾMJOU FTMJOU BWB $ZDMFKT
18. 3FBDU 1PMZNFS 7VF 3JPU "OHVMBS ʜ 6* 'MVY 3FEVY ΄͔֤छ
    ͋Γ͗͢ ʜ ϑϨʔϜϫʔΫϧʔλ $44 4BTT -&44 #&. 1PTU$44 ʜ $44 3PMMVQ #SPXTFSJGZ 8FC1BDL 4ZTUFN+4 ʜ .PEVMF
    #VOEMFS HVMQ OQN NBLF HSVOU ʜ λεΫϥϯφʔ &4 5ZQF4DSJQU 'MPX $P⒎FF4DSJQU &4 ʜ ݴޠ &YQSFTT -PPQCBDL 3FMBZ ,PB ʜ αʔόαΠυ LBSNB SFDUBOHVMBS OJHIUNBSF ʜ ςετɾMJOU FTMJOU BWB $ZDMFKT ٕज़ελοΫͷதͷɺίίɻ
19. ίϯϙʔωϯτΛ࡞Ε·͢ <div> <img src=“clear.svg” /> <ul> <li>ۭ΋Α͏: ੖Ε</li> <li>ؾԹ: 10౓</li> <li>࣪౓: 30%</li> </ul> </div> <weather type=“clear” temperature=“10” humidity=“30%” /> ੖Ε 10౓ 30%
20. 3JPUKT
    ͸ͲΜͳਓ޲͚
21. ʮઆ໌ॻಡ·ͳ͍ਓʯ޲͚ )5.-ɾ+4ɾ$44Λɺී௨ʹཧղ͍ͯͯ͠
22. SJPUKTDPNQMBZ ΍ͬͯΈΑ͏
23. 3JPUKT
    ͸ɺ
    طଘٕज़ͰʮίϯϙʔωϯτʯΛ
    ࣮ݱ͢ΔͨΊͷɺ࠷΋γϯϓϧͳ
    Ξϓϩʔνɻ
24. ͑ͬɺίϯϙʔωϯτͬͯ ผ໊ʮΧελϜλάʯ
    ͔͋ͨ΋৽͍͠)5.-ཁૉΛɺ
    ࣗ෼Ͱ޷͖ͳΑ͏ʹఆٛͰ͖ͯ͠·͏ͳʹ͔ɻ
26. 3JPU
    ͰίϯϙʔωϯτΛॻ͘
27. <weather> </weather> HTML JS CSS ఆٛ͢ΔλάͰғΉ͚ͩ weather.tag
28. <weather> <img src=“clear.svg” /> <ul> <li>ۭ΋Α͏: { types[opts.type] }</li> <li>ؾԹ: { opts.temperature }౓</li> <li>࣪౓: { opts.humidity }</li> </ul> <sctipt> this.types = { clear: ‘੖Ε’ } </script> <style scoped> :scope { display: block; } </style> </weather> HTML JS CSS
29. <weather> <img src=“clear.svg” /> <ul> <li>ۭ΋Α͏: { types[opts.type] }</li> <li>ؾԹ: { opts.temperature }౓</li> <li>࣪౓: { opts.humidity }</li> </ul> <sctipt> this.types = { clear: ‘੖Ε’ } </script> <style scoped> :scope { display: block; } </style> </weather> HTML JS CSS ͔͗Γͳ͘ɺ)5.-ͦͷ΋ͷ
30. index.html riot.js weather.tag app.tag ϑΝΠϧߏ੒ ˞΋ͬͱ΋୯७ͳέʔε
31. <html> <body> <weather></weather> <script src=“riot.js”></script> <script src=“weather.tag” type=“tag”></script> <script> riot.mount(‘weather’, { type: ‘clear’, temperature: 10, humidity: ’30%’ }) </script> <body> </body> ௚઀Ϛ΢ϯτ ͜͜ʹϚ΢ϯτ
32. <html> <body> <app></app> <script src=“riot.js”></script> <script src=“app.tag” type=“tag”></script> <script src=“weather.tag” type=“tag”></script> <script> riot.mount(‘app’) </script> <body> </body> ؒ઀Ϛ΢ϯτ <app> <weather type=“clear” temperature=“10” humidity=“30%” /> </app> ΄ͱΜͲɺεΫϦϓτΛॻ͔ͳͯ͘ࡁΉ ͜͜ʹϚ΢ϯτ
33. ίʔμʔͷ෼୲͸Ͳ͏ͳΔͷ
34. ैདྷͷॻ͖ํ
    ਫฏ෼ۀ CSS HTML JS Template Template Template
35. 3JPU
    ͷॻ͖ํ
    ਨ௚౷߹ CSS HTML JS Template Template Template CSS JS CSS JS CSS JS Tag A Tag B Tag C
36. w ෆඞཁʹόϥ͚͍ͯͨ΋ͷ͕ɺͻͱͭʹ
    w )5.-ɾ+4ɾ$44
    ͦΕͧΕཧղ͍ͯ͠Δඞཁ͋Γ
    w #&.Αɺ͞Α͏ͳΒ ੹೚ൣғ͸ʮٕज़ʯͰ͸ͳ͘
    ʮίϯϙʔωϯτʯʹ
38. ίϯϙʔωϯτ
    
    )5.-෦඼
39. <nandemo-iindayo /> <div> </div>
40. )5.-ʹ͓͚Δʮؔ਺ʯ <weather type=“clear” temperature=“10” humidity=“30%” /> <div> <img src=“clear.svg” /> <ul> <li>ۭ΋Α͏: ੖Ε</li> <li>ؾԹ: 10౓</li> <li>࣪౓: 30%</li> </ul> </div> ੖Ε 10౓ 30%
41. ίϯϙʔωϯτ
    㲈
    XFC
    DPNQPOFOUT 8FCඪ४ʹ͢Δಈ͖΋ 3JPU
    3FBDU
    "OHVMBS 1PMZNFS
42. ਖ਼௚ɺ͍ͭʹͳΔ͔෼͔Βͳ͍
43. ίϯϙʔωϯτ
    WT
    ςϯϓϨʔτ
44. ίϯϙʔωϯτ ςϯϓϨʔτ )5.-΁ͷม਺ຒΊࠐΈ :&4 :&4 ΧελϜλάͱͯ͠ৼΔ෣͏ :&4 /0 ϏϡʔϩδοΫ
    ϏϡʔͷϦΞϧλΠϜมߋ :&4 /0 ϏδωεϩδοΫ /0 /0 ίϯϙʔωϯτ
    WT
    ςϯϓϨʔτ ॻ͍ͪΌμϝ
45. “Templates separate technologies, not concerns.” ʮςϯϓϨʔτ͕੾Γ෼͚͍ͯͨͷ͸ɺ
    ໰୊͡Όͳٕͯ͘ज़ͩʯ CZ
    'BDFCPPLͷதͷਓ
46. Ϗϡʔ ϏδωεϩδοΫ ϏϡʔϩδοΫ Ϗϡʔ ϏδωεϩδοΫ ϏϡʔϩδοΫ ίϯϙʔωϯτ ςϯϓϨʔτ
47. ίϯϙʔωϯτ
    WT
    K2VFSZ
48. ίϯϙʔωϯτ
    WT
    K2VFSZ )5.-͕ඳը͞ΕΔ Πϕϯτ͕ى͖Δ )5.-͕ඳը͞ΕΔ K2VFSZͰॻ͖׵͑Δ Πϕϯτ͕ى͖Δ
49. ίϯϙʔωϯτ K2VFSZ )5.-ͷѻ͍ એݴత
    ॻ͍ͨ·Μ· ࠩ෼Λૢ࡞
 Ͳ͏ม͑Δ͔ σʔλͷྲྀΕ σʔλˠϏϡʔ
    جຊతʹ͸ ͪ͝Όͪ͝Ό ίϯϙʔωϯτ
    WT
    K2VFSZ
51. 3JPU
    Λ΋͏গ͠
52. ܁Γฦ͠ͱσʔλ <ul> <li>Apple</li> <li>Orange</li> <li>Banana</li> </ul> <ul> <li each={ fruits }>{ name }</li> </ul> <script> this.fruits = [ { name: ‘Apple’ }, { name: ‘Orange’ }, { name: ‘Banana’ } ] </script>
53. Πϕϯτϋϯυϥ <input value={ username } onchange={ change }> <script> this.username = ‘MEGANE’ this.change = e => { username = e.target.value } </script>
54. 4DPQFE
    $44 <p>WP-D Week</p> <style scoped> :scope { /* ίϯϙʔωϯτͦͷ΋ͷͷελΠϧ */ } p { /* ίϯϙʔωϯτ಺ͷpλάͷΈʹ༗ޮ */ } </style>
55. ͋ͱ͸ɺυΩϡϝϯτݟͯ
57. ࠷ۙͷϑϩϯτΤϯυ͸
    ͳͥϝϯυΫαΠͷ͔
58. ϑϩϯτΤϯυ͕೉͍͠ +BWB4DSJQU
    ͕೉͍͠
59. ೉͠͞⁞ จ๏͕ɺ׬શʹϕπϞϊ
60. ʮͳʜԿΛݴ͍ͬͯΔͷ͔
    ɹΘ͔ΒͶʔͱࢥ͏͕ɺ
 ɹ͓Ε΋ԿΛ͞Εͨͷ͔Θ͔Βͳ͔ͬͨʯ
61. map(), reduce(), forEach(), some()… for (of), Object.keys() Promise().then() function* (), yield, async/await const, let, { foo, bar } import foo from ‘foo’, export default foo ͳʹ͜ͷ֎ࠃޠ
62. ೉͠͞  ςετͱ͔ɺλεΫͱ͔
63. λεΫϥϯφʔ ςετ
    
    Ϧϯλʔ ͦͷଞʜ
64. ೉͠͞⁠ OQN
    ͱ
    Ϟδϡʔϧ
65. ໿ສ
    ύοέʔδ
66. import add from ‘./add’ const x = add(1, 2) export default function add (a, b) { return a + b } ผϑΝΠϧ͔Β
    ಡΈࠐΊΔ
67. ೉͠͞⁡ ϙϦϑΟϧ
    ͱ
    ίϯύΠϧ όϯυϧ
68. #BCFM #BCFM #BCFM #BCFM #BCFM &4
    &4 &4 &4 $ISPNF 4BGBSJ 'JSFGPY &EHF /PEF ϙϦϑΟϧ ࣮૷લʹػೳΛઌऔΓ
69. ίϯύΠϧ
70. ͓͢͢Ί όϯυϥʔɺ͍Ζ͍Ζɻ
72. ೉͠͞⁢ Կʹ੝Γ্͕ͬͯΔͷ͔
    Θ͔ΒͶ͑
73. ൙ཞ͢ΔμΠΞάϥϜɺ
    ܁Γ޿͛ΒΕΔۭதઓ
74. ੍࣌ΛखʹೖΕͭͭ͋Δ
    +BWB4DSJQU ࠓேͷ෉්ͷձ࿩͔Β
75. چੈքͷ+BWB4DSJQU͸ɺ
    ΋͏๨Ε͍ͯͩ͘͞ɻ ΋͏·ͬͨ͘ผͷݴޠͰ͢ɻ ʮͨ͠ͳΈʯͱ͔ʮখखઌʯͰͲ͏ʹ͔ͳΔ΋ͷͰ͸ͳ͘ͳΓ·ͨ͠ɻ
76. ͋Δ͍͸ʜ
 ·ͱ΋ͳϓϩάϥϜݴޠͱͯ͠ɺ
    ࢖ΘΕΔΑ͏ʹͳͬͨɻ
78. Ͳ͏͢Δ
79. બ୒ࢶ⁞ มԽΛɺָ͠Ή ڧ͍ͯݴ͑͹ʮΦΠϥʔͷެࣜʯ͕
    ൃݟ͞Ε͔ͨͷΑ͏ͳ໘ന͕͞ɺ
    ࠓͷ+BWB4DSJQUʹ͸͋Δ
80. બ୒ࢶ  ͦͬͱด͡Δ ṷ͸ṷ԰ɻख͸ग़͞ͳ͍ɻ
    ೥ޙ͘Β͍ʹɺ΋͏Ұ౓ݟʹདྷΔΑɻ
81. બ୒ࢶ⁠ ద౓ͳڑ཭ײͰ ϑϩϯτͷɺϏϡʔ͚ͩʹݶఆ͢Δɻ
    K2VFSZఔ౓ͷڑ཭ײͰ઀͢Δɻ
82. 3JPU
    ͸ɺ
    ʮϑϩϯτ͚ͩ΍Δʯ
    ͱ͍͏બ୒ࢶΛఏڙͯ͘͠ΕΔ ʹϑϧελοΫʹͳΓ͗͢ͳ͍
84. 5IBOL
    ZPV ࣭໰ΛͲ͏ͧ