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

Riot.js in WPD-Week

Riot.js in WPD-Week

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

2be94635664f02d169e343e4024f0ad5?s=128

Tsutomu Kawamura

April 15, 2016
Tweet

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 ࣭໰ΛͲ͏ͧ