$30 off During Our Annual Pro Sale. View Details »

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

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

Takahiro Fujii

May 27, 2019
Tweet

More Decks by Takahiro Fujii

Other Decks in Technology

Transcript

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

    Platform Section. Rakuten, Inc.
  2. 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/
  3. 3 !"#$%&'()*+ FUDʜ ͍ΖΜͳॴ͔Βདྷͨਓͱ࢓ࣄ͍ͯ͠·͢

  4. 4 React ͔ͭͬͯΔͷʁ Ͱ

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

    ͸͍ɺ࢖ͬͯ·͢
  6. 6 React Ͱ৽نϓϩμΫτΛ։ൃ͍ͯ͠·͢ɻ  ೥ࠒΛػʹ

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

  8. 8 ໼ܧ͗ૣʹ঺հ͠·͢ ˞࢒ΓεϥΠυ

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

  10. 10 DPOTVNFS FYUSBOFU VJDPNQPOFOUT GSBNFXPSLMJCSBSZ PUIFST ˞ൈਮ ձһ޲͚αʔϏε ϓϩόΠμ޲͚αʔϏε VJίϯϙʔωϯτ

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

    SFBDUDSFBUFBQQΛϕʔεͱͨ͠ GSBNFXPSL΍಺੡ϥΠϒϥϦ܈ QEG SFDFJQU WPVDIFS ΍ FNBJM IUNMNBJM ͳͲ
  12. 12 ձһ޲͚ DPOTVNFS 1SPWJEFS޲͚ FYUSBOFU ࠓ͸ඇެ։ʹͳ͍ͬͯ·͢

  13. 13 DPOTVNFS FYUSBOFU VJDPNQPOFOUT GSBNFXPSLMJCSBSZ PUIFST ˞ൈਮ ձһ޲͚αʔϏε ϓϩόΠμ޲͚αʔϏε VJίϯϙʔωϯτ

    SFBDUDSFBUFBQQΛϕʔεͱͨ͠ GSBNFXPSL΍಺੡ϥΠϒϥϦ܈ QEG SFDFJQU WPVDIFS ΍ FNBJM IUNMNBJM ͳͲ
  14. 14 7JB4UPSZCPPL

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

  16. 16 VJ DPNQPOFOUT DPOTVNFS FYUSBOFU OFXBQQ ɾ5 $POTVNFS։ൃ଎౓ͷՃ଎ɾ6*ͷڞ௨Խ ɾ5 5FBNશମͷ$PNQPOFOUࢥߟͷਪਐ

    ɾ5 ΈΜͳ͕$PNQPOFOUͷ૊Έ߹ΘͤͰQBHFΛߟ͑ΒΕΔΑ͏ʹ ɾ5 ৽نϓϩμΫτ࡞Γ΍͍͢
  17. 17 VJ DPNQPOFOUT ɾ VJDPNQPOFOUϥΠϒϥϦͱɺ औΓࠐΉଆͷϓϩμΫτͷ13͕݁ߏͳස౓Ͱ͋ΔͷͰɺSFWJFXνϣοτਏ͍ ɾ6 &YUSBOFUͱ$POTVNFSؒͷσβΠϯػೳࠩ෼͕͋Γɺ $POTVNFS޲͚ʹϥΠϒϥϦ௚ͨ͠Β &YUSBOFUόάΔΈ͍ͨͳ͜ͱ΋͋ͬͨ

    υϝΠϯϨε ɾ6 %FWFMPQFS%FTJHOFSͷDPNQPOFOUఆٛࠩ෼ ඍົͳσβΠϯͷࠩ෼΍ɺHSJEσβΠϯ΍Γ͍ͨʂͬͯͳͬͨΒͣΕͨΓ͢Δ ɾ6 Ұ෦ͷίϯϙʔωϯτ͕ෳࡶɾංେԽ
  18. 18 VJ DPNQPOFOUT ɾ7ࠓͷঢ়ଶͰͷ׬શͳϥΠϒϥϦԽΛҰ୴ఘΊΔ à &YUSBOFU͸VJ DPNQPOFOUT͔ΒҰ୴཭୤ à Ұ୴཭୤͢Δ΋ɺকདྷతʹ·ͨ࢖͏͔΋ దٓݕ౼

    ɾ 7%FTJHOFSͱDPNQPOFOUఆٛͷڞ௨ೝࣝΛ࡞ΔͨΊͷ ϨϏϡʔɾٞ࿦ɾ.5(Λ࣮ࢪத վΊͯBUPNJDEFTJHOΛ΍Δ߹ҙΛͱͬͨΓ BUPN΍NPMFDVMFTͷ੹೚ൣғͷఆٛͨ͠Γ ɾҰ෦ͷίϯϙʔωϯτ͕ෳࡶɾංେԽ à ཁ݅ͷݟ௚͠ɺγϯϓϧʹͰ͖ͨΓɺ࡟ΕΔෆཁͳ΋ͷ͸ੵۃతʹ࡟Δ &BTZUPDPPSEJOBUFDIBOHFTGPS6* 4JOHMF13 *NQSPWFDPEFSFWJFXRVBMJUZ
  19. 19 DPOTVNFS FYUSBOFU VJDPNQPOFOUT GSBNFXPSLMJCSBSZ PUIFST ˞ൈਮ ձһ޲͚αʔϏε ϓϩόΠμ޲͚αʔϏε VJίϯϙʔωϯτ

    SFBDUDSFBUFBQQΛϕʔεͱͨ͠ GSBNFXPSL΍಺੡ϥΠϒϥϦ܈ QEG SFDFJQU WPVDIFS ΍ FNBJM IUNMNBJM ͳͲ
  20. 20 TQBGSBNFXPSL

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

    TQBGSBNFXPSL
  22. 22 \ʜ^"1*DMJFOU

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

  24. 24 JOMO

  25. 25 JOMO ɾ੩తϝοηʔδɺ೔෇ɺ͓ۚ ɾి࿩൪߸ɺ໊લɺॅॴ FUD ɾ೔෇͸NPNFOUʹͪΐͬͱखΛՃ͑ͨ͘Β͍ Ͱ΋ॏ͍ɺ஗͍ɺEBUFGOTʹ͔͍͑ͨ <L10nDate locale={language} value={date}

    format={ʻL'} /> <I18n id=”hoge“ /> // ja:こんにちは en:Hello
  26. 26 CMVFQSJOUT

  27. 27 CMVFQSJOUT ɾSFEVYDMJ ɾUFTUDPEF΋࡞ΒΕΔ redux generate duck <camelCaseActionReducerName> redux generate

    dumb <PascalCaseComponentName> redux generate selector <camelCaseSelectorName> redux generate smart <PascalCaseContainerName> redux generate extranet-fields <PascalCaseExtranetFieldName> redux generate extranet-widget <PascalCaseExtranetWidgetName>
  28. 28 3FMJBCJMJUZ

  29. 29 3FMJBCJMJUZ *TTVF ɾDPNQPOFOUͷංେԽ ΍QFSGPSNBODFྼԽ CVOEMFTJ[Fͷං େԽ FUDվળ ྼԽΛ܁Γฦ͢ ɾͭ·Γɺมߋʹର͢ΔӨڹൣғ͕؅ཧͰ͖ͯͳ͍

    ɾ4-0΍4-*΍։ൃޮ཰ੑʹؔ͢ΔUBSHFU͕ͳ͍ ɾकഁ཭ͷक͕Ͱ͖ͯͶʔΑʂ
  30. 30 UI Section Service Development Group SRE Group Front-End Native

    App (Android/iOS) 'SPOU&OEͷ3FMJBCJMJUZ ʹ͍ͭͯߟ͑Δ
  31. 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
  32. 32 ͦͯ͠Χλνʹ ϓϩηεʹ

  33. 33 ,1*USBDLFS

  34. 34 ,1*USBDLFS %BTICPBSE௨஌

  35. 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
  36. 36 3FWJFX

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

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

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

  40. 40 8FBSFIJSJOH ೔ຊਓͷΤϯδχΞͷํ΋΋ͪΖΜืूதͰ͢

  41. None