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

Riot.js in WPD-Week

2be94635664f02d169e343e4024f0ad5?s=47 Tsutomu Kawamura
April 15, 2016
Programming
19
10k

Riot.js in WPD-Week

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

2be94635664f02d169e343e4024f0ad5?s=128

Tsutomu Kawamura

April 15, 2016
Tweet

More Decks by Tsutomu Kawamura

See All by Tsutomu Kawamura
2be94635664f02d169e343e4024f0ad5?s=48 cognitom
0
60
2be94635664f02d169e343e4024f0ad5?s=48 cognitom
5
1k
2be94635664f02d169e343e4024f0ad5?s=48 cognitom
0
93
2be94635664f02d169e343e4024f0ad5?s=48 cognitom
1
720
2be94635664f02d169e343e4024f0ad5?s=48 cognitom
0
260
2be94635664f02d169e343e4024f0ad5?s=48 cognitom
7
3.4k
2be94635664f02d169e343e4024f0ad5?s=48 cognitom
2
760
2be94635664f02d169e343e4024f0ad5?s=48 cognitom
4
550
2be94635664f02d169e343e4024f0ad5?s=48 cognitom
1
510

Other Decks in Programming

See All in Programming
3331499a8c17bf14833f22b9173223f1?s=48 hanakla
2
3k
7eca3e06edc3c69004aaf57de51900c2?s=48 ajstarks
2
550
1787c980f779b663dcd86ffcdc120044?s=48 yshrsmz
1
450
2102a6b8760bd6f57f672805723dd83a?s=48 line_developers_tw
0
410
E473e5af1263c050599921981db46068?s=48 akatsukinewgrad
0
160
Ca91df01df9ee53c57b8c5a81aeec889?s=48 kazuki19992
0
440
0f50b010cc99988fba8a73008b21f353?s=48 e10dokup
0
440
347a1b64f3a6e38981bc99b53919e2b1?s=48 azdaroth
0
120
6a87c9bfc71c805c3f5f248b359365d3?s=48 mu2in
0
140
E505897a79eede1a676f92740261e8f8?s=48 kubode
0
180
08e4449e96aefe61269704f8ba28bc2e?s=48 atskimura
0
290
4047c64e3a1e2f81addd4ba675ddc451?s=48 zsmb
1
120

Featured

See All Featured
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
17
1.8k
Bfd6b681ec6e8c9bef82ff0521c364f7?s=48 kastner
54
1.9k
9375a9529679f1b42b567a640d775e7d?s=48 schacon
145
6.6k
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
347
20k
D67fff74178013024d833b3eec6cf27f?s=48 lynnandtonic
270
16k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
100
11k
8ec1383b240b5ba15ffb9743fceb3c0e?s=48 philnash
8
490
Ae14cc4491ac334f9cd23f9f93b4305e?s=48 orderedlist
PRO
329
35k
2bb923c57a1fdc3a2eb484bb8d565fd2?s=48 ufuk
56
5.4k
A16eb159db895e3b01d3dc95767ad595?s=48 jonyablonski
14
1.1k
C7393b7ba7ec9c8890dd77d209fbb3c9?s=48 maltzj
500
36k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
119
16k

