Yui Sakamoto 2024/11/23 ～ γϯϓϧ͞Λอͪͳ͕ΒmonorepoͷϝϦοτΛ࠷େԽ͢Δ ～ Modular Monolith Monorepo  1

Yui Sakamoto (@yui_tang) Who am Iʁ Softw a re Engineer a t @newmohq M a inly Web Frontend, B a ckend I ♥ Workout🏋 Driving🚗 S a un a 🧖 C a t🐱 He a vy Met a l🤘 Street Fighter6🕹 2

newmo? 2024೥1݄ʹ૑ۀ λΫγʔɾϥΠυγΣΞࣄۀ ΤϯδχΞ30໊ڧ 3

Introduction 4

～ γϯϓϧ͞Λอͪͳ͕ΒmonorepoͷϝϦοτΛ࠷େԽ͢Δ ～ Modular Monolith Monorepo • Introduction • Why Monorepo? • Pr a cticing the One Version Rule • Communic a tion Design • Pr a ctic a l ex a mple: Intern a l UI component • Wr a p up 5

Things not to talk about 6

࿩͞ͳ͍͜ͱ Things not to talk about ϞϊϨϙπʔϧબఆɾઃఆͷ࿩ • Nx, Lern a , Turborepo౳ͷൺֱ • ϏϧυύΠϓϥΠϯͷ࠷దԽ • ύοέʔδϚωʔδϟͷৄࡉઃఆ Modul a r Monolithͷ࣮૷ৄࡉ • ϚΠΫϩαʔϏεͱͷൺֱ • Ϟδϡʔϧ෼ׂͷ۩ମతͳํ๏ • υϝΠϯઃܭ 7

Why Monorepo? 8

Monorepo in newmo NewmoͰ͸ɺϑϩϯτΤϯυɺόοΫΤϯυɺiOS΍AndroidͳͲͷϞόΠϧΞϓϦΛ ͢΂ͯಉ͡ϦϙδτϦͰ؅ཧ͢ΔmonorepoΛ࠾༻͍ͯ͠·͢ monorepoΛ࠾༻͢Δ͜ͱͰɺΞϓϦέʔγϣϯؒͰڞ௨ͷίʔυΛڞ༗͢Δ͜ͱ͕ Ͱ͖ͨΓɺCIͷ؅ཧָ͕ʹͳͬͨΓɺଞͷνʔϜͷίʔυΛݟΔͷʹΘ͟Θ͟Ϧϙδτ ϦΛclone͢Δඞཁ͕ͳ͘ͳΓ·͢ ·ͨɺmonorepoΛ࠾༻͢Δ͜ͱͰɺΞϓϦέʔγϣϯ͕ར༻͍ͯ͠Δύοέʔδ(ϥ ΠϒϥϦ΍πʔϧ)ͷόʔδϣϯΛ1͚ͭͩʹ͢ΔOne Version Rule͕࣮૷Ͱ͖·͢ Why Monorepo? monorepo಺ͰͷύοέʔδͷόʔδϣϯΛ1͚ͭͩʹ౷Ұ͢ΔOne Version RuleΛpnpm c a t a logͰ࣮૷͢Δ https://tech.newmo.me/entry/one-version-rule-built-on-pnpm-c a t a log 9

Monorepoͱ͸Կ͔ What is Monorepo? Source: https://www.linkedin.com/pulse/n a vig a ting-monorepo-polyrepo-str a tegies-optim a l-softw a re-dev a m-n a rk a r- a 4crf/ Monorepo directories s a mple 10

MonorepoͷओͳϝϦοτ ίʔυͷՄࢹੑͱ࠶ར༻ • git clone ҰൃͰશͯͷίʔυʹΞΫηεՄೳ • ڞ௨ίʔυͷൃݟ΍࠶ར༻͕༰қ • νʔϜؒͷίϥϘϨʔγϣϯ͕ଅਐ͞ΕΔ Ұ؏ੑͷ͋Δ։ൃ؀ڥ • ϏϧυπʔϧɺςετεΠʔτɺCIͷઃఆΛ౷Ұ Մೳ • ։ൃ؀ڥͷηοτΞοϓ͕؆ૉԽ Why Monorepo? Atomicͳมߋ͕Մೳ • ෳ਺ϓϩδΣΫτʹލΔมߋΛ1ͭͷPRͰ؅ཧ • ґଘؔ܎ͷߋ৽͕ಉ࣌ʹߦ͑Δ ίʔυڞ༗ͷ؆ૉԽ • ύοέʔδͷެ։ɾόʔδϣϯ؅ཧ͕ෆཁ • ಺෦ϥΠϒϥϦͷڞ༗͕γϯϓϧ 11

Monorepoͷ՝୊ Why Monorepo? ϦϙδτϦͷංେԽ • git cloneͷ࣌ؒ૿Ճ • CIͷίετ૿ • Trigger؅ཧͷෳࡶ͞ • Ϗϧυ࣌ؒͷ૿Ճ ݖݶ؅ཧͷෳࡶ͞ • ࡉ͔͍ΞΫηε੍ޚ͕ඞཁͳ৔߹ʹ؅ཧ͕൥ࡶ ઐ༻πʔϧͷඞཁੑͱબఆ • ϞϊϨϙʹಛԽͨ͠Ϗϧυπʔϧ΍ύοέʔδϚωʔδϟ͕ඞཁʁ 12

