Riot.js v3 Migration道

AMESTAGEのRiot.jsをv2からv3に上げるまでの軌跡を描いた感動のストーリー

Transcript

1. αΠόʔΤʔδΣϯτɹࢵ஛༎ٍ
2. 3JPUKT
   ษڧձ։࠵ʹ޲͚ͨωλ࡞Γͱ
   ύϑΥʔϚϯεվળΛ΍Γ͍ͨͱ͍͏ڧ͍ؾ࣋ͪɻ
3. 3JPUKT
   W
   ରԠ͠·ͨ͠
4. 501ϖʔδͷදࣔ଎౓͕βοΫϦ
   
   ʹ୹ॖ NT
   
   NT
   NT NT
   
   NT
   NT "GUFS #FGPSF
5. ΄΅શίϯϙʔωϯτʹखΛೖΕΔɻ
 ςετؚΊͯ̍िؒɺຖ೔ऴిؼΓ͘Β͍ͷϖʔεɻ
6. ͱΓ͋͑ͣWʹ͋͛ͯΈͨ w Λ༨༟Ͱ௒͑ΔΤϥʔϩά
   w ύοτݟ͘Β͍Λ࢒ͯ͠શ่͕ͯյͯ͠Δ
   w সͬͨ
   N ?Ч?
   w W
   Ͱ΍ͬͯͨΒ࠷ۙ
   W
   ͕ग़ͯসͬͨ N ?Ч?
7. ςϯϓϨʔτΤϥʔ͕ग़ΔΑ͏ʹͳͬͯͨ w ςϯϓϨʔτ಺ͰॳظԽ͞Εͯͳ͍஋ͱ͔ͰେྔʹΤϥʔ w <p>{ item.value }</p>
   Ͱ
   NPVOU
   ࣌ʹ
   JUFN
   ͕
   VOEFpOE
   ͩͱμ ϝɻ
   this.item = {}
   ͱ͔΍ͬͯରԠ
   w ॳظԽ͸େࣄͳͷͰΤϥʔ͕ग़ΔΑ͏ʹͳͬͯخ͍͠վ ળ 3JPU
   Ͱ͸ɺλά಺ͷςϯϓϨʔτͷΤϥʔΛΩϟον͢ΔͨΊʹ͸ࣗ෼Ͱؔ਺Ληοτ͢Δ ඞཁ͕͋Γ·ͨ͠ɻ3JPU
   Ͱ͸ɺλά಺ͷશͯͷςϯϓϨʔτΤϥʔ͸DPOTPMFFSSPS͔Βग़ྗ ͞Ε·͢ɻ DPOTPMF
   "1*͕ར༻Մೳͳ৔߹
8. w W
   Ͱͷ
   JG
   ͸ݟͨ໨ͦͪ͜ΌΜͱಈ͍͍ͯΔ͕ɺݟ͑ͳ͍ͱ ͜ΖͰλάͷϚ΢ϯτ͕૸͍ͬͯͨͷ͕૸Βͳ͘ͳͬͨɻ
   w FBDI\
   PQFO
   
   <USVF>
   
   <>
   ^
   Έ͍ͨʹFBDIͰۭϧʔϓΛ͢Δ ͱϚ΢ϯτ͞Εͳ͍ͷͰύϑΥʔϚϯεతʹͦ͏ॻ͍ͯͨ
   w JG
   ʹશ෦ॻ͖௚͠
   FBDI
   Λ࢖͏ͱ
   QBSFOU
   Λݟͳ͍ͱͦΕ ҎԼͷλάͰ஋͕ࢀরग़དྷͳ͍ͷͰλά͕ԚΕͯͨͷΛΩ ϨΠʹʂ JG
   จ͕
   JG
   จʹͳͬͨ
9. w ແବͳ࣌΋࣮ߦ͞Ε͍ͯͨ༁ͩ͠ɺύϑΥʔϚϯεվળʹ΋ྑ ͦ͞͏ͳͷͰ׻ܴ
   w GPSN
   Ͱ
   POTVCNJU\
   TVCNJU&WFOU
   ^
   Έ͍ͨͳ͜ͱΛͯ͠Δॴ ͰϖʔδϦϩʔυ͞ΕͪΌͬͨΓ΋ɻ
   w શॲཧʹ͸ద༻ͤͣɺΫϦοΫΠϕϯτ౳Ͱ໰୊ͷ͋Δͱ͜Ζ Ͱ͸
 this.submitEvent = (e) => {
 ɹ e.preventDefault();
 }
   
 ͯ͠ରԠɻ ࣗಈ
   QSFWFOU%FGBVMU
   ͷഇࢭ
