楽天トラベルのフロントエンドについて(React Meetup)

by Takahiro Fujii

Slide 1

Slide 1 text

Rakuten Travel のフロントエンドについて(LT) May 27, 2019 Takahiro Fujii UI Platform Section. Rakuten, Inc.

Slide 2

Slide 2 text

2 5SBWFM1SPEVDU%FWFMPQNFOU%FQBSUNFOU 6*1MBUGPSN4FDUJPO 4FSWJDF%FWFMPQNFOU(SPVQ &OHJOFFSJOH.BOBHFS UI Section Service Development Group SRE Group Front-End Native App (Android/iOS) ٥'SPOU&OEך倜鋉فٗتؙزꟚ涪鿇꥘ ٥傈劤➂כ_ⶴ ؔؿءّ،ろ׭גせ䓲 8FC'SPOU&OE ؿآ؎ ةؕؼٗ Microservices@microservice Meetup vol.6 ٍؗٔ،הַך鑧כֿֿ׵鴟ח㼰׃ך׏גתׅկ https://corp.rakuten.co.jp/careers/interview/takahiro/

Slide 3

Slide 3 text

3 !"#$%&'()*+ FUDʜ ͍ΖΜͳॴ͔Βདྷͨਓͱ࢓ࣄ͍ͯ͠·͢

Slide 4

Slide 4 text

4 React ͔ͭͬͯΔͷʁ Ͱ

Slide 5

Slide 5 text

5 Microservices@microservice Meetup vol.6 ※ react logo license https://github.com/reactjs/reactjs.org/blob/master/LICENSE-DOCS.md トラベルのarchitectureの変化の流れについては、下記のスライドで触れています ͸͍ɺ࢖ͬͯ·͢

Slide 6

Slide 6 text

6 React Ͱ৽نϓϩμΫτΛ։ൃ͍ͯ͠·͢ɻ ೥ࠒΛػʹ

Slide 7

Slide 7 text

7 ࠓ೔͸ɺ๻Β͕ ͲͷΑ͏ͳ΋ͷΛ ։ൃ͍ͯ͠Δ͔

Slide 8

Slide 8 text

8 ໼ܧ͗ૣʹ঺հ͠·͢ ˞࢒ΓεϥΠυ

Slide 9

Slide 9 text

9 ࣍ੈ୅ָఱτϥϕϧΛ໨ࢦ͍ͯ͠Δ ✈ ϓϩμΫτ܈

Slide 10

Slide 10 text

10 DPOTVNFS FYUSBOFU VJDPNQPOFOUT GSBNFXPSLMJCSBSZ PUIFST ˞ൈਮ ձһ޲͚αʔϏε ϓϩόΠμ޲͚αʔϏε VJίϯϙʔωϯτ SFBDUDSFBUFBQQΛϕʔεͱͨ͠ GSBNFXPSL΍಺੡ϥΠϒϥϦ܈ QEG SFDFJQU WPVDIFS ΍ FNBJM IUNMNBJM ͳͲ

Slide 11

Slide 11 text

11 DPOTVNFS FYUSBOFU VJDPNQPOFOUT GSBNFXPSLMJCSBSZ PUIFST ˞ൈਮ ձһ޲͚αʔϏε ϓϩόΠμ޲͚αʔϏε VJίϯϙʔωϯτ SFBDUDSFBUFBQQΛϕʔεͱͨ͠ GSBNFXPSL΍಺੡ϥΠϒϥϦ܈ QEG SFDFJQU WPVDIFS ΍ FNBJM IUNMNBJM ͳͲ

Slide 12

Slide 12 text

12 ձһ޲͚ DPOTVNFS 1SPWJEFS޲͚ FYUSBOFU ࠓ͸ඇެ։ʹͳ͍ͬͯ·͢

Slide 13

Slide 13 text

13 DPOTVNFS FYUSBOFU VJDPNQPOFOUT GSBNFXPSLMJCSBSZ PUIFST ˞ൈਮ ձһ޲͚αʔϏε ϓϩόΠμ޲͚αʔϏε VJίϯϙʔωϯτ SFBDUDSFBUFBQQΛϕʔεͱͨ͠ GSBNFXPSL΍಺੡ϥΠϒϥϦ܈ QEG SFDFJQU WPVDIFS ΍ FNBJM IUNMNBJM ͳͲ

Slide 14

Slide 14 text

14 7JB4UPSZCPPL

Slide 15

Slide 15 text

15 ๻Βͷ 6*DPNQPOFOUT ࣗ࡞ͷυϝΠϯϨεͳڞ௨VJίϯϙʔωϯτϥΠϒϥϦ 4UPSZCPPL DPOTVNFS FYUSBOFU OFXBQQ ྑ͍͜ͱ΋ѱ͍͜ͱ΋৭ʑ͋ͬͨ

Slide 16

Slide 16 text

16 VJ DPNQPOFOUT DPOTVNFS FYUSBOFU OFXBQQ ɾ5 $POTVNFS։ൃ଎౓ͷՃ଎ɾ6*ͷڞ௨Խ ɾ5 5FBNશମͷ$PNQPOFOUࢥߟͷਪਐ ɾ5 ΈΜͳ͕$PNQPOFOUͷ૊Έ߹ΘͤͰQBHFΛߟ͑ΒΕΔΑ͏ʹ ɾ5 ৽نϓϩμΫτ࡞Γ΍͍͢

Slide 17

Slide 17 text

17 VJ DPNQPOFOUT ɾ VJDPNQPOFOUϥΠϒϥϦͱɺ औΓࠐΉଆͷϓϩμΫτͷ13͕݁ߏͳස౓Ͱ͋ΔͷͰɺSFWJFXνϣοτਏ͍ ɾ6 &YUSBOFUͱ$POTVNFSؒͷσβΠϯػೳࠩ෼͕͋Γɺ $POTVNFS޲͚ʹϥΠϒϥϦ௚ͨ͠Β &YUSBOFUόάΔΈ͍ͨͳ͜ͱ΋͋ͬͨ υϝΠϯϨε ɾ6 %FWFMPQFS%FTJHOFSͷDPNQPOFOUఆٛࠩ෼ ඍົͳσβΠϯͷࠩ෼΍ɺHSJEσβΠϯ΍Γ͍ͨʂͬͯͳͬͨΒͣΕͨΓ͢Δ ɾ6 Ұ෦ͷίϯϙʔωϯτ͕ෳࡶɾංେԽ

Slide 18

Slide 18 text

18 VJ DPNQPOFOUT ɾ7ࠓͷঢ়ଶͰͷ׬શͳϥΠϒϥϦԽΛҰ୴ఘΊΔ à &YUSBOFU͸VJ DPNQPOFOUT͔ΒҰ୴཭୤ à Ұ୴཭୤͢Δ΋ɺকདྷతʹ·ͨ࢖͏͔΋ దٓݕ౼ ɾ 7%FTJHOFSͱDPNQPOFOUఆٛͷڞ௨ೝࣝΛ࡞ΔͨΊͷ ϨϏϡʔɾٞ࿦ɾ.5(Λ࣮ࢪத վΊͯBUPNJDEFTJHOΛ΍Δ߹ҙΛͱͬͨΓ BUPN΍NPMFDVMFTͷ੹೚ൣғͷఆٛͨ͠Γ ɾҰ෦ͷίϯϙʔωϯτ͕ෳࡶɾංେԽ à ཁ݅ͷݟ௚͠ɺγϯϓϧʹͰ͖ͨΓɺ࡟ΕΔෆཁͳ΋ͷ͸ੵۃతʹ࡟Δ &BTZUPDPPSEJOBUFDIBOHFTGPS6* 4JOHMF13 *NQSPWFDPEFSFWJFXRVBMJUZ

Slide 19

Slide 19 text

19 DPOTVNFS FYUSBOFU VJDPNQPOFOUT GSBNFXPSLMJCSBSZ PUIFST ˞ൈਮ ձһ޲͚αʔϏε ϓϩόΠμ޲͚αʔϏε VJίϯϙʔωϯτ SFBDUDSFBUFBQQΛϕʔεͱͨ͠ GSBNFXPSL΍಺੡ϥΠϒϥϦ܈ QEG SFDFJQU WPVDIFS ΍ FNBJM IUNMNBJM ͳͲ

Slide 20

Slide 20 text

20 TQBGSBNFXPSL

Slide 21

Slide 21 text

21 ɾDSFBUFSFBDUBQQ͕ϕʔε ɾSFBDUVOJWFSTBMIPUFYBNQMFʹ΋JOTQJSF ɾ3FBDU3FEVY443 ɾ'MPX͚ͩͲ5ZQFTDSJQUʹ͢Δ͔΋ ɾ3FBDU3PVUFSͷόʔδϣϯΞοϓେมͩͬͨ ɾKFTU FO[ZNF ࠷ۙ DZQSFTTΛࢼ͍ͯ͠·͢ TQBGSBNFXPSL

Slide 22

Slide 22 text

22 \ʜ^"1*DMJFOU

Slide 23

Slide 23 text

23 \ʜ^"1*DMJFOU ɾJTPNPSQIJDGFUDI ɾ5PLFO΍ڞ௨ͷIFBEFS৘ใͷऔΓѻ͍ ɾڞ௨ͷΤϥʔॲཧɺ௨஌ͳͲ import fetchApi from 'trv-fed-api-client';

Slide 24

Slide 24 text

24 JOMO

Slide 25

Slide 25 text

25 JOMO ɾ੩తϝοηʔδɺ೔෇ɺ͓ۚ ɾి࿩൪߸ɺ໊લɺॅॴ FUD ɾ೔෇͸NPNFOUʹͪΐͬͱखΛՃ͑ͨ͘Β͍ Ͱ΋ॏ͍ɺ஗͍ɺEBUFGOTʹ͔͍͑ͨ // ja:こんにちは en:Hello

Slide 26

Slide 26 text

26 CMVFQSJOUT

Slide 27

Slide 27 text

27 CMVFQSJOUT ɾSFEVYDMJ ɾUFTUDPEF΋࡞ΒΕΔ redux generate duck redux generate dumb redux generate selector redux generate smart redux generate extranet-fields redux generate extranet-widget

Slide 28

Slide 28 text

28 3FMJBCJMJUZ

Slide 29

Slide 29 text

29 3FMJBCJMJUZ *TTVF ɾDPNQPOFOUͷංେԽ ΍QFSGPSNBODFྼԽ CVOEMFTJ[Fͷං େԽ FUDվળ ྼԽΛ܁Γฦ͢ ɾͭ·Γɺมߋʹର͢ΔӨڹൣғ͕؅ཧͰ͖ͯͳ͍ ɾ4-0΍4-*΍։ൃޮ཰ੑʹؔ͢ΔUBSHFU͕ͳ͍ ɾकഁ཭ͷक͕Ͱ͖ͯͶʔΑʂ

Slide 30

Slide 30 text

30 UI Section Service Development Group SRE Group Front-End Native App (Android/iOS) 'SPOU&OEͷ3FMJBCJMJUZ ʹ͍ͭͯߟ͑Δ

Slide 31

Slide 31 text

31 3PMF3FTQPOTJCJMJUZ 3FMJBCMF"QQMJDBUJPO 1FSGPSNBODF 4-0 4FDVSJUZ %FWFMPQNFOU&GpDJFODZ 'SBNFXPSL %FWFMPQNFOU&OWJSPONFOU 4VTUBJOBCMF$PEF $*$%TVQQPSU 3FMJBCMF4FSWJDF "WBJMBCJMJUZ 4-0 0QFSBUJPO -PHHJOH .POJUPSJOH 3FMFBTF 3FMFBTF.BOBHFNFOU 4JNQMJGZ0QFSBUJPO 4DBMBCMF0QFSBUJPO $BQBDJUZ1MBOOJOH 4JNQMJGZUPCFTDBMF

Slide 32

Slide 32 text

32 ͦͯ͠Χλνʹ ϓϩηεʹ

Slide 33

Slide 33 text

33 ,1*USBDLFS

Slide 34

Slide 34 text

34 ,1*USBDLFS %BTICPBSE௨஌

Slide 35

Slide 35 text

35 ,1*USBDLFS ɾ1FSGPSNBODF $PWFSBHF $PNQMFYJUZ #VJME 1SFDPNNJU CVOEMFTJ[FͳͲΛUSBDL͢Δ ɾMJHIUIPVTF΍36.͔ΒͱΕΔNFUSJYͳͲΛ࢖͏ Service Development Group SRE Group ‍「昨⽇のあれで遅くなってるな、、」 5「あ、多分ここのcomponentの設計⾒直せば、解消できます」次の⽇ ‍「このページ、0.2早くなりました︕」 5 5 5

Slide 36

Slide 36 text

36 3FWJFX

Slide 37

Slide 37 text

37 3FWJFX ɾ࠷ۙ͸13࣌ʹ֬ೝ༻ͷ JOTUBODF΋্ཱ͕ͪΔΑ͏ʹ

Slide 38

Slide 38 text

38 50%0 ɾ΋ͬͱൃ৴͢Δ ๻ͱ͔Α͜Έͪ͞Μ͕ ɾ3FMJBCJMJUZʹର͢ΔऔΓ૊ΈΛ΋ͬͱ ϓϩηεʹ༹͚ࠐ·ͤΔ ɾϑϨʔϜϫʔΫͷWFSTJPOΛ΋ͬͱ࠷৽ʹૣ͘ ௥͍͚ͭΔΑ͏ʹ͢Δ ࠓ΋͏͙͢

Slide 39

Slide 39 text

39 50%0 ɾ$PEFTQMJUUJOH3FMFBTF1BDLBHF NBOBHFNFOU ͜ͷن໛Ͱͷ։ൃͰͷ ՝୊͕ଟ͍ ɾ͜ͷن໛Ͱ։ൃ଎౓ΛΑΓ͋͛ΔͷʹɺNJDSP GSPOUFOET͸Ռͨͯ͠༗ޮ͔ɺΛݕ౼͢Δ