presentation for https://reactjs-meetup.connpass.com/event/130682/
reference https://corp.rakuten.co.jp/careers/interview/takahiro/ https://speakerdeck.com/taka66/microservices-at-microservice-meetup-vol-dot-6
Rakuten Travel の フロントエンドについて(LT)May 27, 2019Takahiro FujiiUI Platform Section.Rakuten, Inc.
View Slide
25SBWFM1SPEVDU%FWFMPQNFOU%FQBSUNFOU6*1MBUGPSN4FDUJPO4FSWJDF%FWFMPQNFOU(SPVQ&OHJOFFSJOH.BOBHFSUI SectionService DevelopmentGroupSRE GroupFront-End Native App(Android/iOS)٥'SPOU&OEך倜鋉فٗتؙز涪鿇٥傈劤➂כ_ⶴ ؔؿءّ،ろגせ䓲 8FC'SPOU&OEؿآ؎ ةؕؼٗMicroservices@microservice Meetup vol.6ٍؗٔ،הַך鑧כֿֿ鴟ח㼰׃ךגתׅկhttps://corp.rakuten.co.jp/careers/interview/takahiro/
3!"#$%&'()*+FUDʜ͍ΖΜͳॴ͔Βདྷͨਓͱࣄ͍ͯ͠·͢
4React͔ͭͬͯΔͷʁͰ
5Microservices@microservice Meetup vol.6※ react logo licensehttps://github.com/reactjs/reactjs.org/blob/master/LICENSE-DOCS.mdトラベルのarchitectureの変化の流れについては、下記のスライドで触れています͍ɺͬͯ·͢
6ReactͰ৽نϓϩμΫτΛ։ൃ͍ͯ͠·͢ɻ ࠒΛػʹ
7ࠓɺΒ͕ͲͷΑ͏ͳͷΛ։ൃ͍ͯ͠Δ͔
8ܧ͗ૣʹհ͠·͢˞ΓεϥΠυ
9࣍ੈָఱτϥϕϧΛࢦ͍ͯ͠Δ ✈ ϓϩμΫτ܈
10DPOTVNFSFYUSBOFUVJDPNQPOFOUTGSBNFXPSLMJCSBSZPUIFST˞ൈਮձһ͚αʔϏεϓϩόΠμ͚αʔϏεVJίϯϙʔωϯτSFBDUDSFBUFBQQΛϕʔεͱͨ͠GSBNFXPSLϥΠϒϥϦ܈QEG SFDFJQU WPVDIFSFNBJM IUNMNBJMͳͲ
11DPOTVNFSFYUSBOFUVJDPNQPOFOUTGSBNFXPSLMJCSBSZPUIFST˞ൈਮձһ͚αʔϏεϓϩόΠμ͚αʔϏεVJίϯϙʔωϯτSFBDUDSFBUFBQQΛϕʔεͱͨ͠GSBNFXPSLϥΠϒϥϦ܈QEG SFDFJQU WPVDIFSFNBJM IUNMNBJMͳͲ
12ձһ͚ DPOTVNFS 1SPWJEFS͚ FYUSBOFUࠓඇެ։ʹͳ͍ͬͯ·͢
13DPOTVNFSFYUSBOFUVJDPNQPOFOUTGSBNFXPSLMJCSBSZPUIFST˞ൈਮձһ͚αʔϏεϓϩόΠμ͚αʔϏεVJίϯϙʔωϯτSFBDUDSFBUFBQQΛϕʔεͱͨ͠GSBNFXPSLϥΠϒϥϦ܈QEG SFDFJQU WPVDIFSFNBJM IUNMNBJMͳͲ
147JB4UPSZCPPL
15Βͷ 6*DPNQPOFOUTࣗ࡞ͷυϝΠϯϨεͳڞ௨VJίϯϙʔωϯτϥΠϒϥϦ 4UPSZCPPLDPOTVNFS FYUSBOFU OFXBQQྑ͍͜ͱѱ͍͜ͱ৭ʑ͋ͬͨ
16VJ DPNQPOFOUTDPOTVNFS FYUSBOFU OFXBQQɾ5 $POTVNFS։ൃͷՃɾ6*ͷڞ௨Խɾ5 5FBNશମͷ$PNQPOFOUࢥߟͷਪਐɾ5 ΈΜͳ͕$PNQPOFOUͷΈ߹ΘͤͰQBHFΛߟ͑ΒΕΔΑ͏ʹɾ5 ৽نϓϩμΫτ࡞Γ͍͢
17VJ DPNQPOFOUTɾ VJDPNQPOFOUϥΠϒϥϦͱɺऔΓࠐΉଆͷϓϩμΫτͷ13͕݁ߏͳසͰ͋ΔͷͰɺSFWJFXνϣοτਏ͍ɾ6 &YUSBOFUͱ$POTVNFSؒͷσβΠϯػೳ͕ࠩ͋Γɺ$POTVNFS͚ʹϥΠϒϥϦͨ͠Β&YUSBOFUόάΔΈ͍ͨͳ͜ͱ͋ͬͨ υϝΠϯϨε ɾ6 %FWFMPQFS%FTJHOFSͷDPNQPOFOUఆٛࠩඍົͳσβΠϯͷࠩɺHSJEσβΠϯΓ͍ͨʂͬͯͳͬͨΒͣΕͨΓ͢Δɾ6 Ұ෦ͷίϯϙʔωϯτ͕ෳࡶɾංେԽ
18VJ DPNQPOFOUTɾ7ࠓͷঢ়ଶͰͷશͳϥΠϒϥϦԽΛҰ୴ఘΊΔà &YUSBOFUVJ DPNQPOFOUT͔ΒҰ୴à Ұ୴͢Δɺকདྷతʹ·ͨ͏͔ దٓݕ౼ɾ 7%FTJHOFSͱDPNQPOFOUఆٛͷڞ௨ೝࣝΛ࡞ΔͨΊͷϨϏϡʔɾٞɾ.5(Λ࣮ࢪதվΊͯBUPNJDEFTJHOΛΔ߹ҙΛͱͬͨΓBUPNNPMFDVMFTͷൣғͷఆٛͨ͠ΓɾҰ෦ͷίϯϙʔωϯτ͕ෳࡶɾංେԽà ཁ݅ͷݟ͠ɺγϯϓϧʹͰ͖ͨΓɺΕΔෆཁͳͷੵۃతʹΔ&BTZUPDPPSEJOBUFDIBOHFTGPS6*4JOHMF13*NQSPWFDPEFSFWJFXRVBMJUZ
19DPOTVNFSFYUSBOFUVJDPNQPOFOUTGSBNFXPSLMJCSBSZPUIFST˞ൈਮձһ͚αʔϏεϓϩόΠμ͚αʔϏεVJίϯϙʔωϯτSFBDUDSFBUFBQQΛϕʔεͱͨ͠GSBNFXPSLϥΠϒϥϦ܈QEG SFDFJQU WPVDIFSFNBJM IUNMNBJMͳͲ
20TQBGSBNFXPSL
21ɾDSFBUFSFBDUBQQ͕ϕʔεɾSFBDUVOJWFSTBMIPUFYBNQMFʹJOTQJSFɾ3FBDU3FEVY443ɾ'MPX͚ͩͲ5ZQFTDSJQUʹ͢Δ͔ ɾ3FBDU3PVUFSͷόʔδϣϯΞοϓେมͩͬͨɾKFTU FO[ZNF ࠷ۙ DZQSFTTΛࢼ͍ͯ͠·͢TQBGSBNFXPSL
22\ʜ^"1*DMJFOU
23\ʜ^"1*DMJFOUɾJTPNPSQIJDGFUDIɾ5PLFOڞ௨ͷIFBEFSใͷऔΓѻ͍ɾڞ௨ͷΤϥʔॲཧɺ௨ͳͲimport fetchApi from 'trv-fed-api-client';
24JOMO
25JOMOɾ੩తϝοηʔδɺɺ͓ۚɾి൪߸ɺ໊લɺॅॴ FUDɾNPNFOUʹͪΐͬͱखΛՃ͑ͨ͘Β͍Ͱॏ͍ɺ͍ɺEBUFGOTʹ͔͍͑ͨ // ja:こんにちは en:Hello
26CMVFQSJOUT
27CMVFQSJOUTɾSFEVYDMJɾUFTUDPEF࡞ΒΕΔredux generate duck redux generate dumb redux generate selector redux generate smart redux generate extranet-fields redux generate extranet-widget
283FMJBCJMJUZ
293FMJBCJMJUZ*TTVFɾDPNQPOFOUͷංେԽ QFSGPSNBODFྼԽ CVOEMFTJ[FͷංେԽ FUDվળ ྼԽΛ܁Γฦ͢ɾͭ·Γɺมߋʹର͢ΔӨڹൣғ͕ཧͰ͖ͯͳ͍ ɾ4-04-*։ൃޮੑʹؔ͢ΔUBSHFU͕ͳ͍ ɾकഁͷक͕Ͱ͖ͯͶʔΑʂ
30UI SectionService DevelopmentGroupSRE GroupFront-End Native App(Android/iOS)'SPOU&OEͷ3FMJBCJMJUZʹ͍ͭͯߟ͑Δ
313PMF3FTQPOTJCJMJUZ3FMJBCMF"QQMJDBUJPO 1FSGPSNBODF 4-0 4FDVSJUZ%FWFMPQNFOU&GpDJFODZ 'SBNFXPSL %FWFMPQNFOU&OWJSPONFOU 4VTUBJOBCMF$PEF $*$%TVQQPSU3FMJBCMF4FSWJDF "WBJMBCJMJUZ 4-00QFSBUJPO -PHHJOH .POJUPSJOH 3FMFBTF 3FMFBTF.BOBHFNFOU 4JNQMJGZ0QFSBUJPO4DBMBCMF0QFSBUJPO $BQBDJUZ1MBOOJOH 4JNQMJGZUPCFTDBMF
32ͦͯ͠Χλνʹϓϩηεʹ
33,1*USBDLFS
34,1*USBDLFS%BTICPBSE௨
35,1*USBDLFSɾ1FSGPSNBODF $PWFSBHF $PNQMFYJUZ #VJME 1SFDPNNJU CVOEMFTJ[FͳͲΛUSBDL͢ΔɾMJHIUIPVTF36.͔ΒͱΕΔNFUSJYͳͲΛ͏Service DevelopmentGroupSRE Group「昨⽇のあれで遅くなってるな、、」5「あ、多分ここのcomponentの設計⾒直せば、解消できます」次の⽇「このページ、0.2早くなりました︕」5 5 5
363FWJFX
373FWJFXɾ࠷ۙ13࣌ʹ֬ೝ༻ͷJOTUBODF্ཱ͕ͪΔΑ͏ʹ
3850%0ɾͬͱൃ৴͢Δ ͱ͔Α͜Έͪ͞Μ͕ɾ3FMJBCJMJUZʹର͢ΔऔΓΈΛͬͱϓϩηεʹ༹͚ࠐ·ͤΔɾϑϨʔϜϫʔΫͷWFSTJPOΛͬͱ࠷৽ʹૣ͍͚ͭ͘ΔΑ͏ʹ͢Δ ࠓ͏͙͢
3950%0ɾ$PEFTQMJUUJOH3FMFBTF1BDLBHFNBOBHFNFOU ͜ͷنͰͷ։ൃͰͷ՝͕ଟ͍ ɾ͜ͷنͰ։ൃΛΑΓ͋͛ΔͷʹɺNJDSPGSPOUFOETՌͨͯ͠༗ޮ͔ɺΛݕ౼͢Δ
408FBSFIJSJOHຊਓͷΤϯδχΞͷํͪΖΜืूதͰ͢
taka66
akiroom
kei_s
radkmb
rilmayer
revcomm_inc
onecareer_tech
naohachi89
tkhresk
chloe463
kojira
toshi0383
bengo4com
akmur
chriscoyier
colly
cromwellryan
sferik
lauravandoore
malarkey
rasmusluckow
rmw
danielanewman
addyosmani
deanohume