10. w ద੾ʹมߋ͍͕ͯͨ͠ҧ͏ڍಈΛ͍ͯ͠Δύλʔϯ͕͋ͬͨɻ
    w 0CKFDU
    ͡Όͳ͍͚Ͳ
    "SSBZ
    Ͱೋॏʹϧʔϓͤͯ͞Δ࣌ͷڍಈ͕ͪΌΜͱ͢ΔΑ͏ʹͳͬͯͨ ΦϒδΣΫτϧʔϓͷจ๏มߋ ΦϒδΣΫτͷϧʔϓͷจ๏͕มΘΓ·͢ɻҎલ͸LFZ
    WBMVF
    JO
    PCKFDUͰ͕ͨ͠ɺ WBMVF
    LFZ
    JO
    PCKFDUʹมߋ͞Ε·͢ɻ <div each=“value, key in Array”> <li each=“key2 in Array2”> <p>{ key2 }</p> // ←͜͜ʹkey͕དྷ͍ͯͨɻv2͸ͪΐͬͱม ( hoge, fuga ) </li> </div> Array2 = [ { hoge: { objKey: objValue } }, { fuga: { objKey: objValue } } ] // ͜Ε͕ͦΕͧΕ hoge, fuga ͷ object ͕ key2 ʹདྷΔΑ͏ʹͳͬͯ͠·ͬͨͷͰɺ͜͏΍ͬͯमਖ਼ͨ͠ <div each=“value, key in Array”> <li each=“value2, key2 in Array2”> // ←value2, key2 ͷΑ͏ʹ̎ͭҾ਺Λ༻ҙͨ͠ <p>{ key2 }</p> </li> </div>