monorepo.tools: https://monorepo.tools/ “Not just “code colocation” Consider a repository with several projects in it. We de fi nitely have “code colocation”, but if there are no well de fi ned relationships among them, we would not call it a monorepo. Likewise, if a repository contains a massive application without division and encapsulation of discrete parts, it's just a big repo. You can give it a fancy name like "garganturepo," but we're sorry to say, it's not a monorepo. In fact, such a repo is prohibitively monolithic, which is often the fi rst thing that comes to mind when people think of monorepos. Keep reading, and you'll see that a good monorepo is the opposite of monolithic. ✋ Monorepo ≠ Monolith A good monorepo is the opposite of monolithic! Read more about this and other misconceptions in the article on “Misconceptions about Monorepos: Monorepo != Monolith”. “ 13

Monorepo in newmo Կ΋σβΠϯΛͤͣʹ։ൃ͕ਐΉ ↓ ஌Β͵ؒʹಉ͡໾ׂͷ̼odule͕࡞ΒΕΔɾಋೖ͞ΕΔ ↓ ؅ཧίετ૿େ ↓ ͪΌΜͱٞ࿦ઃܭ͓͚ͯ͠͹Α͔ͬͨʂʂ Why Monorepo? 14

Monorepo in newmo Կ΋σβΠϯΛͤͣʹ։ൃ͕ਐΉ ↓ ஌Β͵ؒʹಉ͡໾ׂͷ̼odule͕࡞ΒΕΔɾಋೖ͞ΕΔ ↓ ؅ཧίετ૿େ ↓ ͪΌΜͱٞ࿦ઃܭ͓͚ͯ͠͹Α͔ͬͨʂʂ Why Monorepo? こんな未来が 😭 訪れるのは避けたい！！ 15

Modular Monolith https://shopify.engineering/deconstructing-monolith-designing-softw a re-m a ximizes-developer-productivity 16

Modular Monolithͱͷ਌࿨ੑ ίʔυͷ૊৫Խͷߟ͑ํ͕Ұக • Modul a r Monolithɿػೳ୯ҐͰϞδϡʔϧ෼ׂ • MonorepoɿϓϩδΣΫτ΍ϥΠϒϥϦ୯ҐͰσΟϨΫτ Ϧ෼ׂ • → ྆ऀͱ΋ʮద੾ͳཻ౓Ͱͷ෼ׂʯͱʮ໌֬ͳڥքʯΛ ॏࢹ ஈ֊తͳ෼ׂɾਐԽ͕Մೳ • Modul a r MonolithɿඞཁʹԠͯ͡ϚΠΫϩαʔϏεԽ͕Մ ೳ • MonorepoɿඞཁʹԠͯ͡ϦϙδτϦ෼ׂ͕Մೳ • → ૊৫ͷ੒௕ʹ߹ΘͤͯॊೈʹରԠͰ͖Δ Why Monorepo? ґଘؔ܎ͷՄࢹੑ • Modul a r MonolithɿϞδϡʔϧؒͷґଘΛ໌ࣔతʹ؅ཧ • MonorepoɿϓϩδΣΫτؒͷґଘΛύοέʔδϚωʔ δϟͰ؅ཧ • → ґଘؔ܎ͷ೺Ѳɾ੍ޚ͕༰қ ڞ௨Խͷଅਐ • Modul a r Monolithɿڞ௨ػೳΛϞδϡʔϧͱͯ͠੾Γग़ ͠ • Monorepoɿڞ௨ϥΠϒϥϦͱͯ͠੾Γग़͠ • → ࠶ར༻Մೳͳίʔυͷ؅ཧ͕ࣗવʹߦ͑Δ 17

Modular Monolithʹ͍ͭͯ • Deconstructing the Monolith: Designing Softw a re th a t M a ximizes Developer Productivity • https://shopify.engineering/deconstructing-monolith-designing-softw a re- m a ximizes-developer-productivity • Monolith First • https://m a rtinfowler.com/bliki/MonolithFirst.html • Tow a rds Modern Development of Cloud Applic a tions • https://dl. a cm.org/doi/pdf/10.1145/3593856.3595909 Why Monorepo? 18

Practicing the One Version Rule 19

The One Version Rule: https://opensource.google/documentation/reference/thirdparty/oneversion “There may only be one version of a package in third_party. This rule applies to both di ff erent versions of a single package, and forks or separate copies having di ff erent package names under third_party. There are several reasons for this restriction.” 20