Transcript

  1. Tsutomu Kawamura @cognitom Librize LLC / OpenSource Cafe, Shimokitazawa React͕ϝϯυΫαΠ๻ΒͷͨΊͷϑϩϯτΤϯυ

  2. cognitom

  3. None

  4. HJUIVCDPNDPHOJUPN

  5. ࠓ೔ɺ࿩͢͜ͱ

  6. w 3JPUKTͱ͸ w 3JPUͰίϯϙʔωϯτΛॻ͘ w ίϯϙʔωϯτ)5.-෦඼ w 3JPUΛ΋͏গ͠ ΍͍͞͠ લ൒

    ΊΜͲ͍ ޙ൒ w ࠷ۙͷϑϩϯτΤϯυ͸ɺͳͥ
 ϝϯυΫαΠͷ͔  w Ͳ͏͢Δ

  7. ૝ఆΦʔσΟΤϯε

  8. None

  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.-ཁૉΛɺ ࣗ෼Ͱ޷͖ͳΑ͏ʹఆٛͰ͖ͯ͠·͏ͳʹ͔ɻ

  25. None

  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 #&.Αɺ͞Α͏ͳΒ ੹೚ൣғ͸ʮٕज़ʯͰ͸ͳ͘ ʮίϯϙʔωϯτʯʹ

  37. None

  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. ίϯϙʔωϯτ㲈XFCDPNQPOFOUT 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. ίϯϙʔωϯτWTK2VFSZ

  48. ίϯϙʔωϯτWTK2VFSZ )5.-͕ඳը͞ΕΔ Πϕϯτ͕ى͖Δ )5.-͕ඳը͞ΕΔ K2VFSZͰॻ͖׵͑Δ Πϕϯτ͕ى͖Δ

  49. ίϯϙʔωϯτ K2VFSZ )5.-ͷѻ͍ એݴత ॻ͍ͨ·Μ· ࠩ෼Λૢ࡞
 Ͳ͏ม͑Δ͔ σʔλͷྲྀΕ σʔλˠϏϡʔ جຊతʹ͸

    ͪ͝Όͪ͝Ό ίϯϙʔωϯτWTK2VFSZ
  50. None

  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. ͋ͱ͸ɺυΩϡϝϯτݟͯ

  56. None

  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. ͓͢͢Ί όϯυϥʔɺ͍Ζ͍Ζɻ

  71. None

  72. ೉͠͞⁢ Կʹ੝Γ্͕ͬͯΔͷ͔ Θ͔ΒͶ͑

  73. ൙ཞ͢ΔμΠΞάϥϜɺ ܁Γ޿͛ΒΕΔۭதઓ

  74. ੍࣌ΛखʹೖΕͭͭ͋Δ +BWB4DSJQU ࠓேͷ෉්ͷձ࿩͔Β

  75. چੈքͷ+BWB4DSJQU͸ɺ ΋͏๨Ε͍ͯͩ͘͞ɻ ΋͏·ͬͨ͘ผͷݴޠͰ͢ɻ ʮͨ͠ͳΈʯͱ͔ʮখखઌʯͰͲ͏ʹ͔ͳΔ΋ͷͰ͸ͳ͘ͳΓ·ͨ͠ɻ

  76. ͋Δ͍͸ʜ
 ·ͱ΋ͳϓϩάϥϜݴޠͱͯ͠ɺ ࢖ΘΕΔΑ͏ʹͳͬͨɻ

  77. None

  78. Ͳ͏͢Δ

  79. બ୒ࢶ⁞ มԽΛɺָ͠Ή ڧ͍ͯݴ͑͹ʮΦΠϥʔͷެࣜʯ͕ ൃݟ͞Ε͔ͨͷΑ͏ͳ໘ന͕͞ɺ ࠓͷ+BWB4DSJQUʹ͸͋Δ

  80. બ୒ࢶ  ͦͬͱด͡Δ ṷ͸ṷ԰ɻख͸ग़͞ͳ͍ɻ ೥ޙ͘Β͍ʹɺ΋͏Ұ౓ݟʹདྷΔΑɻ

  81. બ୒ࢶ⁠ ద౓ͳڑ཭ײͰ ϑϩϯτͷɺϏϡʔ͚ͩʹݶఆ͢Δɻ K2VFSZఔ౓ͷڑ཭ײͰ઀͢Δɻ

  82. 3JPU͸ɺ ʮϑϩϯτ͚ͩ΍Δʯ ͱ͍͏બ୒ࢶΛఏڙͯ͘͠ΕΔ ʹϑϧελοΫʹͳΓ͗͢ͳ͍

  83. None

  84. 5IBOLZPV ࣭໰ΛͲ͏ͧ