11. w UIJTPO bVQEBUF`
    ͍ͯͨ͠தͰ
    UIJTVQEBUF
    ͕ॻ ͍ͯ͋ΔλάͰൃੜɻ
    w VQEBUF
    ͕དྷͨͱ͖ʹ͸
    UIJTVQEBUF
    ͸উखʹى͜ ΔͷͰফͯ͠ରԠɻ ແݶϧʔϓͯ͠ΔͬΆ͍Τϥʔ͕ग़ͯདྷΔ
12. w ࠓ·Ͱ͸
 <button-tag each={buttons} onclick={ clickEvent }>
 ͬͯॻ͍ͯ΋ಈ͍͚ͯͨͲ
    parent.clickEvent
    ͬͯ ॻ͔ͳ͍ͱಈ͔ͳ͔ͬͨΓɻ
    w Ͳ͔͜Ͱ
    ZJFME
    ࢖ͬͯΔλάʹ
    ZJFMEUBH\IPHF^ ZJFMEUBH
    Ͱ౉͚ͬͯͨͲɺ
    \QBSFOUIPHF^
    ͬͯॻ͔ ͳ͍ͱμϝͳײ͡ʹΏΒ͕͗ͳ͘ͳͬͨɻ FBDI
    ͱ
    ZJFME
    Ͱͷ
    QBSFOU
    ͕ద౰͡Όͳ͘ͳͬͨ
13. w ओʹ
    GPSN
    ͷॲཧ͕յΕΔɻ
    w <form id=“formId”>
    ʹରͯ͠
 let formId = this.formId
 ͬͯऔΕͯͨ
    w <form ref=“formId”>
    ʹରͯ͠
 let formId = this.refs.formId
 ͰऔΔΑ͏ʹमਖ਼ OBNF
    ͱ
    JE
    ʹΑΔ
    %0.
    ࢀরͷഇࢭ
14. w UIJTPO bNPVOU`
    Ͱ
    UIJTVQEBUF
    ͕ແͯ͘΋ಈ͍ͯ ͨՕॴ͕͋ͬͨ
    w ࢠͷ
    VQEBUF
    ͕਌ʹ఻ΘΒͳ͘ͳͬͨӨڹ͔΋ɻແ ବͩͬͨͷͰྑ͍มߋͩͱࢥ͏ɻ
    w ద੾ʹ
    UIJTVQEBUF
    Λ࢖ͬͯλάΛߋ৽ɻ UIJTPO bNPVOU`
    ͷڍಈʹؾΛ࢖͏
15. w WJSUVBM
    JG\EBUB^IPHFIPHFWJSUVBM
    Έ͍ͨͳ ࢖͍ํΛͯ͠ΔॴͰදࣔ͞ΕͯΔͷʹΤϥʔ͕ग़ͯͨ Γ
    w WJSUVBM
    ͕Կ౓΋JGධՁ͞ΕΔ༷ͳՕॴͰڬΜͰ͋ͬ ͨաڈͷλά͕࢒ͬͯ͠·͍ͬͯͨΓɻɻ
    w ਂ௥͍ͤͣʹ
    IPHF
    JG\
    EBUB
    ^
    ͬͯॻ͍ͨΒ໰୊ແ ͘ͳ͚ͬͨͲɻɻWJSUVBMͳΜ͔ո͍͠ͷͰಈ࡞Ͱࠔͬ ͨΒ࢖Θͳ͍ํ͕ྑ͍͔΋ɻɻ WJSUVBM
    ͕ո͍͠ɾɾɾ
16. w W
    
    w FBDI
    ಺Ͱ
    ZJFME
    ࢖ͬͯΔͱ
    FBDI
    Ͱճͯ͠Δ
    JUFN
    ͕དྷͳ͘ͳͬ ͨɻ
    w QBSFOU
    ʹ͍Δ͔ͱࢥ͚ͬͨͲډͳ͍ɻ୳ͨ͠Β
    @QBSFOU
    ʹ͸ ೖ͍ͬͯͨͷͰ
    @QBSFOUJUFN
    ͬͯ΍ͬͨΒདྷͨ
    w FBDI\
    WBMVF
    J
    JO
    WBMVFT
    ^
    ͬͯॻ͍ͨΒ
    ZJFME
    ʹ͸
    @QBSFOUWBMVF
    @QBSFOUJ
    ͬͯॻ͔ͳ͍ͱདྷͳ͍ɻ
    w Լه
    JTTVF
    ͱಉ͡ݱ৅Ά͍
    w IUUQTHJUIVCDPNSJPUSJPUJTTVFT ZJFME
    
    FBDI
    Ͱٽ͘
17. w W
    
    w @QBSFOU
    ͕ഇࢭɻ
    @@QBSFOU
    ʹมߋɻ
    @@ͬͯ࢖͍͍ͬͯͷ͔ʜʁ
    w W
    Ͱ͸
    ZJFME
    Ͱ
    QBSFOU
    ͕ͪΌΜͱݟΒΕΔ༷ʹͳͬͨͱࢥͬͯͨΒ
    FBDI
    Ͱճͯ͠Δ࣌ͷ
    ZJFME
    ʹ͸
    QBSFOU
    ࢦఆͯ͠ॻ͘ͱಧ͔ͳ͍ɻɻ
    w ࣗλάͷ
    FBDI
    ʹؔͯ͠͸
    ZJFME
    ʹ͸
    QBSFOU
    ແ͠Ͱσʔλ͕౉͍ͬͯΔΆ͍ ZJFME
    
    FBDI
    Ͱٽ͘ <font> <span> <yield/> </span><br> </font> <font each="{testItems}" class="{label}"> "{parent.label}", </font> <font each="{testItems}" class="{label}"> "{label}", </font> ZJFME࢖ͬͨλάͱσʔλ σʔλ͕౉Βͳ͍ σʔλ͕౉ͬͪΌ͏ this.testItems = [ { label: 'Nyan' }, { label: 'Meow' }, { label: 'Meaou' } ];
18. w *&
    Ͱ
    @@QBSFOUJUFN
    ҎԼͷσʔλ͕དྷͳ͍͕࣌͋Δɻɻ
    w QMVOLFS
    Ͱ୯७ʹॻ͚ͩͩ͘ͱ࠶ݱ͠ͳ͍ɻɻ
    w IUUQQMOLSDPFEJU+02ET*+54&S&O QQSFWJFX
    w ٽ͘ٽ͘
    ZJFME
    ར༻Λஅ೦ɻPQUT
    ܦ༝Ͱ
    ZJFME
    ʹ౉ͨ͠ ͍஋Λύε ZJFME
    
    FBDI
    Ͱٽ͘
19. w ଎͍ʂʂ
    w ϥΠϑαΠΫϧ͕࠷దԽ͞ΕͨΓɺ৭ΜͳύϑΥʔϚϯεվળ͕ೖͬͨͷͰૉ੖Β͍͠
    w FWFOU
    ॲཧ͕ΊͬͪΌ଎͍
    w PCTFSWBCMF
    ͳॲཧΛ࿈ଧ͢ΔͱΨοπϦ஗͘ͳͬͯͨͷ͕ղফ
    
    ".&45"(&ͷΪϑτૹ৴ ౳
    w JG
    ͕ͪΌΜͱ
    JG
    ʹͳͬͨͷͰ࢖͑Δײ͕૿ͨ͠
    w VQEBUF
    NPVOU
    Πϕϯτͷڍಈ͕҆ఆ
    w ࢠλά͔ΒͷӨڹΛड͚ͳ͔ͬͨΓɺNPVOUલʹVQEBUF͕དྷͳ͘ͳͬͨΓɺΑΓ௚ײతʹ ࢖͑ΔɻύϑΥʔϚϯεʹ΋ྑͦ͞͏
    w JG
    Ͱ։͍ͨΓดͨ͡Γͨ͠λάʹͪΌΜͱຖճ
    NPVOU
    ͕དྷΔΑ͏ʹͳͬͯ৺ʹӫཆɺ͜Ε ͧNPVOUͬͯײ͡ͷϥΠϑαΠΫϧվળʹ৺ΛଧͨΕͨ W
    ʹͯ͠خ͔ͬͨ͜͠ͱ
20. 3JPUKT
    ษڧձൃදޙͷ௥ه w 3JPUKT
    WͰ͸
    ZJFME
    ΍
    FBDI
    Ͱ͸
    QBSFOUΛݟͳ͖Ό ͱ͔ɺͦ͏͍͏είʔϓͷ໰୊͕ΨοπϦղܾ͢Δ Β͍͠ɻ
    w ݁࿦ɿ͸Αɾɾɾʂʂ
21. 5IBOL
    ZPV