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

Tsutomu Kawamura

April 15, 2016
Tweet

More Decks by Tsutomu Kawamura

Other Decks in Programming

Transcript

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

    View full-size slide

  2. HJUIVCDPNDPHOJUPN

    View full-size slide

  3. ࠓ೔ɺ࿩͢͜ͱ

    View full-size slide

  4. w 3JPUKTͱ͸
    w 3JPUͰίϯϙʔωϯτΛॻ͘
    w ίϯϙʔωϯτ)5.-෦඼
    w 3JPUΛ΋͏গ͠
    ΍͍͞͠
    લ൒
    ΊΜͲ͍
    ޙ൒
    w ࠷ۙͷϑϩϯτΤϯυ͸ɺͳͥ

    ϝϯυΫαΠͷ͔
    w Ͳ͏͢Δ

    View full-size slide

  5. ૝ఆΦʔσΟΤϯε

    View full-size slide

  6. ࠷΋γϯϓϧͰɺ͍ܰ
    6*ϥΠϒϥϦ

    View full-size slide

  7. খ͍͜͞ͱ͸ɺળ

    View full-size slide

  8. ͚ͬ͜͏ਓؾ

    View full-size slide

  9. ίΞίϛολʔͷډ৔ॴ

    View full-size slide

  10. Կ͕Ͱ͖Δͷ

    View full-size slide

  11. 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

    View full-size slide

  12. 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
    ٕज़ελοΫͷதͷɺίίɻ

    View full-size slide

  13. ίϯϙʔωϯτΛ࡞Ε·͢



    ۭ΋Α͏: ੖Ε
    ؾԹ: 10౓
    ࣪౓: 30%



    ੖Ε
    10౓
    30%

    View full-size slide

  14. 3JPUKT͸ͲΜͳਓ޲͚

    View full-size slide

  15. ʮઆ໌ॻಡ·ͳ͍ਓʯ޲͚
    )5.-ɾ+4ɾ$44Λɺී௨ʹཧղ͍ͯͯ͠

    View full-size slide

  16. SJPUKTDPNQMBZ
    ΍ͬͯΈΑ͏

    View full-size slide

  17. 3JPUKT͸ɺ
    طଘٕज़ͰʮίϯϙʔωϯτʯΛ
    ࣮ݱ͢ΔͨΊͷɺ࠷΋γϯϓϧͳ
    Ξϓϩʔνɻ

    View full-size slide

  18. ͑ͬɺίϯϙʔωϯτͬͯ
    ผ໊ʮΧελϜλάʯ
    ͔͋ͨ΋৽͍͠)5.-ཁૉΛɺ
    ࣗ෼Ͱ޷͖ͳΑ͏ʹఆٛͰ͖ͯ͠·͏ͳʹ͔ɻ

    View full-size slide

  19. 3JPUͰίϯϙʔωϯτΛॻ͘

    View full-size slide



  20. HTML
    JS
    CSS
    ఆٛ͢ΔλάͰғΉ͚ͩ
    weather.tag

    View full-size slide




  21. ۭ΋Α͏: { types[opts.type] }
    ؾԹ: { opts.temperature }౓
    ࣪౓: { opts.humidity }


    this.types = { clear: ‘੖Ε’ }

    <br/>:scope {<br/>display: block;<br/>}<br/>

    HTML
    JS
    CSS

    View full-size slide




  22. ۭ΋Α͏: { types[opts.type] }
    ؾԹ: { opts.temperature }౓
    ࣪౓: { opts.humidity }


    this.types = { clear: ‘੖Ε’ }

    <br/>:scope {<br/>display: block;<br/>}<br/>

    HTML
    JS
    CSS
    ͔͗Γͳ͘ɺ)5.-ͦͷ΋ͷ

    View full-size slide

  23. index.html
    riot.js
    weather.tag
    app.tag
    ϑΝΠϧߏ੒
    ˞΋ͬͱ΋୯७ͳέʔε

    View full-size slide






  24. <br/>riot.mount(‘weather’, {<br/>type: ‘clear’,<br/>temperature: 10,<br/>humidity: ’30%’<br/>})<br/>


    ௚઀Ϛ΢ϯτ
    ͜͜ʹϚ΢ϯτ

    View full-size slide







  25. <br/>riot.mount(‘app’)<br/>


    ؒ઀Ϛ΢ϯτ

    type=“clear”
    temperature=“10”
    humidity=“30%” />

    ΄ͱΜͲɺεΫϦϓτΛॻ͔ͳͯ͘ࡁΉ
    ͜͜ʹϚ΢ϯτ

    View full-size slide

  26. ίʔμʔͷ෼୲͸Ͳ͏ͳΔͷ

    View full-size slide

  27. ैདྷͷॻ͖ํ ਫฏ෼ۀ

    CSS
    HTML
    JS
    Template Template Template

    View full-size slide

  28. 3JPUͷॻ͖ํ ਨ௚౷߹

    CSS
    HTML
    JS
    Template Template Template
    CSS
    JS
    CSS
    JS
    CSS
    JS
    Tag A Tag B Tag C

    View full-size slide

  29. w ෆඞཁʹόϥ͚͍ͯͨ΋ͷ͕ɺͻͱͭʹ
    w )5.-ɾ+4ɾ$44ͦΕͧΕཧղ͍ͯ͠Δඞཁ͋Γ
    w #&.Αɺ͞Α͏ͳΒ
    ੹೚ൣғ͸ʮٕज़ʯͰ͸ͳ͘
    ʮίϯϙʔωϯτʯʹ

    View full-size slide

  30. ίϯϙʔωϯτ)5.-෦඼

    View full-size slide

  31. )5.-ʹ͓͚Δʮؔ਺ʯ




    ۭ΋Α͏: ੖Ε
    ؾԹ: 10౓
    ࣪౓: 30%


    ੖Ε
    10౓
    30%

    View full-size slide

  32. ίϯϙʔωϯτ㲈XFCDPNQPOFOUT
    8FCඪ४ʹ͢Δಈ͖΋
    3JPU
    3FBDU
    "OHVMBS
    1PMZNFS

    View full-size slide

  33. ਖ਼௚ɺ͍ͭʹͳΔ͔෼͔Βͳ͍

    View full-size slide

  34. ίϯϙʔωϯτWTςϯϓϨʔτ

    View full-size slide

  35. ίϯϙʔωϯτ ςϯϓϨʔτ
    )5.-΁ͷม਺ຒΊࠐΈ :&4 :&4
    ΧελϜλάͱͯ͠ৼΔ෣͏ :&4 /0
    ϏϡʔϩδοΫ
    ϏϡʔͷϦΞϧλΠϜมߋ

    :&4 /0
    ϏδωεϩδοΫ /0 /0
    ίϯϙʔωϯτWTςϯϓϨʔτ
    ॻ͍ͪΌμϝ

    View full-size slide

  36. “Templates separate technologies,
    not concerns.”
    ʮςϯϓϨʔτ͕੾Γ෼͚͍ͯͨͷ͸ɺ
    ໰୊͡Όͳٕͯ͘ज़ͩʯ
    CZ'BDFCPPLͷதͷਓ

    View full-size slide

  37. Ϗϡʔ
    ϏδωεϩδοΫ
    ϏϡʔϩδοΫ
    Ϗϡʔ
    ϏδωεϩδοΫ
    ϏϡʔϩδοΫ
    ίϯϙʔωϯτ
    ςϯϓϨʔτ

    View full-size slide

  38. ίϯϙʔωϯτWTK2VFSZ

    View full-size slide

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

    View full-size slide

  40. ίϯϙʔωϯτ K2VFSZ
    )5.-ͷѻ͍
    એݴత
    ॻ͍ͨ·Μ·

    ࠩ෼Λૢ࡞

    Ͳ͏ม͑Δ͔

    σʔλͷྲྀΕ
    σʔλˠϏϡʔ
    جຊతʹ͸

    ͪ͝Όͪ͝Ό
    ίϯϙʔωϯτWTK2VFSZ

    View full-size slide

  41. 3JPUΛ΋͏গ͠

    View full-size slide

  42. ܁Γฦ͠ͱσʔλ

    Apple
    Orange
    Banana


    { name }

    <br/>this.fruits = [<br/>{ name: ‘Apple’ },<br/>{ name: ‘Orange’ },<br/>{ name: ‘Banana’ }<br/>]<br/>

    View full-size slide

  43. Πϕϯτϋϯυϥ

    <br/>this.username = ‘MEGANE’<br/>this.change = e => {<br/>username = e.target.value<br/>}<br/>

    View full-size slide

  44. 4DPQFE$44
    WP-D Week
    <br/>:scope { /* ίϯϙʔωϯτͦͷ΋ͷͷελΠϧ */ }<br/>p { /* ίϯϙʔωϯτ಺ͷpλάͷΈʹ༗ޮ */ }<br/>

    View full-size slide

  45. ͋ͱ͸ɺυΩϡϝϯτݟͯ

    View full-size slide

  46. ࠷ۙͷϑϩϯτΤϯυ͸
    ͳͥϝϯυΫαΠͷ͔

    View full-size slide

  47. ϑϩϯτΤϯυ͕೉͍͠
    +BWB4DSJQU͕೉͍͠

    View full-size slide

  48. ೉͠͞⁞
    จ๏͕ɺ׬શʹϕπϞϊ

    View full-size slide

  49. ʮͳʜԿΛݴ͍ͬͯΔͷ͔
    ɹΘ͔ΒͶʔͱࢥ͏͕ɺ

    ɹ͓Ε΋ԿΛ͞Εͨͷ͔Θ͔Βͳ͔ͬͨʯ

    View full-size slide

  50. 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
    ͳʹ͜ͷ֎ࠃޠ

    View full-size slide

  51. ೉͠͞ 
    ςετͱ͔ɺλεΫͱ͔

    View full-size slide

  52. λεΫϥϯφʔ
    ςετϦϯλʔ
    ͦͷଞʜ

    View full-size slide

  53. ೉͠͞⁠
    OQNͱϞδϡʔϧ

    View full-size slide

  54. ໿ສ
    ύοέʔδ

    View full-size slide

  55. import add from ‘./add’
    const x = add(1, 2)
    export default function add (a, b) {
    return a + b
    }
    ผϑΝΠϧ͔Β
    ಡΈࠐΊΔ

    View full-size slide

  56. ೉͠͞⁡
    ϙϦϑΟϧͱίϯύΠϧ
    όϯυϧ

    View full-size slide

  57. #BCFM
    #BCFM
    #BCFM
    #BCFM
    #BCFM
    &4 &4

    &4 &4
    $ISPNF
    4BGBSJ
    'JSFGPY
    &EHF
    /PEF
    ϙϦϑΟϧ
    ࣮૷લʹػೳΛઌऔΓ

    View full-size slide

  58. ͓͢͢Ί
    όϯυϥʔɺ͍Ζ͍Ζɻ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  63. ͋Δ͍͸ʜ

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  68. 5IBOLZPV
    ࣭໰ΛͲ͏ͧ

    View full-size slide