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

Riot.js v3 Migration道

63289c0da4c2735c97d34890e68087c7?s=47 yuuki79
February 02, 2017

Riot.js v3 Migration道

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

63289c0da4c2735c97d34890e68087c7?s=128

yuuki79

February 02, 2017
Tweet

More Decks by yuuki79

Other Decks in Technology

Transcript

  1. αΠόʔΤʔδΣϯτɹࢵ஛༎ٍ

  2. 3JPUKTษڧձ։࠵ʹ޲͚ͨωλ࡞Γͱ  ύϑΥʔϚϯεվળΛ΍Γ͍ͨͱ͍͏ڧ͍ؾ࣋ͪɻ

  3. 3JPUKTWରԠ͠·ͨ͠

  4. 501ϖʔδͷදࣔ଎౓͕βοΫϦʹ୹ॖ NTNT NT NTNT 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 WBMVFJOPCKFDUͰ͕ͨ͠ɺ WBMVF LFZJOPCKFDUʹมߋ͞Ε·͢ɻ <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 WJSUVBMJG\EBUB^IPHFIPHFWJSUVBMΈ͍ͨͳ ࢖͍ํΛͯ͠ΔॴͰදࣔ͞ΕͯΔͷʹΤϥʔ͕ग़ͯͨ Γ w WJSUVBM͕Կ౓΋JGධՁ͞ΕΔ༷ͳՕॴͰڬΜͰ͋ͬ ͨաڈͷλά͕࢒ͬͯ͠·͍ͬͯͨΓɻɻ w ਂ௥͍ͤͣʹIPHFJG\EBUB^ͬͯॻ͍ͨΒ໰୊ແ ͘ͳ͚ͬͨͲɻɻWJSUVBMͳΜ͔ո͍͠ͷͰಈ࡞Ͱࠔͬ

    ͨΒ࢖Θͳ͍ํ͕ྑ͍͔΋ɻɻ WJSUVBM͕ո͍͠ɾɾɾ
  16. w W w FBDI಺ͰZJFME࢖ͬͯΔͱFBDIͰճͯ͠ΔJUFN͕དྷͳ͘ͳͬ ͨɻ w QBSFOUʹ͍Δ͔ͱࢥ͚ͬͨͲډͳ͍ɻ୳ͨ͠Β@QBSFOUʹ͸ ೖ͍ͬͯͨͷͰ@QBSFOUJUFNͬͯ΍ͬͨΒདྷͨ w FBDI\WBMVF

    JJOWBMVFT^ͬͯॻ͍ͨΒ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 3JPUKTWͰ͸ZJFME΍FBDIͰ͸QBSFOUΛݟͳ͖Ό ͱ͔ɺͦ͏͍͏είʔϓͷ໰୊͕ΨοπϦղܾ͢Δ Β͍͠ɻ w ݁࿦ɿ͸Αɾɾɾʂʂ

  21. 5IBOLZPV