Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Compositional Layoutは銀の弾丸になるのか~実際に導入してみて得た知見、全て公開しちゃいます~

Compositional Layoutは銀の弾丸になるのか~実際に導入してみて得た知見、全て公開しちゃいます~

After iOSDC 2021のLTで公開した内容になります。

0187ef0e45a8d745eafc223cf2ebb90c?s=128

Satoshi Komatsu

October 07, 2021
Tweet

Transcript

  1. Compositional Layout͸ ۜͷ஄ؙͱͳΔͷ͔ʂʁ ~࣮ࡍʹಋೖͯ͠Έͯಘͨ஌ݟɺશͯެ։ͪ͠Ό͍·͢~ גࣜձࣾZOZ O ZOZOTOWN։ൃຊ෦ ZOZOTOWNΞϓϦ෦ iOSϒϩοΫ খদ

    ޛ Copyright © ZOZO, Inc.
  2. © ZOZO, Inc. ͱ͠(@tosh_3) 2020೥ZOZOςΫϊϩδʔζ(ݱZOZO)ʹ৽ଔೖࣾɻ ࠷ۙͷڵຯ͸CSͱSwiftUIɻ 2 גࣜձࣾZOZ O ZOZOTOWN։ൃຊ෦

    ZOZOTOWNΞϓϦ෦ iOSϒϩοΫ
  3. © ZOZO, Inc. https://zozo.jp/ 3 • ϑΝογϣϯ௨ൢαΠτ • 1,400Ҏ্ͷγϣοϓɺ8,400Ҏ্ͷϒϥϯυͷऔΓѻ͍ •

    ৗ࣌83ສ఺Ҏ্ͷ঎඼ΞΠςϜ਺ͱຖ೔ฏۉ2,900఺Ҏ্ͷ৽ண ঎඼Λܝࡌʢ2021೥ 6݄຤࣌఺ʣ • ϒϥϯυݹணͷϑΝογϣϯκʔϯʮZOZOUSEDʯ΍ ίεϝઐ໳ϞʔϧʮZOZOCOSMEʯɺۺͷઐ໳Ϟʔϧ ʮZOZOSHOESʯɺϥάδϡΞϦʔˍσβΠφʔζκʔϯ ʮZOZOVILLAʯΛల։ • ଈ೔഑ૹαʔϏε • ΪϑτϥοϐϯάαʔϏε • πέ෷͍ ͳͲ
  4. © ZOZO, Inc. 4 $PNQPTJUJPOBM-BZPVUʹ͍ͭͯ  © ZOZO, Inc.

  5. © ZOZO, Inc. 5 $PNQPTJUJPOBM-BZPVUʹ͍ͭͯ 

  6. © ZOZO, Inc. 6 $PNQPTJUJPOBM-BZPVUʹ͍ͭͯ  "QQ4UPSF ෳࡶͳϨΠΞ΢τΛҰͭͷ$PMMFDUJPO7JFXͰ ؅ཧ͢Δ͜ͱʹ੒ޭ ࢀরɿhttps://developer.apple.com/videos/play/wwdc2019/215/?time=147

  7. © ZOZO, Inc. 7 $PNQPTJUJPOBM-BZPVUʹ͍ͭͯ  J04%$+BQBOͰ $PNQPTJUJPOBM-BZPVUʹ͍ͭͯ৮Ε͍ͯͨηογϣϯ

  8. © ZOZO, Inc. 8 ;0;0508/ͷ$PNQPTJUJPOBM-BZPVUରԠ  © ZOZO, Inc.

  9. © ZOZO, Inc. 9  େن໛ϦχϡʔΞϧʹ൐͏ɺେ෯ͳσβΠϯมߋ ˠطଘͷઃܭʹରͯ͠ϝεΛೖΕΔ͜ͱ͕Ͱ͖ͨ ;0;0508/ͷ$PNQPTJUJPOBM-BZPVUରԠ

  10. © ZOZO, Inc. 10 ;0;0508/ͷ$PNQPTJUJPOBM-BZPVUରԠ  ;0;0508/ ԣʹεΫϩʔϧͰ͖ΔηΫγϣϯΛ͸͡Ίͱ͠ɺ͞·͟· ͳλΠϓͷηΫγϣϯ͕ଘࡏ͢Δɻ ηΫγϣϯͷ਺ͱͦͷத਎͸ϓϩϞʔγϣϯʹΑͬͯஞҰ

    มԽ͢Δɻ
  11. © ZOZO, Inc. 11  Ͱ͸ͳͥ$PNQPTJUJPOBM-BZPVUʁ ;0;0508/ͷ$PNQPTJUJPOBM-BZPVUରԠ $PNQPTJUJPOBM-BZPVU $PMMFDUJPO7JFXJO$PMMFDUJPO7JFX

  12. © ZOZO, Inc. 12  ;0;0508/ͷ$PNQPTJUJPOBM-BZPVUରԠ $PMMFDUJPO7JFXJO$PMMFDUJPO7JFX $PNQPTJUJPOBM-BZPVU •શମΛҰͭͷCollectionViewͱͯ͠ѻ͏͜ͱ ͕Ͱ͖Δ

    •એݴతʹॻ͘͜ͱ͕Ͱ͖Δ •CollectionViewͷதʹԣ޲͖ͷεΫϩʔϧ͕ ͋ΔViewΛ༰қʹઃఆ͢Δ͜ͱ͕Ͱ͖Δ •CellͷPaging΍ࠨΑͤͳͲΛ؆୯ʹߦ͏͜ ͱ͕Ͱ͖Δ •ෳࡶͳϨΠΞ΢τͰ΋؆୯ʹॻ͘͜ͱ͕ 
 Ͱ͖Δ •ZOZOTOWNͷதͰ΋࣮૷࣮੷͕͋Δ •ॊೈͳϨΠΞ΢τʹରԠ͢Δ͜ͱ͕Ͱ͖Δ •iOS12ҎલͷOSͰ΋࢖༻͢Δ͜ͱ͕Ͱ͖Δ •ΑΓॊೈͳCellͷ੍ޚΛߦ͏͜ͱ͕Ͱ͖Δ
  13. © ZOZO, Inc. 13  ;0;0508/ͷ$PNQPTJUJPOBM-BZPVUରԠ • ৽σβΠϯ͸App Storeͷ༷ʹԣεΫϩʔϧ Λଟ༻

    • ྆ύλʔϯΛൺֱͨ݁͠Ռɺ 
 ίʔυྔ͸ݮগ 
 ηΫγϣϯͷ௥ՃͳͲͷॊೈੑ͸্͕ͬͨ •શମΛҰͭͷCollectionViewͱͯ͠ѻ͏͜ͱ ͕Ͱ͖Δ •એݴతʹॻ͘͜ͱ͕Ͱ͖Δ •CollectionViewͷதʹԣ޲͖ͷεΫϩʔϧ͕ ͋ΔViewΛ༰қʹઃఆ͢Δ͜ͱ͕Ͱ͖Δ •CellͷPaging΍ࠨΑͤͳͲΛ؆୯ʹߦ͏͜ ͱ͕Ͱ͖Δ •ෳࡶͳϨΠΞ΢τͰ΋؆୯ʹॻ͘͜ͱ͕ 
 Ͱ͖Δ $PNQPTJUJPOBM-BZPVU
  14. © ZOZO, Inc. 14  ;0;0508/ͷ$PNQPTJUJPOBM-BZPVUରԠ *#1$PMMFDUJPO7JFX $PNQPTJUJPOBM-BZPVU ؛઒͞ΜʹΑΔαϙʔτ

  15. © ZOZO, Inc. 15 $PNQPTJUJPOBM-BZPVUΛ࢖༻ͨ͠ઃܭ  © ZOZO, Inc.

  16. © ZOZO, Inc. 16 $PNQPTJUJPOBM-BZPVUΛ࢖༻ͨ͠ઃܭ  $PNQPTJUJPOBM-BZPVU $PNQPTJUJPOBM-BZPVU ✖︎ 

    %JGGBCMF%BUB4PVSDF
  17. © ZOZO, Inc. 17 $PNQPTJUJPOBM-BZPVUʹؔ͢Δ5JQT  © ZOZO, Inc.

  18. © ZOZO, Inc. 18 $PNQPTJUJPOBM-BZPVUʹؔ͢Δ5JQT  $PNQPTJUJPOBM-BZPVUͷ࢓૊Έ ԣεΫϩʔϧ͸ͲͷΑ͏ʹ࣮ͯ͠૷͞Ε͍ͯΔͷͰ ͠ΐ͏͔ʁ

  19. © ZOZO, Inc. 19  0SUIPHPOBM4DSPMM7JFX w ॎʹεΫϩʔϧͰ͖Δ$PMMFDUJPO7JFXʹରͯ͠ 
 ԣʹεΫϩʔϧͰ͖Δ4DSPMM7JFX

    w ͜ͷPSUIPHPOBM4DSPMM7JFX͸QSJWBUFͳΫϥεͳ ͷͰɺΞΫηεͰ͖ͳ͍ $PNQPTJUJPOBM-BZPVUʹؔ͢Δ5JQT
  20. © ZOZO, Inc. 20  Ұ෦σβΠϯͰ͸࣮૷͕೉͍͠ w 1BHF$POUSPMͰԿຕ໨͔Λදࣔ͢Δ $PNQPTJUJPOBM-BZPVUʹؔ͢Δ5JQT

  21. © ZOZO, Inc. 21  Ұ෦σβΠϯͰ͸࣮૷͕೉͍͠ w 1BHF$POUSPMͰԿຕ໨͔Λදࣔ͢Δ TDSPMM7JFX%JE4DSPMM͕ݺ͹Εͳ͍ͨΊɺ ݱࡏͷ4DSPMM7JFXͷҐஔΛऔಘ͢Δ͜ͱ͕೉͍͠ɻ

    
 ˠ/4$PMMFDUJPO-BZPVU4FDUJPO ͷWJTJCMF*UFNT*OWBMJEBUJPO)BOEMFSͰରԠʁ $PNQPTJUJPOBM-BZPVUʹؔ͢Δ5JQT
  22. © ZOZO, Inc. 22  ˠ/4$PMMFDUJPO-BZPVU4FDUJPO ͷWJTJCMF*UFNT*OWBMJEBUJPO)BOEMFSͰରԠʁ w WJTJCMF*UFNT*OWBMJEBUJPO)BOEMFSͱ͸ɺ TDSPMM7JFX%JE4DSPMMʹࣅ͍ͯΔ͕ɺ͜ΕΛ࢖༻͢Δ͜ͱͰɺ

    ઃܭʹෳࡶੑ͕૿ͯ͠͠·͏ɻ $PNQPTJUJPOBM-BZPVUʹؔ͢Δ5JQT
  23. © ZOZO, Inc. 23  ͲͷΑ͏ʹ࣮૷ͨ͠ͷ͔ʁ w $PNQPTJUJPOBM-BZPVUΛ࢖༻͠ͳ͕Β 'MPX-BZPVUͷύλʔϯͱͷϋΠϒϦοτ ͜͜ͷ4FDUJPOͷ$FMMͷதʹ$PMMFDUJPO7JFXΛ഑ஔ

    PSUIPHPOBM4DSPMM7JFX͸࢖༻͍ͯ͠ͳ͍ 'MPX-BZPVUͰQBHJOH͸࣮૷ $PNQPTJUJPOBM-BZPVUʹؔ͢Δ5JQT
  24. © ZOZO, Inc. 24  ͦͷଞ೉͍͠σβΠϯྫ w ແݶεΫϩʔϧ w 1BHF-PBEJOH

    ΍Ζ͏ͱࢥ͑͹Ͱ͖ͳ͘΋ͳ͍͔΋͠Εͳ͍͕ɺ ͳ͔ͳ͔ߴίετʹͳͬͯ͠·͏ɻɻɻ $PNQPTJUJPOBM-BZPVUʹؔ͢Δ5JQT
  25. © ZOZO, Inc. 25  0SUIPHPOBM4DSPMMJOH#FIBWJPSͷόά 4FDUJPOͷPSUIPHPOBM4DSPMMJOH#FIBWJPSΛ DPOUJOVPVT(SPVQ-FBEJOH#PVOEBSZʹηοτͨ͠৔߹࠷ޙͷDFMM ͷεΫϩʔϧ͕͏·͘ಈ࡞͠ͳ͍ɻ 


    J04d·Ͱͷؒʹଘࡏɻ 
 04ϨϕϧͰͷڍಈͷόάɻ ͋·Γྑ͍ϫʔΫΞϥ΢ϯυͳ͠ɻ $PNQPTJUJPOBM-BZPVUʹؔ͢Δ5JQT
  26. © ZOZO, Inc. 26 ·ͱΊ  © ZOZO, Inc.

  27. © ZOZO, Inc. 27 ·ͱΊ  $PNQPTJUJPOBM-BZPVU͸ۜͷ஄ؙͳͷ͔ʁ

  28. © ZOZO, Inc. 28 ·ͱΊ  $PNQPTJUJPOBM-BZPVU͸ۜͷ஄ؙͳͷ͔ʁ w ύλʔϯҎ্ͷσβΠϯʹରͯ͠ɺରԠෆՄೳͳ΋ͷ͸ͳ͔ͬͨɻ w

    ࠓ·ͰखಈͰௐ੔͍ͯͨ͠΋ͷΛௐ੔ͯ͘͠ΕΔ"1*͕ἧ͍ͬͯΔͨΊ࣮૷೉қ౓͕Լ͕ͬͨɻ
  29. © ZOZO, Inc. 29 ·ͱΊ  $PNQPTJUJPOBM-BZPVU͸ۜͷ஄ؙͳͷ͔ʁ w ύλʔϯҎ্ͷσβΠϯʹରͯ͠ɺରԠෆՄೳͳ΋ͷ͸ͳ͔ͬͨɻ w

    ࠓ·ͰखಈͰௐ੔͍ͯͨ͠΋ͷΛௐ੔ͯ͘͠ΕΔ"1*͕ἧ͍ͬͯΔͨΊ࣮૷೉қ౓͕Լ͕ͬͨɻ ˠύʔπͷ૊Έ߹Θͤʹ͢Δ͜ͱͰϨΠΞ΢τͷ࣮૷͕༰қʹͰ͖ΔͷͰɺผͷͱ͜Ζʹ࣌ؒ Λׂ͚ΔΑ͏ʹͳͬͨɻ 
 $PMMFDUJPO7JFX͕ඞཁͳ7JFXʹ͓͍ͯɺۜͷ஄ؙͱݴ͑Δɻ
  30. © ZOZO, Inc. 30 ·ͱΊ  $PNQPTJUJPOBM-BZPVU͸ۜͷ஄ؙͳͷ͔ʁ ҰํͰɺ ࢖༻͍ͨ͠"1*͕༻ҙ͞Ε͍ͯͳ͍ͳͲɺϨΠΞ΢τʹΑͬͯ޲͖ෆ޲͖͸͔֬ʹ͋Δɻ ͔͠͠ɺઌ΄Ͳ͋͛ͨϋΠϒϦοτܕͱͯ͠࢖͑͹ɺͦ͏ݴͬͨ໰୊΋ղফ͞ΕΔɻ

  31. © ZOZO, Inc. 31 ·ͱΊ  $PNQPTJUJPOBM-BZPVU͸ۜͷ஄ؙͳͷ͔ʁ Basic features Basic

    features Exciting, custom features! Exciting, custom features!
  32. © ZOZO, Inc. 32 ·ͱΊ  ZOZOTOWNΞϓϦHomeը໘࠶ઃܭͷي੻~10೥Ҏ্ྺ࢙Λ࣋ͭΞϓϦ͸ͲͷΑ͏ʹͯ͠ੜ·ΕมΘͬͨͷ͔~ https://techblog.zozo.com/entry/zozotown-ios-home-rearchitecture

  33. © ZOZO, Inc. 33 ੵۃ࠾༻த https://corp.zozo.com/recruit/mid-career/ J04ΤϯδχΞ w ;0;0508/ w

    8&"3 w ܭଌϓϥοτϑΥʔϜ ;0;0(-"44 ;0;0."5  w '""/4 w Φʔϓϯϙδγϣϯ
  34. None