Tweet
Tweet

Slide 1

Slide 1 text

ϑϩϯτΤϯυͷ ΤϥʔपΓͰ࠷ۙ஌ͬͨ͜ͱ ΞΧπΩºΦζϏδϣϯٕज़ަྲྀձ-5 ఱ໺Ѯ.BNPSV"NBOP

Slide 2

Slide 2 text

ࣗݾ঺հ w 8FCΤϯδχΞʢ3BJMT3FBDUʣ w ࠷ۙ͸413*/5ͰαʔϏεߟ͑ͯ·͢ɻ w ஌ݟ͋Δਓ࿩ฉ͖͍ͨਓ͍ͨΒ
 ੠͔͚͍ͯͩ͘͞ɻ

Slide 3

Slide 3 text

&SSPS#PVOEBSZͱ͸ w 3FBDUͷ৽ػೳ w DPNQPOFOU%JE$BUDIͱ͍͏ϥΠϑαΠΫϧϝιουΛ࣮૷ͨ͠ίϯϙʔ ωϯτͷ͜ͱɻ w ࢠίϯϙʔωϯτπϦʔͰൃੜͨ͠ΤϥʔΛϋϯυϦϯά͢Δ

Slide 4

Slide 4 text

࢖͍ํ class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } // ৽͍͠ϥΠϑαΠΫϧϝιου componentDidCatch(error, info) { this.setState({ hasError: true }); // ֎෦αʔϏε΁ͷΤϥʔ௨஌΋͜͜ʹॻ͘ɻ logErrorToMyService(error, info); } render() { if (this.state.hasError) { // ͜͜ʹϑΥʔϧόοΫͷUIΛهࡌ͓ͯ͘͠ɻ // ࢠίϯϙʔωϯτͰΤϥʔ͕ൃੜͨ͠৔߹͸ɺ͜Ε͕render͞ΕΔɻ return

Something went wrong.

; } return this.props.children; } }

Slide 5

Slide 5 text

࢖͍ํ ίϯϙʔωϯτͱͯ͠ར༻͢Δ

Slide 6

Slide 6 text

%&.0 w αϯϓϧίʔυ w IUUQTHJUIVCDPNNBNPSVSFBDUFSSPSCPVOEBSZTBNQMF

Slide 7

Slide 7 text

ྑ͍఺ w 3FBDUʹ͓͚ΔΤϥʔϋϯυϦϯάͷجຊతͳํ๏ʹ w Τϥʔൃੜ࣌ͷ6*ͷڍಈ΍֎෦αʔϏε΁ͷΤϥʔϨϙʔτ͸&SSPS #PVOEBSZʹॻ͍͓͚ͯ͹Φοέʔ w ίϯϙʔωϯτͱͯ͠ѻ͑Δ w ςετ΋ॻ͖΍͍͢ͷͰ͸

Slide 8

Slide 8 text

஫ҙ఺ͱ͔ w &SSPS#PVOEBSZͷಋೖʹ͋ΘͤͯɺͲͷ&SSPS#PVOEBSZͰ΋ัଊ͞Εͳ͍Τϥʔʢ6ODBVHIU&SSPSʣ ͕ൃੜͨ͠৔߹ίϯϙʔωϯτπϦʔશମ͕VONPVOU͞ΕɺඇදࣔʹͳΔɻ w Τϥʔ͕ൃੜͨ͠ͱ͖ʹɺʮಈ͍͍ͯΔΑ͏ʹݟ͑ΔʯΑΓ΋ʮಈ͍ͯͳ͍ࣄ͕Θ͔Δʯ΄͏͕͍͍ͱ͍ ͏൑அɻIUUQTSFBDUKTPSHCMPHFSSPSIBOEMJOHJOSFBDUIUNMOFXCFIBWJPSGPS VODBVHIUFSSPST w Ͳ͜ʹ഑ஔ͢Δ͔ʁ w ࢓༷มߋ΋౿·͑ͯɺ͋ΔύʔπͰΤϥʔ͕ൃੜͨ͠ͱ͖ʹͲ͜·ͰΛӨڹൣғʹͯ͠Α͍͔ʁͰߟ͑Δɻ w ྫͱͯ͠ɺ'BDFCPPL.FTTFOHFS͸αΠυόʔ΍JOGPQBOFMɺνϟοτ෦෼ͳͲ͸ͦΕͧΕ&SSPS #PVOEBSZͰϥοϓͯ͠Δͦ͏Ͱ͢ɻIUUQEBDLEJWFIBUFCMPKQFOUSZ w &SSPS#PVOEBSZ͕ෳ਺͋Δ৔߹͸ɺDMPTFTUͳ΋ͷ͕ར༻͞ΕΔɻIUUQTSFBDUKTPSHCMPH FSSPSIBOEMJOHJOSFBDUIUNMXIZOPUVTFUSZDBUDI