One Version Ruleͱ͸ monorepo಺ͷύοέʔδͷύοέʔδͷόʔδϣϯΛ1͚ͭͩʹ͢ΔϧʔϧͰ͢ɻ One Version RuleͰ͸ɺmonorepo಺ͷΞϓϦέʔγϣϯ͕ґଘ͢Δύοέʔδ͸1ͭͷόʔδϣϯ͚ͩʹ͠ ·͢ ͨͱ͑͹ɺΞϓϦέʔγϣϯA͕p a ck a ge Xͷόʔδϣϯ 1.0.0 Λ࢖͍ͬͯΔͱ͖ɺΞϓϦέʔγϣϯB΋ p a ck a ge Xͷόʔδϣϯ 1.0.0 Λ࢖͏Α͏ʹ౷Ұ͠·͢ ͜ΕʹΑͬͯɺ͋Δύοέʔδ͕1ͭͷόʔδϣϯ͚ͩʹू໿͞Εɺϝϯςφϯεੑ͕Α͘ͳͬͨΓɺύο έʔδͷΞοϓσʔτʹؔ͢ΔηΩϡϦςΟతͳ໰୊ʹରॲ͠΍͘͢ͳͬͨΓɺDi a mond dependencyͷΑ ͏ͳύοέʔδಉ࢜ͷґଘʹ͓͚ΔόʔδϣϯͷCon f lict͕ى͖ʹ͘͘ͳΓ·͢ Practicing the One Version Rule https://opensource.google/document a tion/reference/thirdp a rty/oneversion 21

One Version Ruleͱ͸ One Version RuleΛ࣮ફ͢Δʹ͸ɺͦͷ໊ͷ ௨ΓύοέʔδͷόʔδϣϯΛ1ͭʹ౷Ұ͢Δ ඞཁ͕͋Γ·͢ ͦͷͨΊɺґଘ͢Δύοέʔδͷόʔδϣϯ Λ1ͭʹ౷Ұ͢ΔͨΊͷํ๏Λߟ͑Δඞཁ͕͋ Γ·͢ ͜ͷύοέʔδͷόʔδϣϯ؅ཧํ๏͸ݴޠ ʹΑΓҟͳΔͨΊɺݴޠ͝ͱʹద੾ͳํ๏Λ બ୒͢Δඞཁ͕͋Γ·͢ Practicing the One Version Rule 22

