Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Modular Monolith Monorepo ~シンプルさを保ちながらmonorepoの...

Yui Sakamoto
November 23, 2024

Modular Monolith Monorepo ~シンプルさを保ちながらmonorepoのメリットを最大化する~

スタートアップにおけるMonorepo開発で、単にコードを一箇所に集めるだけでなく、チームの意思決定プロセスとコミュニケーションの設計を通じて、その真価を最大化する実践について解説。

Yui Sakamoto

November 23, 2024
Tweet

More Decks by Yui Sakamoto

Other Decks in Programming

Transcript

  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
  2. ~ γϯϓϧ͞Λอͪͳ͕Β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
  3. ࿩͞ͳ͍͜ͱ Things not to talk about ϞϊϨϙπʔϧબఆɾઃఆͷ࿩ • Nx, Lern

    a , Turborepo౳ͷൺֱ • ϏϧυύΠϓϥΠϯͷ࠷దԽ • ύοέʔδϚωʔδϟͷৄࡉઃఆ Modul a r Monolithͷ࣮૷ৄࡉ • ϚΠΫϩαʔϏεͱͷൺֱ • Ϟδϡʔϧ෼ׂͷ۩ମతͳํ๏ • υϝΠϯઃܭ 7
  4. 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
  5. MonorepoͷओͳϝϦοτ ίʔυͷՄࢹੑͱ࠶ར༻ • git clone ҰൃͰશͯͷίʔυʹΞΫηεՄೳ • ڞ௨ίʔυͷൃݟ΍࠶ར༻͕༰қ • νʔϜؒͷίϥϘϨʔγϣϯ͕ଅਐ͞ΕΔ

    Ұ؏ੑͷ͋Δ։ൃ؀ڥ • ϏϧυπʔϧɺςετεΠʔτɺCIͷઃఆΛ౷Ұ Մೳ • ։ൃ؀ڥͷηοτΞοϓ͕؆ૉԽ Why Monorepo? Atomicͳมߋ͕Մೳ • ෳ਺ϓϩδΣΫτʹލΔมߋΛ1ͭͷPRͰ؅ཧ • ґଘؔ܎ͷߋ৽͕ಉ࣌ʹߦ͑Δ ίʔυڞ༗ͷ؆ૉԽ • ύοέʔδͷެ։ɾόʔδϣϯ؅ཧ͕ෆཁ • ಺෦ϥΠϒϥϦͷڞ༗͕γϯϓϧ 11
  6. Monorepoͷ՝୊ Why Monorepo? ϦϙδτϦͷංେԽ • git cloneͷ࣌ؒ૿Ճ • CIͷίετ૿ •

    Trigger؅ཧͷෳࡶ͞ • Ϗϧυ࣌ؒͷ૿Ճ ݖݶ؅ཧͷෳࡶ͞ • ࡉ͔͍ΞΫηε੍ޚ͕ඞཁͳ৔߹ʹ؅ཧ͕൥ࡶ ઐ༻πʔϧͷඞཁੑͱબఆ • ϞϊϨϙʹಛԽͨ͠Ϗϧυπʔϧ΍ύοέʔδϚωʔδϟ͕ඞཁʁ 12
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. One Version Ruleͱ͸ One Version RuleΛ࣮ફ͢Δʹ͸ɺͦͷ໊ͷ ௨ΓύοέʔδͷόʔδϣϯΛ1ͭʹ౷Ұ͢Δ ඞཁ͕͋Γ·͢ ͦͷͨΊɺґଘ͢Δύοέʔδͷόʔδϣϯ Λ1ͭʹ౷Ұ͢ΔͨΊͷํ๏Λߟ͑Δඞཁ͕͋

    Γ·͢ ͜ͷύοέʔδͷόʔδϣϯ؅ཧํ๏͸ݴޠ ʹΑΓҟͳΔͨΊɺݴޠ͝ͱʹద੾ͳํ๏Λ બ୒͢Δඞཁ͕͋Γ·͢ Practicing the One Version Rule 22
  13. 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
  14. 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
  15. pnpmͷHooksΛ࢖ͬͨOne Version Ruleͷ࣮૷ 1. ΞϓϦέʔγϣϯ͕ґଘ͢Δύοέʔδͷόʔδϣϯ͸ workspace:* ·ͨ͸ catalog: Ͱࢦఆ ͢Δ

    2. {"<name>": "catalog:"}ͱΞϓϦέʔγϣϯͰࢦఆ͞Εͨύοέʔδͷ࣮ࡍͷόʔδϣϯ ͕ pnpm-worksp a ce.y a ml ʹهࡌ͞Ε͍ͯΔ 3. Monorepo಺ͷύοέʔδͱnode_modulesͷύοέʔδΛ۠ผͰ͖ΔΑ͏ͳ໊લΛ͚ͭΔ 4. όʔδϣϯ͸ඞͣPin͞ΕͨόʔδϣϯΛ࢖͏Α͏ʹ͢Δ 5. ͜ͷϧʔϧΛຬͨ͞ͳ͍࣌͸ɺࣗಈతʹमਖ਼ίϚϯυΛΤϥʔʹදࣔ͢Δ Practicing the One Version Rule 26
  16. One Version Ruleͷಋೖɾӡ༻ͷ೉͠͞ 1. ٕज़తͳ՝୊ • طଘϓϩδΣΫτͰͷґଘؔ܎ͷղফ͕ࠔ೉ • Bre a

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

    2. νʔϜӡ༻্ͷ՝୊ • ৽نϥΠϒϥϦಋೖʹ͓͚Δ߹ҙܗ੒ • ֤ϓϩδΣΫτͷݸผχʔζͱͷંΓ߹͍ 3. Ҡߦ࣌ͷ՝୊ • طଘͷෳ਺όʔδϣϯࠞࡏঢ়ଶ͔Βͷ୤٫ • ஈ֊తͳҠߦͷͨΊͷ޻਺֬อ Practicing the One Version Rule ϓϩμΫτͷॳظϑΣʔζ͔ͩΒͦ͜બ୒͠ಘΔઓུ🤞 • ΞϓϦέʔγϣϯͷ಺෦ߏ଄ͷ੔ཧʢModul a r Monolithʣ • ґଘؔ܎ͷ؅ཧʢOne Version Ruleʣ ։ൃͷAgilityΛอͪ ٕज़తෛ࠴Λ࠷খݶʹ཈͑ কདྷͷ੒௕ʹඋ͑ͨج൫Λ࡞Δ 28
  18. Tierͷߟ͑ํ Tier 1 : ͜ΕΛࣺͯΔ࣌͸ίʔυΛҰ͔Β ॻ͖௚֮͢ޛΛ࣋ͭʮ৺த͢Δʯ૬ख Tier 2 : ࠩ͠ସ͑ʹ͸େ͖ͳ࿑ྗΛඞཁͱ

    ͢Δʮڧ͘ґଘ͢Δʯ૬ख Tier 3 : ͍ͣΕࠩ͠ସ͑Δ͜ͱΛ૝ఆͨ͠ ʮґଘΛܰ͘͢Δʯ૬ख Communication Design 32
  19. τϨʔαϏϦςΟͷ֬อ ʮͳͥ͜ͷϥΠϒϥϦΛ࠾༻ͨ͠ͷ͔ʁʯ ʮͲ͏͍͏ٞ࿦Λܦͯ͜ͷܾఆʹࢸͬͨͷ͔ʁʯ ͱ͍͏ҙࢥܾఆͷཤྺΛɺ ίʔυͱඥ͚ͮͯḪΔ͜ͱ͕ग़དྷΔΑ͏ʹ͢Δ 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
  20. 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
  21. 36

  22. എܠͱલఏ৚݅ͷೝࣝڞ༗ Internal UI component in newmo Design Doc ݱঢ়ͷ՝୊ •

    ෳ਺ͷ΢ΣϒΞϓϦέʔγϣϯͰڞ௨ͷίϯϙʔωϯτ͕૿Ճ • ࣮૷ͷॏෳ͕ൃੜ • ڞ༗ํ๏ɾ؅ཧํ๏ͷݕ౼͕ඞཁʹ ಛʹ৻ॏͳ൑அ͕ඞཁͳཧ༝ • ʮڧ͘ґଘ͢Δʯ͜ͱʹͳΔίʔυ • ࠩ͠ସ͑ʹ͸େ͖ͳ࿑ྗ͕ඞཁ ૝ఆಡऀͷ໌֬Խ • ϑϩϯτΤϯυΤϯδχΞ • σβΠϯΤϯδχΞ 37
  23. ͜Ε·Ͱͷٞ࿦ʹ͓͚Δ༻ޠͷ੔ཧ Internal UI component in newmo Design Doc ϢϏΩλεݴޠͷఆٛ֬ೝ ੔ཧ಺༰:

    σβΠϯγεςϜͱ͸ σβΠϯγεςϜ͸ɺࢥ૝ͱσβΠϯͱ࣮૷ͱΨΠυϥΠϯͷ ૯শ(ઓུͱઓज़ͷ྆ํΛؚΉ) ͜ͷυΩϡϝϯτͰ͸ɺ࣮૷ΑΓͷ࿩Λѻ͍ͬͯΔͨΊɺ ”UIίϯϙʔωϯτϥΠϒϥϦ”ͷ࿩ͱ͢Δɻ 38
  24. ໨తͱɺ໨తͰͳ͍͜ͱΛઃఆ Internal UI component in newmo Design Doc ໨త UIίϯϙʔωϯτϥΠϒϥϦͱͯ͠ԿΛ͍࣋ͬͯΔ΂͖͔ΛܾΊΔ

    [੹຿] UIίϯϙʔωϯτϥΠϒϥϦ͸Ͳ͏΍ͬͯΞϓϦέʔγϣϯͱ݁߹͢Δ͔ܾΊΔ [݁߹ํ๏] UIίϯϙʔωϯτϥΠϒϥϦ͸୭͔Ͳ͏ͷΑ͏ʹ؅ཧ͢Δ͔ΛܾΊΔ [ϝϯςφϯε] ͍ͭUIίϯϙʔωϯτϥΠϒϥϦʹίϯϙʔωϯτΛ௥Ճ͢Δ͔ [൑அج४] ໨తͰͳ͍͜ͱ UIίϯϙʔωϯτϥΠϒϥϦΛެ։͢Δ͜ͱ ͋͘·Ͱࣾ಺ͷΞϓϦέʔγϣϯͰͷσβΠϯΛ΋ͭίϯϙʔωϯτΛͲ͏͢Δ͔ΛܾΊ͍ͨ 39
  25. UIίϯϙʔωϯτϥΠϒϥϦ͸Ͳ͏΍ͬͯΞϓϦέʔγϣϯͱ݁߹͢Δ͔ܾΊΔ [݁߹] • UIίϯϙʔωϯτϥΠϒϥϦ͸UIίϯϙʔωϯτϥΠϒϥϦ಺Ͱςε τΛߦ͏ • ओʹϏδϡΞϧతͳ෦෼͕ଟ͘ͳΔͨΊɺVRT(Visu a l Regression

    Test)Λجຊͱͯ͠ߦ͏ • ΠϯλϥΫγϣϯཁૉ͕͋Δ৔߹͸ɺPl a ywrightΛ࢖͍ςετΛߦ͏ • UIίϯϙʔωϯτϥΠϒϥϦΛར༻͢ΔΞϓϦέʔγϣϯͰ͸ɺUIί ϯϙʔωϯτͦͷ΋ͷͷςετ͸ߦΘͳ͍ • ΞϓϦέʔγϣϯͰ͸݁߹ͨ͠ΞϓϦέʔγϣϯʹର͢Δ Integr a tion TestsΛجຊͱͯ͠ߦ͏ • UIίϯϙʔωϯτΛ͞Βʹϥοϓͨ͠ίϯϙʔωϯτΛ࡞੒͍ͯ͠Δ ৔߹͸ɺίϯϙʔωϯτʹର͢ΔςετΛߦ͏͜ͱ͸͋Γͱ͢Δ • ςετͷΧόϨοδͷߟ͑ํʢӈਤʣ Practical example 41
  26. ͍ͭUIίϯϙʔωϯτϥΠϒϥϦʹίϯϙʔωϯτΛ௥Ճ͢Δ͔ [൑அج४] ୭͕Έͯ΋Θ͔ΔΑ͏ͳɺUIίϯϙʔωϯτͱͯ͠௥Ճ͢Δج४ΛܾΊΔ • ͜ͷج४Λຬͨ͞ͳ͘ͳͬͨ΋ͷ͸UIίϯϙʔωϯτϥΠϒϥϦ͔Β֎͢΂͖ ྫ) σβΠϯγεςϜʹ௥Ճ͢Δίϯϙʔωϯτ͸࣍ͷ͜ͱΛຬ͍ͨͯ͠Δ • Design TokenΛར༻͍ͯ͠Δ

    • 2ͭҎ্ͷΞϓϦέʔγϣϯͰશ͘ಉ͡ར༻ͷ͞Εํ͕͞Ε͍ͯΔ • 3ճҎ্ಉ͡ॻ͖ํ͕͞Ε͍ͯΔ • Figm a ଆͰίϯϙʔωϯτԽ͞Ε͍ͯΔ(σβΠφʔଆͰ΋ίϯϙʔωϯτͱͯ͠ѻΘΕ͍ͯΔ) • ΞϓϦέʔγϣϯʹґଘ͍ͯ͠ͳ͍ίϯϙʔωϯτ = APIͱ͔ݖݶͷ൑ఆͱ͔ґଘͯ͠ͳ͍ Practical example 42
  27. Design DocͰͷٞ࿦ͱ݁࿦ Practical example UIコンポーネントの命名 τʔΫϯɺϑϨʔϜϫʔΫɺ UIίϯϙʔωϯτͷύοέʔδ σβΠϯτʔΫϯɺUIίϯϙʔωϯτͷόʔδϣϯ؅ཧ ίϯϙʔωϯτ؅ཧπʔϧͷੋඇͱબఆ ֛֪֨㟙㻵

    6*ίϯϙʔωϯτͷςετ デザインコンポーネントのインポートパス Storyの境界線 Storybook: StoryͱPropsͷ定義 Design System͔ΒͷٯҾ͖ͷ࣮૷ Cross Browserͷςετ 43
  28. τʔΫϯɺϑϨʔϜϫʔΫɺ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ίϯϙʔωϯτ <Button variant="primary" size="md" fontSize="lg" /> @newmo-app/garage-pandacss-preset @newmo-app/garage-pandacss-react @newmo-app/garage-ui-react 44
  29. τʔΫϯɺϑϨʔϜϫʔΫɺ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
  30. ςετํ๏ ཧ૝: 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
  31. 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
  32. 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
  33. 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
  34. 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 <Spinner />; } 51
  35. ·ͱΊ ࢀߟ จݙɺ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