デザインシステムにおける果てしない苦しみの共有。そしてその先に幸せを見つけるための限りない挑戦。
v-tokyo Meetup #17–KiaKing, May 18, 2023SefirotGlobal BrainDesign SystemσβΠϯγεςϜʹ͓͚ΔՌͯ͠ͳ͍ۤ͠Έͷڞ༗ɻͦͯͦ͠ͷઌʹͤΛݟ͚ͭΔͨΊͷݶΓͳ͍ઓɻ
View Slide
© 2023 Global Brain Corporation© 2023 Global Brain CorporationΈͳ͞Μ͜ΜΜ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationΑ͏ͦ͜
© 2023 Global Brain Corporation© 2023 Global Brain Corporationv-tokyo Meetup #17
© 2023 Global Brain Corporation© 2023 Global Brain Corporationࠓ͠·͢
© 2023 Global Brain Corporation© 2023 Global Brain CorporationσβΠϯγεςϜʹ͍ͭͯ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationSefirot
© 2023 Global Brain Corporation© 2023 Global Brain CorporationGlobal BrainDesign System
© 2023 Global Brain Corporation© 2023 Global Brain CorporationSefirot͕ͲΜͳͷ͔ʹ͍͓ͭͯ͠͠·͢
© 2023 Global Brain Corporation© 2023 Global Brain Corporation͕ɺͦΕҎ্ʹ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationσβΠϯγεςϜͦͷͷʹ͍͓͍ͭͯͨ͠͠
© 2023 Global Brain Corporation© 2023 Global Brain Corporation࠷ۙΊͬͪΌΜͰ·͢
© 2023 Global Brain Corporation© 2023 Global Brain CorporationͭΒ͍
© 2023 Global Brain Corporation© 2023 Global Brain CorporationͲ͏͢Ε͍͍ͷ͔ਖ਼Θ͔Βͳ͍͜ͱͩΒ͚
© 2023 Global Brain Corporation© 2023 Global Brain CorporationͳΜͰ͜Μͳ͜ͱΛͨͪͬͯΔΜͩʁ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationͦͦσβΠϯγεςϜͬͯͳΜͩʁ
© 2023 Global Brain Corporation© 2023 Global Brain Corporationࠈ͔ʁ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationΈͳ͞ΜΜͰͳ͍Ͱ͔͢ʁ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationΜͰ͍͍ͯͳͯ͘ҰॹʹΈ·ͤΜ͔ʁ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationҰॹʹ͜ͷۤ͠ΈΛڞ༗͠·ͤΜ͔
© 2023 Global Brain Corporation© 2023 Global Brain Corporationͦͯ͠ߟ͑ͯΈ͍ͨզʑ͕ͤʹͳΕΔͷ͔Λ
© 2023 Global Brain Corporation© 2023 Global Brain Corporation࠙ձͰϏʔϧยखʹٞͰ͖ΔΑ͏ͳΛ
© 2023 Global Brain Corporation© 2023 Global Brain Corporationࠓ͍ͨ͠ͱࢥ͍·͢
© 2023 Global Brain Corporation© 2023 Global Brain CorporationΦϑϥΠϯͰͷΠϕϯτٱʑͰ͢
© 2023 Global Brain Corporation© 2023 Global Brain Corporation͔ͤͬ͘ͳͷͰ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationΓ͔͚ͨͬͨͲͬͨ͜ͱ͕ͳ͍
© 2023 Global Brain Corporation© 2023 Global Brain CorporationΉ͔͠ͳ͔ͭ͠
© 2023 Global Brain Corporation© 2023 Global Brain CorporationTAKAHASHIMETHOD
© 2023 Global Brain Corporation© 2023 Global Brain CorporationͰ͓ૹΓ͠·͢
© 2023 Global Brain Corporation© 2023 Global Brain Corporation͠·ͯ͠
© 2023 Global Brain Corporation© 2023 Global Brain CorporationSefirotGlobal BrainDesign System
© 2023 Global Brain Corporation© 2023 Global Brain CorporationσβΠϯγεςϜʹ͓͚ΔՌͯ͠ͳ͍ۤ͠Έͷڞ༗ɻͦͯͦ͠ͷઌʹͤΛݟ͚ͭΔͨΊͷݶΓͳ͍ઓɻ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationKiaKingੴҪ ًѥVue.js Core Team MemberGitHub: @kiakingTwitter:@KiaKing85
© 2023 Global Brain Corporation© 2023 Global Brain CorporationHERE WE GO
© 2023 Global Brain Corporation© 2023 Global Brain CorporationAGENDA
© 2023 Global Brain Corporation© 2023 Global Brain Corporation1. Sefirotͱʁ
© 2023 Global Brain Corporation© 2023 Global Brain Corporation1. Sefirotͱʁ2. Design͍͠
© 2023 Global Brain Corporation© 2023 Global Brain Corporation1. Sefirotͱʁ2. Design͍͠3. ͡ΌͲ͏͢Δ͔
© 2023 Global Brain Corporation© 2023 Global Brain Corporation
© 2023 Global Brain Corporation© 2023 Global Brain Corporation• Vue Component• CSS Styles(Variables)• Utility Functions
© 2023 Global Brain Corporation© 2023 Global Brain Corporationͦͷલʹഎܠॏཁ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationͦͦGlobal Brainͬͯʁ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationGlobal BrainϕϯνϟʔΩϟϐλϧ
© 2023 Global Brain Corporation© 2023 Global Brain Corporation৭ʑͳγεςϜɾΞϓϦΛ࡞͍ͬͯ·͢
© 2023 Global Brain Corporation© 2023 Global Brain Corporation΄ͱΜͲ͕͚ࣾ͘͠ݶΒΕͨϢʔβ͕ର
© 2023 Global Brain Corporation© 2023 Global Brain CorporationνʔϜମ੍
© 2023 Global Brain Corporation© 2023 Global Brain CorporationσβΠφʔ1ਓThat's me! 👋
© 2023 Global Brain Corporation© 2023 Global Brain CorporationϑϧελοΫ5ਓ ʢ2ਓ֎ۀҕୗʣThat's also me! 👋ଞͷϝϯόʔࠓ͖ͯΔΑʂ 🙌
© 2023 Global Brain Corporation© 2023 Global Brain CorporationϙΠϯτ:σβΠφʔΤϯδχΞͷ1ਓ
© 2023 Global Brain Corporation© 2023 Global Brain Corporation͖ͬͺΓͱମ੍͔Ε͍ͯͳ͍
© 2023 Global Brain Corporation© 2023 Global Brain CorporationͰɺSefirotͬͯʁ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationجຊతʹVueͰ࡞ΒΕͨUI Library
© 2023 Global Brain Corporation© 2023 Global Brain CorporationVue Components
© 2023 Global Brain Corporation© 2023 Global Brain CorporationCSS Styles
© 2023 Global Brain Corporation© 2023 Global Brain CorporationUtility Functions
© 2023 Global Brain Corporation© 2023 Global Brain CorporationσβΠϯγεςϜͱ͍͏ΑΓSDKͷΑ͏ͳΠϝʔδ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationTech Stack
© 2023 Global Brain Corporation© 2023 Global Brain Corporation• Vue(SFC+TS)• PostCSS (nested plugin only)• VitePress (docs)• Histoire (story)
© 2023 Global Brain Corporation© 2023 Global Brain CorporationϏϧυແ͠
© 2023 Global Brain Corporation© 2023 Global Brain CorporationιʔεΛͦͷ··ύϒϦογϡ
© 2023 Global Brain Corporation© 2023 Global Brain Corporation͏࣌ͨͩΠϯϙʔτ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationSimple!
© 2023 Global Brain Corporation© 2023 Global Brain CorporationࣾϢʔεʹಛԽՄೳͳݶΓγϯϓϧʹ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationOSSͳͷͰڵຯ͕͋Ε https://github.com/globalbrain/sefirot
© 2023 Global Brain Corporation© 2023 Global Brain Corporationͳͥ࡞͔ͬͨʁ
© 2023 Global Brain Corporation© 2023 Global Brain Corporationඞཁ͔ͩͬͨΒ
© 2023 Global Brain Corporation© 2023 Global Brain Corporation͜ΕࠓͷςʔϚ
© 2023 Global Brain Corporation© 2023 Global Brain Corporationͳͥ࡞Δͷ͔ʁ
© 2023 Global Brain Corporation© 2023 Global Brain Corporationඞཁ͔ͩΒ
© 2023 Global Brain Corporation© 2023 Global Brain Corporation............ 🤔
© 2023 Global Brain Corporation© 2023 Global Brain Corporationͳͥඞཁͩͬͨʁ
© 2023 Global Brain Corporation© 2023 Global Brain Corporation2. σβΠϯ͍͠
© 2023 Global Brain Corporation© 2023 Global Brain CorporationΣϒσβΠϯ͍͠
© 2023 Global Brain Corporation© 2023 Global Brain Corporationҟৗʹ͍͠
© 2023 Global Brain Corporation© 2023 Global Brain CorporationͲͷ͘Β͍͍͠ʁ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationApple
© 2023 Global Brain Corporation© 2023 Global Brain CorporationAppleਘৗͰͳ͍
© 2023 Global Brain Corporation© 2023 Global Brain CorporationᘳͳຊޠϨΠΞτ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationGoogle
© 2023 Global Brain Corporation© 2023 Global Brain CorporationҰੲલΑΓੌ·͘͡Α͘ͳ͕ͬͨɺ͍·Ұา...
© 2023 Global Brain Corporation© 2023 Global Brain CorporationMicrosoft
© 2023 Global Brain Corporation© 2023 Global Brain Corporation😱
© 2023 Global Brain Corporation© 2023 Global Brain CorporationApple͍͢͝
© 2023 Global Brain Corporation© 2023 Global Brain Corporation............͚ͩͲ............
© 2023 Global Brain Corporation© 2023 Global Brain Corporation🫠
© 2023 Global Brain Corporation© 2023 Global Brain CorporationApple͕ແཧͳ͘Β͍͍͠
© 2023 Global Brain Corporation© 2023 Global Brain CorporationσβΠϯγεςϜ͕؆୯ͳ༁͕ͳ͍
© 2023 Global Brain Corporation© 2023 Global Brain CorporationͭΒ͍...
© 2023 Global Brain Corporation© 2023 Global Brain CorporationͳͷʹͳͥΔͷ͔ʁ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationΦʔέʔ͡Ό͊ͳ͍ͥ͠ʁ
© 2023 Global Brain Corporation© 2023 Global Brain Corporation• δϨϯϚͱͷઓ͍• ίετ͕େ• ᘳʹͰ͖ͳ͍
© 2023 Global Brain Corporation© 2023 Global Brain CorporationσβΠϯγεςϜδϨϯϚͱͷઓ͍
© 2023 Global Brain Corporation© 2023 Global Brain Corporationྫ͑ίϯςϯπϑΝʔετ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationσβΠϯ୯ʹݟӫ͑ͷͨΊͰͳ͘ ʮࠓදݱ͖͢ίϯςϯπʯ ʹͱͬͯ࠷దͳͷΛ࣮͢Δ͖
© 2023 Global Brain Corporation© 2023 Global Brain CorporationͳΔ΄Ͳɻ͔ͨ͠ʹɻ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationΜ......ʁ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationσβΠϯΑΓίϯςϯπ͕ઌʹདྷΔ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationͦΕ͕ίϯςϯπϑΝʔετͰ͠ΐʁ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationσβΠϯγεςϜͬͯσβΠϯ͕ઌʹ དྷͯͳ͍ʁ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationσβΠϯγεςϜͬͯڞ௨Խ͞ΕͨܕΛ࡞ΔΜ͡Όͳ͍ͷʁ
© 2023 Global Brain Corporation© 2023 Global Brain Corporationໃ६ͯ͠ͳ͍ʁ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationγεςϜԽͤͣʹςʔϥʔϝΠυ͢Δ͕ਖ਼͍͠ͷͰʁ
© 2023 Global Brain Corporation© 2023 Global Brain Corporationͱ͍͏ͷۃ͗͢Δ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationҰͭҰͭͷ෦ʹͨ͠߹
© 2023 Global Brain Corporation© 2023 Global Brain CorporationͦͦσβΠϯγεςϜͷείʔϓখ͍͞
© 2023 Global Brain Corporation© 2023 Global Brain Corporationখ͞ͳ෦͕ू·ͬͯେ͖ͳσβΠϯʹͳΔ
© 2023 Global Brain Corporation© 2023 Global Brain Corporation͔ͩΒίϯςϯπϑΝʔετൣᙝ֎ͩ
© 2023 Global Brain Corporation© 2023 Global Brain Corporation͍·ͯ
© 2023 Global Brain Corporation© 2023 Global Brain Corporationͦ͏͍͏͕͍ͨ͠Μ͡Όͳ͍
© 2023 Global Brain Corporation© 2023 Global Brain Corporation໊લʹनΘΕ͍͚ͯͳ͍
© 2023 Global Brain Corporation© 2023 Global Brain CorporationσβΠϯγεςϜͱ͍͏໊લͷͭ͘ͷΛ࡞Γ͍ͨ༁͡Όͳ͍
© 2023 Global Brain Corporation© 2023 Global Brain CorporationΘ͔͍ͬͯΔ͚Ͳ
© 2023 Global Brain Corporation© 2023 Global Brain Corporationͱ͍͏ͷ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationσβΠϯγεςϜίετ͕େ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationʮੈͷதʹιϦϡʔγϣϯଘࡏ͠ͳ͍ɻ ͋ΔͷτϨʔυΦϑ͚ͩͩʯ
© 2023 Global Brain Corporation© 2023 Global Brain Corporationྫ͑
© 2023 Global Brain Corporation© 2023 Global Brain CorporationͲ͏࡞Δʁ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationSefirotͩͱ
© 2023 Global Brain Corporation© 2023 Global Brain Corporation͏ͻΐʔʔʔ
© 2023 Global Brain Corporation© 2023 Global Brain Corporationίʔυྔ͕૿͑Δ͚ͩ͡Όͳ͍
© 2023 Global Brain Corporation© 2023 Global Brain Corporation• Issueͷىථ• Unit Test• Component Test• Visual Regression Test• Code Review• Docsߋ৽• Storyߋ৽• Build+Publish• Package Update
© 2023 Global Brain Corporation© 2023 Global Brain Corporation͜Ε͚ͩͬͯ
© 2023 Global Brain Corporation© 2023 Global Brain Corporation͜Εʁ
© 2023 Global Brain Corporation© 2023 Global Brain Corporationཉ͍͠ίʔυ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationͰ͠ΐʁ
© 2023 Global Brain Corporation© 2023 Global Brain Corporation͚Ͳ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationͰ͜Μͳʹେมͳͷʹ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationσβΠϯγεςϜᘳʹͳΒͳ͍
© 2023 Global Brain Corporation© 2023 Global Brain Corporation୭͕ເݟΔσβΠϯγεςϜ͜Μͳײ͡
© 2023 Global Brain Corporation© 2023 Global Brain Corporationઈඒ͍͠σβΠϯΛࢥ͍ͭ͘
© 2023 Global Brain Corporation© 2023 Global Brain CorporationᘳʹγεςϜʹམͱ͠ࠐΉ
© 2023 Global Brain Corporation© 2023 Global Brain Corporation୭͕ઈࢍ
© 2023 Global Brain Corporation© 2023 Global Brain Corporation։ൃ͢Δ࣌γεςϜʹै͏͚ͩ
© 2023 Global Brain Corporation© 2023 Global Brain Corporation༻ҙ͞Εͨᘳͳ෦Λ Έ߹ΘͤΔͱΞϓϦ͕Ͱ͖Δ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationͦΕεϐʔυ
© 2023 Global Brain Corporation© 2023 Global Brain Corporation͜Ε·Ͱ1ϲ݄͔͔ͬͨ ։ൃ͕1ͰऴΘΔ
© 2023 Global Brain Corporation© 2023 Global Brain Corporation͔͔͍͍ͬ͜͠
© 2023 Global Brain Corporation© 2023 Global Brain CorporationΠʔϩϯɾϚεΫ͔Βి͕͔͔͖ͬͯͯςεϥͷσβΠϯγεςϜߏஙΛʑʹґཔ͞ΕΔ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationMUUUUURYYYYY!!!
© 2023 Global Brain Corporation© 2023 Global Brain CorporationToggle switches are buttons that change and save aboolean configuration option when they are toggled.Checkboxes are form inputs that are used to select one ormore items from a list, and are not saved without explicitconfirmation such as pressing a Save button.
© 2023 Global Brain Corporation© 2023 Global Brain CorporationWhat?
© 2023 Global Brain Corporation© 2023 Global Brain Corporation͜Εগ͠ϑΣΞ͡Όͳ͍
© 2023 Global Brain Corporation© 2023 Global Brain Corporation͜Ε͡Όͳ͍ͣ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationσβΠϯγεςϜվળ͞ΕΔͷ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationৗʹਐԽ͍ͯ͘͠ͷ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationᘳͱมԽ͠ͳ͍ͷ
© 2023 Global Brain Corporation© 2023 Global Brain Corporation...
© 2023 Global Brain Corporation© 2023 Global Brain Corporation......
© 2023 Global Brain Corporation© 2023 Global Brain Corporation.........
© 2023 Global Brain Corporation© 2023 Global Brain Corporation.........Ͱ
© 2023 Global Brain Corporation© 2023 Global Brain Corporation͡Ό͍Δͷʁ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationͲ͏ͤมΘΔΜͰ͠ΐʁ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationͦΕͬͯܕ͕ͳ͍ͷͱҰॹ͡Όͳ͍ͷʁ
© 2023 Global Brain Corporation© 2023 Global Brain Corporationඞཁͩͱͯ͠՝ҰഋࢁੵΈ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationۃΊ͚ͭʹਖ਼ղͳ͍ʢଟʣ
© 2023 Global Brain Corporation© 2023 Global Brain Corporationͱ͍͑͜͏ͨ͠ํ͕͍͍ͷͰʁ
© 2023 Global Brain Corporation© 2023 Global Brain Corporationͱ͍͏ΞΠσΟΞΛ͍͔ͭ͘հ
© 2023 Global Brain Corporation© 2023 Global Brain Corporation3. ͡ΌͲ͏͢Δ͔
© 2023 Global Brain Corporation© 2023 Global Brain CorporationσβΠϯγεςϜ͔Β࡞Βͳ͍ɻϓϩμΫτ͔ΒσβΠϯΛൈ͖ग़͢ɻ
© 2023 Global Brain Corporation© 2023 Global Brain Corporationҙ֎ͱΓ͕ͪ
© 2023 Global Brain Corporation© 2023 Global Brain Corporation͍Βͳ͍ػೳ͚͕ͭͪ
© 2023 Global Brain Corporation© 2023 Global Brain Corporation͜Εશͬͯ͘·ͤΜ
© 2023 Global Brain Corporation© 2023 Global Brain Corporationզຫ͠Α͏
© 2023 Global Brain Corporation© 2023 Global Brain Corporation͙͢ʹγεςϜԽ͢ΔͳɻෳͷՕॴͰࢼͤɻ
© 2023 Global Brain Corporation© 2023 Global Brain Corporation͙͢৽͍͠ػೳཉ͘͠ͳͬͪΌ͍͕ͪ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationNO is temporary,YES is forever.
© 2023 Global Brain Corporation© 2023 Global Brain Corporationޙչ͢Δͧ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationσβΠϯγεςϜʹཷΊࠐΉͳɻ͙͢ʹɺ͍·͙͢ɺө͠Ζɻ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationσβΠϯγεςϜཱ͚ͩʹͳΓ͕ͪ
© 2023 Global Brain Corporation© 2023 Global Brain Corporationੈʹग़ͯͳ͍ͳΒͳ͍ͷͱҰॹ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationυΩϡϝϯτͱςετ࠷ॳʹॻ͘ɻޙճ͠ʹ͠ͳ͍ɻઈରɻ
© 2023 Global Brain Corporation© 2023 Global Brain Corporation·͡Ͱ
© 2023 Global Brain Corporation© 2023 Global Brain Corporation͋ͱ͔Βॻ͘ͷਏ͗ͯ͢ॻ͔ͳ͍··์ஔ͕ͪ͠
© 2023 Global Brain Corporation© 2023 Global Brain CorporationഁյΛڪΕΔͳɻϓϩάϨογϒʹվળ͠Ζɻ
© 2023 Global Brain Corporation© 2023 Global Brain Corporationࠓ͋ΔػೳΛݴ͍༁ʹ͕ͪ͠
© 2023 Global Brain Corporation© 2023 Global Brain CorporationϑϧεΫϥονࠈ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationVue 3ҠߦͷࠈͰΈΜͳֶΜͩͰ͠ΐϓϩάϨογϒେࣄ
© 2023 Global Brain Corporation© 2023 Global Brain Corporation͓͞Β͍
© 2023 Global Brain Corporation© 2023 Global Brain Corporation😶
© 2023 Global Brain Corporation© 2023 Global Brain Corporationۤͯ͘͠ɺͤ͋Δ
© 2023 Global Brain Corporation© 2023 Global Brain Corporationۤͯ͘͠ɺͤ͋Δ
© 2023 Global Brain Corporation© 2023 Global Brain Corporation͍͔ۤ͠Βɺ͕ͤ͋Δ
© 2023 Global Brain Corporation© 2023 Global Brain CorporationNO PAIN, NO GAIN
© 2023 Global Brain Corporation© 2023 Global Brain CorporationҿΈ·͠ΐ͏ 🍻
© 2023 Global Brain Corporation© 2023 Global Brain CorporationTHANK YOU