pnpm catalogsʹΑΔ࣮૷ pnpm 9.5Ͱ௥Ճ ґଘ͢Δෳ਺ͷύοέʔδʹ໊લΛͭ ͚ͯ؅ཧͨ͠ΓɺύοέʔδͷґଘΛ ΧλϩάతʹҰՕॴͰ؅ཧͰ͖Δ࢓૊ Έ Practicing the One Version Rule pnpm-workspace.yaml package.json packages: - packages/* # Define a catalog of version ranges. catalog: react: ^18.3.1 redux: ^5.0.1 { "name": "@example/app", "dependencies": { "react": "catalog:", "redux": "catalog:" } } 23

Named Catalog ෳ਺ͷύοέʔδͱόʔδϣϯΛ·ͱ Ίͨ΋ͷʹର໊ͯ͠લΛ͚ͭͯ؅ཧ͢ Δ͜ͱ͕Մೳ monorepoʹ͋Δશͯͷύοέʔδͷ ໊લͱόʔδϣϯ͕pnpm- worksp a ce.y a mlͱ͍͏ҰͭͷϑΝΠϧ Ͱ؅ཧͰ͖ΔΑ͏ʹͳΓ·͢ɻ Practicing the One Version Rule catalogs: # Can be referenced through "catalog:react17" react17: react: ^17.0.2 react-dom: ^17.0.2 # Can be referenced through "catalog:react18" react18: react: ^18.2.0 react-dom: ^18.2.0 { "name": "@example/components", "dependencies": { "react": "catalog:react18", } } pnpm-workspace.yaml package.json 24

pnpmͷHooksΛ࢖ͬͨOne Version Ruleͷ࣮૷ pnpmͷHooksػೳΛ࢖͏͜ͱͰɺґଘ͢ΔύοέʔδͷόʔδϣϯΛ1ͭʹ ౷Ұ͢ΔOne Version RuleΛ࣮૷͢Δ͜ͱ͕Ͱ͖·͢ Practicing the One Version Rule https://pnpm.io/pnpm f ile#hooks 25

pnpmͷHooksΛ࢖ͬͨOne Version Ruleͷ࣮૷ 1. ΞϓϦέʔγϣϯ͕ґଘ͢Δύοέʔδͷόʔδϣϯ͸ workspace:* ·ͨ͸ catalog: Ͱࢦఆ ͢Δ 2. {"": "catalog:"}ͱΞϓϦέʔγϣϯͰࢦఆ͞Εͨύοέʔδͷ࣮ࡍͷόʔδϣϯ ͕ pnpm-worksp a ce.y a ml ʹهࡌ͞Ε͍ͯΔ 3. Monorepo಺ͷύοέʔδͱnode_modulesͷύοέʔδΛ۠ผͰ͖ΔΑ͏ͳ໊લΛ͚ͭΔ 4. όʔδϣϯ͸ඞͣPin͞ΕͨόʔδϣϯΛ࢖͏Α͏ʹ͢Δ 5. ͜ͷϧʔϧΛຬͨ͞ͳ͍࣌͸ɺࣗಈతʹमਖ਼ίϚϯυΛΤϥʔʹදࣔ͢Δ Practicing the One Version Rule 26

One Version Ruleͷಋೖɾӡ༻ͷ೉͠͞ 1. ٕज़తͳ՝୊ • طଘϓϩδΣΫτͰͷґଘؔ܎ͷղফ͕ࠔ೉ • Bre a king Ch a nges΁ͷରԠ͕શϓϩδΣΫτͰඞཁνʔϜӡ༻্ͷ՝୊ 2. νʔϜӡ༻্ͷ՝୊ • ৽نϥΠϒϥϦಋೖʹ͓͚Δ߹ҙܗ੒ • ֤ϓϩδΣΫτͷݸผχʔζͱͷંΓ߹͍ 3. Ҡߦ࣌ͷ՝୊ • طଘͷෳ਺όʔδϣϯࠞࡏঢ়ଶ͔Βͷ୤٫ • ஈ֊తͳҠߦͷͨΊͷ޻਺֬อ Practicing the One Version Rule 27

One Version Ruleͷಋೖɾӡ༻ͷ೉͠͞ 1. ٕज़తͳ՝୊ • طଘϓϩδΣΫτͰͷґଘؔ܎ͷղফ͕ࠔ೉ • bre a 2. νʔϜӡ༻্ͷ՝୊ • ৽نϥΠϒϥϦಋೖʹ͓͚Δ߹ҙܗ੒ • ֤ϓϩδΣΫτͷݸผχʔζͱͷંΓ߹͍ 3. Ҡߦ࣌ͷ՝୊ • طଘͷෳ਺όʔδϣϯࠞࡏঢ়ଶ͔Βͷ୤٫ • ஈ֊తͳҠߦͷͨΊͷ޻਺֬อ Practicing the One Version Rule ϓϩμΫτͷॳظϑΣʔζ͔ͩΒͦ͜બ୒͠ಘΔઓུ🤞 • ΞϓϦέʔγϣϯͷ಺෦ߏ଄ͷ੔ཧʢModul a r Monolithʣ • ґଘؔ܎ͷ؅ཧʢOne Version Ruleʣ ։ൃͷAgilityΛอͪ ٕज़తෛ࠴Λ࠷খݶʹ཈͑ কདྷͷ੒௕ʹඋ͑ͨج൫Λ࡞Δ 28

Communication Design 29

Design DocsʹΑΔҙࢥܾఆϓϩηε Communication Design https://www.industrialempathy.com/posts/design-docs-at-google/ 30

Design DocsʹΑΔҙࢥܾఆϓϩηε Communication Design 102 docs ２０２4/11/21時点 31

Tierͷߟ͑ํ Tier 1 : ͜ΕΛࣺͯΔ࣌͸ίʔυΛҰ͔Β ॻ͖௚֮͢ޛΛ࣋ͭʮ৺த͢Δʯ૬ख Tier 2 : ࠩ͠ସ͑ʹ͸େ͖ͳ࿑ྗΛඞཁͱ ͢Δʮڧ͘ґଘ͢Δʯ૬ख Tier 3 : ͍ͣΕࠩ͠ସ͑Δ͜ͱΛ૝ఆͨ͠ ʮґଘΛܰ͘͢Δʯ૬ख Communication Design 32

τϨʔαϏϦςΟͷ֬อ ʮͳͥ͜ͷϥΠϒϥϦΛ࠾༻ͨ͠ͷ͔ʁʯ ʮͲ͏͍͏ٞ࿦Λܦͯ͜ͷܾఆʹࢸͬͨͷ͔ʁʯ ͱ͍͏ҙࢥܾఆͷཤྺΛɺ ίʔυͱඥ͚ͮͯḪΔ͜ͱ͕ग़དྷΔΑ͏ʹ͢Δ Communication Design # pnpm-workspace.yaml packages: # ϑϩϯτΤϯυΞϓϦέʔγϣϯ - ‘apps/*’ # ڞ௨ϥΠϒϥϦ܈ # designDoc: https://... (UIίϯϙʔωϯτͷڞ௨Խʹؔ͢Δઃܭॻ) # tier: 1 (ίΞϥΠϒϥϦͱͯ͠Ґஔ͚ͮ) # approvedDate: 2024-01-01 - ‘libs/ui-components' # APIΫϥΠΞϯτ # designDoc: https://... (APIΫϥΠΞϯτͷઃܭํ਑) # tier: 1 # approvedDate: 2024-01-15 - 'libs/api-client' # ϩΪϯάϥΠϒϥϦ # designDoc: https://... (ϩάऩूͷ౷ҰԽʹ͍ͭͯ) # tier: ̎ # approvedDate: 2024-02-01 - 'libs/logger' 33

Practical example Internal UI component in newmo 34

Internal UI component in newmo Practical example ❯ tree -L 1 -d ./lib/typescript/p a ck a ges/ | grep "g a r a ge-" ᵓᴷᴷ g a r a ge-p a nd a css-preset ᵓᴷᴷ g a r a ge-p a nd a css-re a ct ᵓᴷᴷ g a r a ge-ui-re a ct 35

36

എܠͱલఏ৚݅ͷೝࣝڞ༗ Internal UI component in newmo Design Doc ݱঢ়ͷ՝୊ • ෳ਺ͷ΢ΣϒΞϓϦέʔγϣϯͰڞ௨ͷίϯϙʔωϯτ͕૿Ճ • ࣮૷ͷॏෳ͕ൃੜ • ڞ༗ํ๏ɾ؅ཧํ๏ͷݕ౼͕ඞཁʹ ಛʹ৻ॏͳ൑அ͕ඞཁͳཧ༝ • ʮڧ͘ґଘ͢Δʯ͜ͱʹͳΔίʔυ • ࠩ͠ସ͑ʹ͸େ͖ͳ࿑ྗ͕ඞཁ ૝ఆಡऀͷ໌֬Խ • ϑϩϯτΤϯυΤϯδχΞ • σβΠϯΤϯδχΞ 37

͜Ε·Ͱͷٞ࿦ʹ͓͚Δ༻ޠͷ੔ཧ Internal UI component in newmo Design Doc ϢϏΩλεݴޠͷఆٛ֬ೝ ੔ཧ಺༰: σβΠϯγεςϜͱ͸ σβΠϯγεςϜ͸ɺࢥ૝ͱσβΠϯͱ࣮૷ͱΨΠυϥΠϯͷ ૯শ(ઓུͱઓज़ͷ྆ํΛؚΉ) ͜ͷυΩϡϝϯτͰ͸ɺ࣮૷ΑΓͷ࿩Λѻ͍ͬͯΔͨΊɺ ”UIίϯϙʔωϯτϥΠϒϥϦ”ͷ࿩ͱ͢Δɻ 38

໨తͱɺ໨తͰͳ͍͜ͱΛઃఆ Internal UI component in newmo Design Doc ໨త UIίϯϙʔωϯτϥΠϒϥϦͱͯ͠ԿΛ͍࣋ͬͯΔ΂͖͔ΛܾΊΔ [੹຿] UIίϯϙʔωϯτϥΠϒϥϦ͸Ͳ͏΍ͬͯΞϓϦέʔγϣϯͱ݁߹͢Δ͔ܾΊΔ [݁߹ํ๏] UIίϯϙʔωϯτϥΠϒϥϦ͸୭͔Ͳ͏ͷΑ͏ʹ؅ཧ͢Δ͔ΛܾΊΔ [ϝϯςφϯε] ͍ͭUIίϯϙʔωϯτϥΠϒϥϦʹίϯϙʔωϯτΛ௥Ճ͢Δ͔ [൑அج४] ໨తͰͳ͍͜ͱ UIίϯϙʔωϯτϥΠϒϥϦΛެ։͢Δ͜ͱ ͋͘·Ͱࣾ಺ͷΞϓϦέʔγϣϯͰͷσβΠϯΛ΋ͭίϯϙʔωϯτΛͲ͏͢Δ͔ΛܾΊ͍ͨ 39

UIίϯϙʔωϯτϥΠϒϥϦͱͯ͠ԿΛ͍࣋ͬͯΔ΂͖͔ΛܾΊΔ [੹຿] • ίϯϙʔωϯτͷ࣮૷ • ίϯϙʔωϯτͷΧλϩά • ίϯϙʔωϯτͷ࢖͍ํ • ίϯϙʔωϯτͷςετ Practical example 40

UIίϯϙʔωϯτϥΠϒϥϦ͸Ͳ͏΍ͬͯΞϓϦέʔγϣϯͱ݁߹͢Δ͔ܾΊΔ [݁߹] • UIίϯϙʔωϯτϥΠϒϥϦ͸UIίϯϙʔωϯτϥΠϒϥϦ಺Ͱςε τΛߦ͏ • ओʹϏδϡΞϧతͳ෦෼͕ଟ͘ͳΔͨΊɺVRT(Visu a l Regression Test)Λجຊͱͯ͠ߦ͏ • ΠϯλϥΫγϣϯཁૉ͕͋Δ৔߹͸ɺPl a ywrightΛ࢖͍ςετΛߦ͏ • UIίϯϙʔωϯτϥΠϒϥϦΛར༻͢ΔΞϓϦέʔγϣϯͰ͸ɺUIί ϯϙʔωϯτͦͷ΋ͷͷςετ͸ߦΘͳ͍ • ΞϓϦέʔγϣϯͰ͸݁߹ͨ͠ΞϓϦέʔγϣϯʹର͢Δ Integr a tion TestsΛجຊͱͯ͠ߦ͏ • UIίϯϙʔωϯτΛ͞Βʹϥοϓͨ͠ίϯϙʔωϯτΛ࡞੒͍ͯ͠Δ ৔߹͸ɺίϯϙʔωϯτʹର͢ΔςετΛߦ͏͜ͱ͸͋Γͱ͢Δ • ςετͷΧόϨοδͷߟ͑ํʢӈਤʣ Practical example 41

͍ͭUIίϯϙʔωϯτϥΠϒϥϦʹίϯϙʔωϯτΛ௥Ճ͢Δ͔ [൑அج४] ୭͕Έͯ΋Θ͔ΔΑ͏ͳɺUIίϯϙʔωϯτͱͯ͠௥Ճ͢Δج४ΛܾΊΔ • ͜ͷج४Λຬͨ͞ͳ͘ͳͬͨ΋ͷ͸UIίϯϙʔωϯτϥΠϒϥϦ͔Β֎͢΂͖ ྫ) σβΠϯγεςϜʹ௥Ճ͢Δίϯϙʔωϯτ͸࣍ͷ͜ͱΛຬ͍ͨͯ͠Δ • Design TokenΛར༻͍ͯ͠Δ • 2ͭҎ্ͷΞϓϦέʔγϣϯͰશ͘ಉ͡ར༻ͷ͞Εํ͕͞Ε͍ͯΔ • 3ճҎ্ಉ͡ॻ͖ํ͕͞Ε͍ͯΔ • Figm a ଆͰίϯϙʔωϯτԽ͞Ε͍ͯΔ(σβΠφʔଆͰ΋ίϯϙʔωϯτͱͯ͠ѻΘΕ͍ͯΔ) • ΞϓϦέʔγϣϯʹґଘ͍ͯ͠ͳ͍ίϯϙʔωϯτ = APIͱ͔ݖݶͷ൑ఆͱ͔ґଘͯ͠ͳ͍ Practical example 42

Design DocͰͷٞ࿦ͱ݁࿦ Practical example UIコンポーネントの命名 τʔΫϯɺϑϨʔϜϫʔΫɺ UIίϯϙʔωϯτͷύοέʔδ σβΠϯτʔΫϯɺUIίϯϙʔωϯτͷόʔδϣϯ؅ཧ ίϯϙʔωϯτ؅ཧπʔϧͷੋඇͱબఆ ֛֪֨㟙㻵 6*ίϯϙʔωϯτͷςετ デザインコンポーネントのインポートパス Storyの境界線 Storybook: StoryͱPropsͷ定義 Design System͔ΒͷٯҾ͖ͷ࣮૷ Cross Browserͷςετ 43

τʔΫϯɺϑϨʔϜϫʔΫɺUIίϯϙʔωϯτͷύοέʔδ Practical example Design Token σβΠϯͷجૅ஋Λఆٛ { "colors": { "primary": "#2E7D32", "secondary": "#1565C0" } } Styled System ܕ҆શͳCSS in JSؔ਺ css({ color: "primary", padding: "md", fontSize: "lg" }) UI Components ࠶ར༻ՄೳͳUIίϯϙʔωϯτ @newmo-app/garage-pandacss-preset @newmo-app/garage-pandacss-react @newmo-app/garage-ui-react 44

τʔΫϯɺϑϨʔϜϫʔΫɺUIίϯϙʔωϯτͷύοέʔδ 1. Design Tokenͷఆٛͷύοέʔδ 1. P a ck a ge N a me: @newmo- a pp/g a r a ge-p a nd a css-preset 2. ໾ׂ: Design TokenΛఆٛ͢Δ 3. ฤू͢Δ໨త: Design TokenΛ௥Ճɺ࡟আɺߋ৽͢Δ 1. https://p a nd a -css.com/docs/customiz a tion/presets 2. UIϑϨʔϜϫʔΫ͝ͱͷ styled-system 1. P a ck a ge N a me: @newmo- a pp/g a r a ge-p a nd a css-re a ct 2. ໾ׂ: ελΠϧΛఆٛ͢ΔUIϑϨʔϜϫʔΫ͝ͱͷؔ਺ 3. ฤू͢Δ໨త: P a nd a CSSͷઃఆΛมߋ͢Δͱ͖ 3. Design TokenҎ֎ͷઃఆ 1. UIϑϨʔϜϫʔΫ͝ͱͷ UIίϯϙʔωϯτ 2. P a ck a ge N a me: @newmo- a pp/g a r a ge-ui-re a ct 3. ໾ׂ: ελΠϧ෇͖ͷUIίϯϙʔωϯτΛఏڙ͢Δ 4. ฤू͢Δ໨త: ΞϓϦέʔγϣϯͰར༻͢ΔUIίϯϙʔωϯτΛ࡞੒ɺฤूɺ࡟আ͢Δͱ͖ Practical example Dependency diagram 45

ίϯϙʔωϯτ؅ཧπʔϧͷੋඇͱબఆ Storybook͔ɺͦΕҎ֎͔ͷݕ౼ ӈදͷΑ͏ʹൺֱදΛ࡞੒ͯٞ͠࿦ɻ • Storybookͷґଘ͕ଟ͍͕ɺଞʹ൚༻తͳ࢓૊Έ͕ॆ࣮͠ ͍ͯͯɺVRTͷ؅ཧίετΛԼ͛ΒΕΔ΋ͷ͕ͳ͍ঢ়ଶ • ґଘ͕ଟ͍໰୊͸StorybookΛUIίϯϙʔωϯτϥΠϒϥ Ϧͷதʹด͡Δ͜ͱͰΞϓϦέʔγϣϯଆʹ͸Storybook ͷґଘ͕ൃੜ͠ͳ͍Α͏ʹ͢Δ • ͜ΕʹΑͬͯStorybookʹΑͬͯΞϓϦέʔγϣϯͷ Ξοϓσʔτ͕ϒϩοΫ͞Εͳ͍Α͏ʹ͢Δ • Ref: Storyͷڥքઢ ※ storybookͷґଘ͸վળத Practical example 46

ςετํ๏ ཧ૝: Inter a ction Testͷॻ͖ํ͸Ұͭʹ౷Ұ ํ๏ • pl a ywrightΛ࢖͍ͬͯΔͷͰɺpl a ywrightͰςετ Λॻ͘ • storybookͷςετํ๏Ͱॻ͘ Practical example ݁࿦ σβΠϯͷݪଇͱͯ͠ɺ໾ׂ͕ಉ͡΋ͷͰ͖Δ͚ͩ Ұͭͷํ๏ʹ͢Δ • Inter a ction Test͸Pl a ywrightͰॻ͘ • storybookͷpl a yؔ਺͸࢖Θͳ͍ • ίϯϙʔωϯτͷςετ͸VRTΛجຊతʹߦ͏ Refs: Storybook Λϑϧ׆༻ͯ͠ςετΛ࣮૷ͨͦ͠ͷޙͷ࿩ https://blog.cybozu.io/entry/2024/08/13/140000 47

UIίϯϙʔωϯτͷςετ 1. UIίϯϙʔωϯτͷσβΠϯతͳςετ StoryBookͷSn a pshot Test 2. ΞϓϦέʔγϣϯʹೖΕͨ࣌ʹϦάϨογϣϯς ετ Pl a ywrightͷIntegr a tion Test Practical example ݁࿦: • ίϯϙʔωϯτγεςϜ͸VRT • ෳࡶͳίϯϙʔωϯτ͸Pl a ywrightͰςετΛॻ͘ • ΞϓϦέʔγϣϯଆʹPl a ywrightͷςετ͕͋Δ 48

Storyͷڥքઢ 💡ܾΊΔ͜ͱ: ΞϓϦέʔγϣϯʹStoryΛॻ͘΂͖͔Ͳ͏͔ 1. ϖʔδϨϕϧͷStory͸ෆཁ 1. ͜Ε͸࣮ࡍͷF a keͰಈ͔ͨ͠΋ͷΛѻͬͨํ͕͍͍ 2. ίϯϙʔωϯτϨϕϧͷStory͸ཁݕ౼ 1. @newmo- a pp/g a r a ge-ui-re a ct ʹ͍࣋ͬͯ͘લʹɺ֤ΞϓϦέʔγϣϯʹ͸ίϯϙʔωϯτ͕ॻ͔ΕΔ 2. ΞϓϦέʔγϣϯͱ@newmo- a pp/g a r a ge-ui-re a ctͰຖճม׵ίετ͕ൃੜ͢Δ 3. ΞϓϦέʔγϣϯʹStory͕ॻ͚Δͱ͜Ε͸ղফͰ͖Δ͕ɺΞϓϦέʔγϣϯ͕Storyʹґଘ͠ग़͢ͷ͸ඍົ ݁࿦ • Storybook͸σβΠϯγεςϜͷํ͚ͩʹ͓͘ • ΞϓϦέʔγϣϯଆʹstories͸ॻ͔ͳ͍ • ͍࣋ͬͯ࣌͘ʹstoryΛॻ͘ Practical example 49

Storybook: StoryͱPropsͷఆٛ 💡ܾΊΔ͜ͱ: ίϯϙʔωϯτͷPropsΛͲ͏ॻ͔͘ Practical example re a ct-docgen 1. σϑΥϧτͰ࢖ΘΕΔ͕ݡ͍ܕ͸ύʔεͰ͖ͳ ͍ 2. ͜ΕʹΑͬͯ a utodocͷࣗಈੜ੒͕͏·͍͔͘ ͳ͍έʔε͕͋Δ 3. ࣍ͷΑ͏ͳPropsͩͱStorybookͷ a utodoc͕͏ ·͍ͬͯ͘ͳ͍͜ͱ͕Θ͔Δ re a ct-docgen-typescript 1. ໰୊ͳ͘ѻ͑Δ 2. ϝϦοτ 1. ෳࡶͳܕ΋ରԠͯ͠Δ 3. σϝϦοτ 1. ϝϯς͞Εͯͳ͍ 2. ஗͍ 3. storybookͷσϑΥϧτͰ͸ͳ͍ 🖊݁࿦: ্هΛٞ࿦͕ͨ͠ɺݱঢ়͸ͲͪΒʹ΋ґଘͤͣجຊpropsͰίϯϙʔωϯτʹඞཁͳ΋ͷΛఆٛ͢Δํ਑ʹܾఆ 50

Design System͔ΒͷٯҾ͖ͷ࣮૷ • Ұ౓ೖΕͨσβΠϯίϯϙʔωϯτ͸֎͢ཧ༝͕ൃੜ͠ʹ͍͘ • ೖΕΔ৚݅ʹ֎ͤΔ৚݅΋௥Ճͯ͠ɺͦΕ͸਺஋ͱͯ͠؅ཧՄ ೳͳ΋ͷͱ࣮ͯ͠૷͢Δ • ྫ) ϦϑΝϨϯεճ਺ɺར༻ճ਺ • ىಈ࣌ʹgrepͯ͠ɺstorybookʹinject͢Δ࢓૊Έ͕͋Δͱྑ ͦ͞͏ • → ίϯϙʔωϯτ໊͕ύεʹೖΔΑ͏ʹ࣮ͯ͠૷ Practical example Refs: ιʔείʔυΛղੳͯࣾ͠಺޲͚UIϥΠϒϥϦͷ࢖༻ঢ়گΛࣗಈͰूܭ͢Δ https://tech.pl a id.co.jp/ a n a lyze-intern a l-ui-libr a ry-us a ge import { Spinner } from "@newmo-app/garage-ui-react/Spinner"; export default function Loading() { return ; } 51

UIίϯϙʔωϯτϥΠϒϥϦͷ໋໊ Practical example 52 • ໨తΛڞ༗ࣾ͠಺ެืͯ͠ɺೲಘײͱѪணͷ͋Δ໊લ • PM΍σβΠφʔɺඇϓϩμΫτͷϝϯόʔ΋ר͖ࠐΉ • ં֯ͳΒࣄۀͷυϝΠϯͱඥ໋໊͚ͮͨ

2िؒ ࠓճͷDesign DocͷDraft͔Β݁࿦·Ͱͷظؒ 53

Wrap up 54

Modular MonolithΛMonorepoͰ։ൃ͢Δ ͳͥ૊Έ߹ΘͤΔͷ͔ ྆ऀͷઃܭࢥ૝͕Ұக ద੾ͳཻ౓Ͱͷ෼ׂ ໌֬ͳڥքઃఆ কདྷͷมߋΛݟਾ͑ͨઃܭ ʮίʔυΛҰՕॴʹ·ͱΊΔʯҎ্ͷՁ஋ ҙࢥܾఆϓϩηεͷઃܭ ࠷ॳͷઃܭʹ࣌ؒΛֻ͚Δ ؅ཧର৅Λ૿΍͞ͳ͍൑அج४ Design DocʹΑΔҙࢥܾఆͷه࿥ MonorepoͷਅՁͱ͸ 1/2 55

νʔϜ։ൃͷ࣋ଓՄೳੑΛߴΊΔ One Version Ruleͷ࣮ફ ύοέʔδͷґଘؔ܎Λ౷੍ ٕज़બఆͷҙࢥܾఆΛ৻ॏʹ ෼ׂΛલఏͱͨ͠ઃܭ ֶͼ ҙࢥܾఆΛ৻ॏʹߦ͏͜ͱͰɺ֦େͯ͠΋ӡ༻ίετΛ཈੍Ͱ͖Δ ҙࢥܾఆ࣌ͷ൑அج४ͱϩάΛ࢒͢͜ͱͰɺҰ؏ੑͷ͋Δൃల͕Մೳʹ ෼ׂΛલఏͱͨ͠ઃܭͱίʔυͷڞ௨ԽͰɺݱࡏͷ։ൃޮ཰΋޲্ͤ͞Δ MonorepoͷਅՁͱ͸ 2/2 56

·ͱΊ ࢀߟ จݙɺURL • N a vig a ting Monorepo & Polyrepo Str a tegies for Optim a l Softw a re Architecture • https://www.linkedin.com/pulse/n a vig a ting-monorepo-polyrepo-str a tegies-optim a l-softw a re-dev a m-n a rk a r- a 4crf/ • monorepo.tools • https://monorepo.tools/ • Deconstructing the Monolith: Designing Softw a re th a t M a ximizes Developer Productivity • https://shopify.engineering/deconstructing-monolith-designing-softw a re-m a ximizes-developer-productivity • Monolith First • https://m a rtinfowler.com/bliki/MonolithFirst.html • Tow a rds Modern Development of Cloud Applic a tions • https://dl. a cm.org/doi/pdf/10.1145/3593856.3595909 • Design Docs a t Google • https://www.industri a lemp a thy.com/posts/design-docs- a t-google/ • Storybook Λϑϧ׆༻ͯ͠ςετΛ࣮૷ͨͦ͠ͷޙͷ࿩ • https://blog.cybozu.io/entry/2024/08/13/140000 • ιʔείʔυΛղੳͯࣾ͠಺޲͚UIϥΠϒϥϦͷ࢖༻ঢ়گΛࣗಈͰूܭ͢Δ https://tech.pl a id.co.jp/ a n a lyze-intern a l-ui-libr a ry-us a ge Wrap up 57

Thank you! 58