$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.

    View Slide

  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/

    View Slide

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

    View Slide

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

    View Slide

  5. 5

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  12. 12
    ձһ޲͚ DPOTVNFS
    1SPWJEFS޲͚ FYUSBOFU

    ࠓ͸ඇެ։ʹͳ͍ͬͯ·͢

    View Slide

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

    View Slide

  14. 14
    7JB4UPSZCPPL

    View Slide

  15. 15
    ๻Βͷ 6*DPNQPOFOUT
    ࣗ࡞ͷυϝΠϯϨεͳڞ௨VJίϯϙʔωϯτϥΠϒϥϦ 4UPSZCPPL

    DPOTVNFS FYUSBOFU OFXBQQ
    ྑ͍͜ͱ΋ѱ͍͜ͱ΋৭ʑ͋ͬͨ

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

  20. 20
    TQBGSBNFXPSL

    View Slide

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

    View Slide

  22. 22
    \ʜ^"1*DMJFOU

    View Slide

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

    View Slide

  24. 24
    JOMO

    View Slide

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


    // ja:こんにちは en:Hello

    View Slide

  26. 26
    CMVFQSJOUT

    View Slide

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

    View Slide

  28. 28
    3FMJBCJMJUZ

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  32. 32
    ͦͯ͠Χλνʹ
    ϓϩηεʹ

    View Slide

  33. 33
    ,1*USBDLFS

    View Slide

  34. 34
    ,1*USBDLFS
    %BTICPBSE௨஌

    View Slide

  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

    View Slide

  36. 36
    3FWJFX

    View Slide

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

    View Slide

  38. 38
    50%0
    ɾ΋ͬͱൃ৴͢Δ ๻ͱ͔Α͜Έͪ͞Μ͕

    ɾ3FMJBCJMJUZʹର͢ΔऔΓ૊ΈΛ΋ͬͱ
    ϓϩηεʹ༹͚ࠐ·ͤΔ
    ɾϑϨʔϜϫʔΫͷWFSTJPOΛ΋ͬͱ࠷৽ʹૣ͘
    ௥͍͚ͭΔΑ͏ʹ͢Δ ࠓ΋͏͙͢

    View Slide

  39. 39
    50%0
    ɾ$PEFTQMJUUJOH3FMFBTF1BDLBHF
    NBOBHFNFOU ͜ͷن໛Ͱͷ։ൃͰͷ
    ՝୊͕ଟ͍

    ɾ͜ͷن໛Ͱ։ൃ଎౓ΛΑΓ͋͛ΔͷʹɺNJDSP
    GSPOUFOET͸Ռͨͯ͠༗ޮ͔ɺΛݕ౼͢Δ

    View Slide

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

    View Slide

  41. View Slide