Slide 9

Slide 9 text

ͦͯ͠ɺΤϥʔͱ͍͑͹

Slide 10

Slide 10 text

μΠΞϩά͸໘౗ w XJOEPXBMFSU΍XJOEPXDPOpSNͰ͸ࡁ·ͤΒΕͳ͍ͱ͖΋͋Δɻ w ͦ΋ͦ΋ɺμΠΞϩά͸Τϥʔͷͱ͖͚ͩʹ࢖͏ύʔπ͡Όͳ͍͢Δ΋ͷ͡Όͳ͍Ͱ͢ Ͷɻ͔ͬͯΤϥʔͷͱ͖ʹग़͢͜ͱͷ΄͏͕গͳ͍ʁ w ͦ͏ͳΔͱɺࣗલͰ࣮૷͢Δ͜ͱʹͳΔ͚Ͳɺ·࣮ͣ૷ํ๏͕͋Δɻ͔ͭɺ w ʮάϩʔόϧφϏήʔγϣϯʹμΠΞϩά͕ӅΕͪΌͬͯ·͢ʂʯͱ͔ى͜Δɻ[JOEFY ඞਢͳͷͰ೰ΈͷλωʹͳΓ͕ͪɻ w ࢹ֮తʹ8FCΛӾཡ͍ͯ͠ͳ͍ਓʹ͸ΞΫηγϒϧͰ͸ͳ͍ͱ͍͏࿩΋ɻ w ͨͩͷEJWͰ࣮૷͞Ε͍ͯΔ৔߹ɺͦΕ͕ຊ౰ʹzμΠΞϩʔάz͔Ͳ͏͔͸Θ͔Βͳ͍ɻ

Slide 11

Slide 11 text

ͦ͜ͰEJBMPHཁૉ w )5.-ʢקࠂʣ৽ػೳʂ w [JOEFYແࢹͰτοϓϨϕϧʹදࣔͯ͘͠ΕΔɻ w ౰વελΠϧ΋͋ͯΒΕΔɻ w EJBMPHͳͷͰμΠΞϩάͰ͋Δɻ

Slide 12

Slide 12 text

ࠓͩͱ$ISPNFͰ࢖͑Δ

Slide 13

Slide 13 text

࢖͍ํ

Something went wrong.

Something went wrong.

Slide 14

Slide 14 text

࢖͍ํ //—————————————— // html //——————————————

Something went wrong.

//—————————————— // javascript //—————————————— const dialog = document.querySelector('#dialog') // μΠΞϩά։͘(open෇༩ʣ dialog.show() // μΠΞϩάด͡Δ(open֎͢ʣ dialog.close()

Slide 15

Slide 15 text

ͦͷଞ w CBDLESPQͱ͍͏ٙࣅཁૉ͕࢖͑ɺμΠΞϩάͷഎܠͷελΠϧͷࢦఆ ΋Ͱ͖Δɻ w IUUQTHJUIVCDPN(PPHMF$ISPNFEJBMPHQPMZpMMCBDLESPQ w EJWJEbEJBMPHPWFSMBZ`EJWͱ͔ॻ͔ͳ͍͍ͯ͘

Slide 16

Slide 16 text

·ͱΊ w React16͔Βಋೖ͞ΕͨɺError Boundary ͰΤϥʔϋϯυϦϯάͷํ๏͕ ໌շʹͳͬͨɻ • Τϥʔൃੜ࣌ͷڍಈ΋มΘ͍ͬͯΔͷͰɺΞοϓσʔτͷࡍʹ͸ಋೖඞ ਢͩͱࢥΘΕΔɻ w ཁૉ͕ྑͦ͞͏ɻ w ͜Ε͔ΒରԠϒϥ΢β΋૿͍͑ͯ͘͸ͣͳͷͰɺ࣌ظΛݟͯੵۃతʹ࢖ ͍͍ͨɻ