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

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

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
   ʹ͍ͭͯ  "QQ
   4UPSF ෳࡶͳϨΠΞ΢τΛҰͭͷ$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 $PMMFDUJPO7JFX
    JO
    $PMMFDUJPO7JFX
12. © ZOZO, Inc. 12  ;0;0508/ͷ$PNQPTJUJPOBM
    -BZPVUରԠ
    $PMMFDUJPO7JFX
    JO
    $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 ͷεΫϩʔϧ͕͏·͘ಈ࡞͠ͳ͍ɻ
    
 J04
    d·Ͱͷؒʹଘࡏɻ 
 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 Φʔϓϯϙδγϣϯ