Riot.js v3 Migration道

by yuuki79

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

3JPUKTWରԠ͠·ͨ͠

Slide 4

Slide 4 text

501ϖʔδͷදࣔ଎౓͕βοΫϦʹ୹ॖ NTNT NT NTNT NT "GUFS #FGPSF

Slide 5

Slide 5 text

΄΅શίϯϙʔωϯτʹखΛೖΕΔɻ  ςετؚΊͯ̍िؒɺຖ೔ऴిؼΓ͘Β͍ͷϖʔεɻ

Slide 6

Slide 6 text

ͱΓ͋͑ͣWʹ͋͛ͯΈͨ w Λ༨༟Ͱ௒͑ΔΤϥʔϩά w ύοτݟ͘Β͍Λ࢒ͯ͠શ่͕ͯյͯ͠Δ w সͬͨN ?Ч? w WͰ΍ͬͯͨΒ࠷ۙW͕ग़ͯসͬͨ N ?Ч?

Slide 7

Slide 7 text

ςϯϓϨʔτΤϥʔ͕ग़ΔΑ͏ʹͳͬͯͨ w ςϯϓϨʔτ಺ͰॳظԽ͞Εͯͳ͍஋ͱ͔ͰେྔʹΤϥʔ w

{ item.value }

ͰNPVOU࣌ʹJUFN͕ VOEFpOEͩͱμ ϝɻthis.item = {}ͱ͔΍ͬͯରԠ w ॳظԽ͸େࣄͳͷͰΤϥʔ͕ग़ΔΑ͏ʹͳͬͯخ͍͠վ ળ 3JPUͰ͸ɺλά಺ͷςϯϓϨʔτͷΤϥʔΛΩϟον͢ΔͨΊʹ͸ࣗ෼Ͱؔ਺Ληοτ͢Δ ඞཁ͕͋Γ·ͨ͠ɻ3JPUͰ͸ɺλά಺ͷશͯͷςϯϓϨʔτΤϥʔ͸DPOTPMFFSSPS͔Βग़ྗ ͞Ε·͢ɻ DPOTPMF"1*͕ར༻Մೳͳ৔߹

Slide 8

Slide 8 text

w WͰͷJG͸ݟͨ໨ͦͪ͜ΌΜͱಈ͍͍ͯΔ͕ɺݟ͑ͳ͍ͱ ͜ΖͰλάͷϚ΢ϯτ͕૸͍ͬͯͨͷ͕૸Βͳ͘ͳͬͨɻ w FBDI\PQFO <>^Έ͍ͨʹFBDIͰۭϧʔϓΛ͢Δ ͱϚ΢ϯτ͞Εͳ͍ͷͰύϑΥʔϚϯεతʹͦ͏ॻ͍ͯͨ w JGʹશ෦ॻ͖௚͠FBDIΛ࢖͏ͱQBSFOUΛݟͳ͍ͱͦΕ ҎԼͷλάͰ஋͕ࢀরग़དྷͳ͍ͷͰλά͕ԚΕͯͨͷΛΩ ϨΠʹʂ JGจ͕JGจʹͳͬͨ

Slide 9

Slide 9 text

w ແବͳ࣌΋࣮ߦ͞Ε͍ͯͨ༁ͩ͠ɺύϑΥʔϚϯεվળʹ΋ྑ ͦ͞͏ͳͷͰ׻ܴ w GPSNͰPOTVCNJU\TVCNJU&WFOU^Έ͍ͨͳ͜ͱΛͯ͠Δॴ ͰϖʔδϦϩʔυ͞ΕͪΌͬͨΓ΋ɻ w શॲཧʹ͸ద༻ͤͣɺΫϦοΫΠϕϯτ౳Ͱ໰୊ͷ͋Δͱ͜Ζ Ͱ͸  this.submitEvent = (e) => {  ɹ e.preventDefault();  }  ͯ͠ରԠɻ ࣗಈQSFWFOU%FGBVMUͷഇࢭ

Slide 10

Slide 10 text

w ద੾ʹมߋ͍͕ͯͨ͠ҧ͏ڍಈΛ͍ͯ͠Δύλʔϯ͕͋ͬͨɻ w 0CKFDU͡Όͳ͍͚Ͳ"SSBZͰೋॏʹϧʔϓͤͯ͞Δ࣌ͷڍಈ͕ͪΌΜͱ͢ΔΑ͏ʹͳͬͯͨ ΦϒδΣΫτϧʔϓͷจ๏มߋ ΦϒδΣΫτͷϧʔϓͷจ๏͕มΘΓ·͢ɻҎલ͸LFZ WBMVFJOPCKFDUͰ͕ͨ͠ɺ WBMVF LFZJOPCKFDUʹมߋ͞Ε·͢ɻ

