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

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

476e7a02d660b5dd640cb020ec0a9085?s=128

Takahiro Fujii

May 27, 2019
Tweet

Transcript

  1. 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/
  2. 10.

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

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

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

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

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

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

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

    ɾ5 ΈΜͳ͕$PNQPOFOUͷ૊Έ߹ΘͤͰQBHFΛߟ͑ΒΕΔΑ͏ʹ ɾ5 ৽نϓϩμΫτ࡞Γ΍͍͢
  6. 17.

    17 VJ DPNQPOFOUT ɾ VJDPNQPOFOUϥΠϒϥϦͱɺ औΓࠐΉଆͷϓϩμΫτͷ13͕݁ߏͳස౓Ͱ͋ΔͷͰɺSFWJFXνϣοτਏ͍ ɾ6 &YUSBOFUͱ$POTVNFSؒͷσβΠϯػೳࠩ෼͕͋Γɺ $POTVNFS޲͚ʹϥΠϒϥϦ௚ͨ͠Β &YUSBOFUόάΔΈ͍ͨͳ͜ͱ΋͋ͬͨ

    υϝΠϯϨε ɾ6 %FWFMPQFS%FTJHOFSͷDPNQPOFOUఆٛࠩ෼ ඍົͳσβΠϯͷࠩ෼΍ɺHSJEσβΠϯ΍Γ͍ͨʂͬͯͳͬͨΒͣΕͨΓ͢Δ ɾ6 Ұ෦ͷίϯϙʔωϯτ͕ෳࡶɾංେԽ
  7. 18.

    18 VJ DPNQPOFOUT ɾ7ࠓͷঢ়ଶͰͷ׬શͳϥΠϒϥϦԽΛҰ୴ఘΊΔ à &YUSBOFU͸VJ DPNQPOFOUT͔ΒҰ୴཭୤ à Ұ୴཭୤͢Δ΋ɺকདྷతʹ·ͨ࢖͏͔΋ దٓݕ౼

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

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

    SFBDUDSFBUFBQQΛϕʔεͱͨ͠ GSBNFXPSL΍಺੡ϥΠϒϥϦ܈ QEG SFDFJQU WPVDIFS ΍ FNBJM IUNMNBJM ͳͲ
  9. 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>
  10. 30.

    30 UI Section Service Development Group SRE Group Front-End Native

    App (Android/iOS) 'SPOU&OEͷ3FMJBCJMJUZ ʹ͍ͭͯߟ͑Δ
  11. 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
  12. 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
  13. 36.
  14. 41.