{ key2 }

// ←͜͜ʹkey͕དྷ͍ͯͨɻv2͸ͪΐͬͱม ( hoge, fuga )

Array2 = [ { hoge: { objKey: objValue } }, { fuga: { objKey: objValue } } ] // ͜Ε͕ͦΕͧΕ hoge, fuga ͷ object ͕ key2 ʹདྷΔΑ͏ʹͳͬͯ͠·ͬͨͷͰɺ͜͏΍ͬͯमਖ਼ͨ͠

// ←value2, key2 ͷΑ͏ʹ̎ͭҾ਺Λ༻ҙͨ͠

{ key2 }

Slide 11

Slide 11 text

w UIJTPO bVQEBUF` ͍ͯͨ͠தͰUIJTVQEBUF ͕ॻ ͍ͯ͋ΔλάͰൃੜɻ w VQEBUF͕དྷͨͱ͖ʹ͸UIJTVQEBUF ͸উखʹى͜ ΔͷͰফͯ͠ରԠɻ ແݶϧʔϓͯ͠ΔͬΆ͍Τϥʔ͕ग़ͯདྷΔ

Slide 12

Slide 12 text

w ࠓ·Ͱ͸    ͬͯॻ͍ͯ΋ಈ͍͚ͯͨͲparent.clickEventͬͯ ॻ͔ͳ͍ͱಈ͔ͳ͔ͬͨΓɻ w Ͳ͔͜ͰZJFME࢖ͬͯΔλάʹZJFMEUBH\IPHF^ ZJFMEUBHͰ౉͚ͬͯͨͲɺ\QBSFOUIPHF^ͬͯॻ͔ ͳ͍ͱμϝͳײ͡ʹΏΒ͕͗ͳ͘ͳͬͨɻ FBDIͱZJFMEͰͷQBSFOU͕ద౰͡Όͳ͘ͳͬͨ

Slide 13

Slide 13 text

w ओʹGPSNͷॲཧ͕յΕΔɻ w ʹରͯ͠  let formId = this.formId  ͬͯऔΕͯͨ w ʹରͯ͠  let formId = this.refs.formId  ͰऔΔΑ͏ʹमਖ਼ OBNFͱJEʹΑΔ%0.ࢀরͷഇࢭ

Slide 14

Slide 14 text

w UIJTPO bNPVOU` ͰUIJTVQEBUF ͕ແͯ͘΋ಈ͍ͯ ͨՕॴ͕͋ͬͨ w ࢠͷVQEBUF͕਌ʹ఻ΘΒͳ͘ͳͬͨӨڹ͔΋ɻແ ବͩͬͨͷͰྑ͍มߋͩͱࢥ͏ɻ w ద੾ʹUIJTVQEBUF Λ࢖ͬͯλάΛߋ৽ɻ UIJTPO bNPVOU` ͷڍಈʹؾΛ࢖͏

Slide 15

Slide 15 text

w WJSUVBMJG\EBUB^IPHFIPHFWJSUVBMΈ͍ͨͳ ࢖͍ํΛͯ͠ΔॴͰදࣔ͞ΕͯΔͷʹΤϥʔ͕ग़ͯͨ Γ w WJSUVBM͕Կ౓΋JGධՁ͞ΕΔ༷ͳՕॴͰڬΜͰ͋ͬ ͨաڈͷλά͕࢒ͬͯ͠·͍ͬͯͨΓɻɻ w ਂ௥͍ͤͣʹIPHFJG\EBUB^ͬͯॻ͍ͨΒ໰୊ແ ͘ͳ͚ͬͨͲɻɻWJSUVBMͳΜ͔ո͍͠ͷͰಈ࡞Ͱࠔͬ ͨΒ࢖Θͳ͍ํ͕ྑ͍͔΋ɻɻ WJSUVBM͕ո͍͠ɾɾɾ

Slide 16

Slide 16 text

w W w FBDI಺ͰZJFME࢖ͬͯΔͱFBDIͰճͯ͠ΔJUFN͕དྷͳ͘ͳͬ ͨɻ w QBSFOUʹ͍Δ͔ͱࢥ͚ͬͨͲډͳ͍ɻ୳ͨ͠Β@QBSFOUʹ͸ ೖ͍ͬͯͨͷͰ@QBSFOUJUFNͬͯ΍ͬͨΒདྷͨ w FBDI\WBMVF JJOWBMVFT^ͬͯॻ͍ͨΒZJFMEʹ͸ @QBSFOUWBMVF @QBSFOUJͬͯॻ͔ͳ͍ͱདྷͳ͍ɻ w ԼهJTTVFͱಉ͡ݱ৅Ά͍ w IUUQTHJUIVCDPNSJPUSJPUJTTVFT ZJFMEFBDIͰٽ͘

Slide 17

Slide 17 text

w W w @QBSFOU͕ഇࢭɻ@@QBSFOUʹมߋɻ @@ͬͯ࢖͍͍ͬͯͷ͔ʜʁ w WͰ͸ZJFMEͰQBSFOU͕ͪΌΜͱݟΒΕΔ༷ʹͳͬͨͱࢥͬͯͨΒFBDIͰճͯ͠Δ࣌ͷZJFMEʹ͸ QBSFOUࢦఆͯ͠ॻ͘ͱಧ͔ͳ͍ɻɻ w ࣗλάͷFBDIʹؔͯ͠͸ZJFMEʹ͸QBSFOUແ͠Ͱσʔλ͕౉͍ͬͯΔΆ͍ ZJFMEFBDIͰٽ͘
"{parent.label}", "{label}", ZJFME࢖ͬͨλάͱσʔλ σʔλ͕౉Βͳ͍ σʔλ͕౉ͬͪΌ͏ this.testItems = [ { label: 'Nyan' }, { label: 'Meow' }, { label: 'Meaou' } ];

Slide 18

Slide 18 text

w *&Ͱ@@QBSFOUJUFNҎԼͷσʔλ͕དྷͳ͍͕࣌͋Δɻɻ w QMVOLFSͰ୯७ʹॻ͚ͩͩ͘ͱ࠶ݱ͠ͳ͍ɻɻ w IUUQQMOLSDPFEJU+02ET*+54&S&O QQSFWJFX w ٽ͘ٽ͘ZJFMEར༻Λஅ೦ɻPQUTܦ༝ͰZJFMEʹ౉ͨ͠ ͍஋Λύε ZJFMEFBDIͰٽ͘

Slide 19

Slide 19 text

w ଎͍ʂʂ w ϥΠϑαΠΫϧ͕࠷దԽ͞ΕͨΓɺ৭ΜͳύϑΥʔϚϯεվળ͕ೖͬͨͷͰૉ੖Β͍͠ w FWFOUॲཧ͕ΊͬͪΌ଎͍ w PCTFSWBCMFͳॲཧΛ࿈ଧ͢ΔͱΨοπϦ஗͘ͳͬͯͨͷ͕ղফ ".&45"(&ͷΪϑτૹ৴ ౳ w JG͕ͪΌΜͱJGʹͳͬͨͷͰ࢖͑Δײ͕૿ͨ͠ w VQEBUF NPVOUΠϕϯτͷڍಈ͕҆ఆ w ࢠλά͔ΒͷӨڹΛड͚ͳ͔ͬͨΓɺNPVOUલʹVQEBUF͕དྷͳ͘ͳͬͨΓɺΑΓ௚ײతʹ ࢖͑ΔɻύϑΥʔϚϯεʹ΋ྑͦ͞͏ w JGͰ։͍ͨΓดͨ͡Γͨ͠λάʹͪΌΜͱຖճNPVOU͕དྷΔΑ͏ʹͳͬͯ৺ʹӫཆɺ͜Ε ͧNPVOUͬͯײ͡ͷϥΠϑαΠΫϧվળʹ৺ΛଧͨΕͨ Wʹͯ͠خ͔ͬͨ͜͠ͱ

Slide 20

Slide 20 text

3JPUKTษڧձൃදޙͷ௥ه w 3JPUKTWͰ͸ZJFME΍FBDIͰ͸QBSFOUΛݟͳ͖Ό ͱ͔ɺͦ͏͍͏είʔϓͷ໰୊͕ΨοπϦղܾ͢Δ Β͍͠ɻ w ݁࿦ɿ͸Αɾɾɾʂʂ

Slide 21

Slide 21 text

5IBOLZPV