Atomic Designを実現するコンポーネント指向開発のいま https://base.connpass.com/event/122517/
で登壇した際の資料になります。
#atomic_shibuya
© 2012-2019 BASE, Inc.࣍ͷ5Λࢧ͑ΔVue.jsUIίϯϙʔωϯτϥΠϒϥϦΛҭͯΔ1
View Slide
© 2012-2019 BASE, Inc.ࣗݾհদݪ ༎հϑϩϯτΤϯυΤϯδχΞ20189݄ BASEೖࣾ: simezi92
© 2012-2019 BASE, Inc. 3ࠓ͢͜ͱՌɿߏஙͨ͠ϥΠϒϥϦͱ࡞ۀϑϩʔ2ܦҢɿͳͥίϯϙʔωϯτϥΠϒϥϦΛ࡞͔ͬͨ1ֶͼɿ࣮ࡍʹͬͯΈͯͲ͏͔ͩͬͨ3
© 2012-2019 BASE, Inc.ᶃͳͥίϯϙʔωϯτϥΠϒϥϦΛ࡞ͬͨͷ͔4
© 2012-2019 BASE, Inc.ᶃܦҢɿBASEͷϓϩμΫτʹ͍ͭͯ5ωοτγϣοϓ࡞αʔϏεʮBASEʯγϣοϐϯάΞϓϦʮBASEʯՁͷަΛΑΓγϯϓϧʹ͠ɺੈքதͷਓʑ͕࠷దͳܦࡁ׆ಈΛߦ͑ΔΑ͏ʹ͢ΔɻMISSION
© 2012-2019 BASE, Inc. 6
© 2012-2019 BASE, Inc.ᶃܦҢɿͦͷҰํͰ࣮ɾɾɾ• αʔϏεΠϯ͔Βܧ͗͠ଓ͚ΒΕͨίʔυ• σβΠϯΫΦϦςΟͷҡ͕͍࣋͠• ͨΓతͳ࣮͕ଟ͘ϝϯςφϯε͕͍͠• ࣾͷσβΠϯΨΠυϥΠϯ͕ͳ͍7
© 2012-2019 BASE, Inc.࣍ੈཧը໘ϓϩδΣΫτελʔτᶃܦҢɿͦΕΛଧഁ͢ΔͨΊʹ8
© 2012-2019 BASE, Inc.ϝΠϯػೳͱͳΔཧը໘ͷશ໘ϦχϡʔΞϧ&ίϯϙʔωϯτϥΠϒϥϦ࡞ʹΑΔσβΠϯͷ౷Ұ࣍ͷ5ͷ։ൃΛࢧ͑ΔᶃܦҢɿ࣍ੈཧը໘ϓϩδΣΫτ9
© 2012-2019 BASE, Inc.ᶃܦҢɿBASEͷཧը໘ʹٻΊΒΕΔͷ10• 70ສγϣοϓͷΦʔφʔ͕͏ը໘• ʮ͓͞Μ͑ΔʯίϯηϓταΠτશମͰσβΠϯͷΫΦϦςΟΛҡ࣋͢ΔͨΊʹίϯϙʔωϯτԽͯ͠Ұݩཧ͍ͨ͠
© 2012-2019 BASE, Inc.ᶃܦҢɿίϯϙʔωϯτϥΠϒϥϦ(BBQ)ੜ11
© 2012-2019 BASE, Inc.ᶄߏஙͨ͠ϥΠϒϥϦͱ࡞ۀϑϩʔ12
© 2012-2019 BASE, Inc.ᶄՌɿϥΠϒϥϦ• ίϯϙʔωϯτϥΠϒϥϦɺBBQ• Vue.js + TypeScript + Storybook• ͍ճͤΔΑ͏ʹಠཱͨ͠ϦϙδτϦ• ϢʔβʔVueͷpluginͱͯ͠ར༻• AtomicDesignΛऔΓೖΕͨઃܭ• Atoms + MoleculesΛొ• ࠶ར༻ੑͷߴ͍ͷ͚ͩ• αΠτશମͰ̏ճҎ্͏͔ʁ• ݫີͳϨΠϠʔ͚͠ͳ͍• AtomͱAtomΛΈ߹Θͤͨͷɺఔͷײ֮13
© 2012-2019 BASE, Inc.ᶄՌɿϥΠϒϥϦ• storybook্Ͱ֬ೝͰ͖Δ͜ͱ• ࣮ࡍʹಈ͘ίϯϙʔωϯτΛ৮ΕΔ• ίϯϙʔωϯτΛΈࠐΉίʔυ͕ݟ͑Δ• ίϯϙʔωϯτʹΘͨ͢ϓϩύςΟͷ֬ೝ͕Ͱ͖Δ• ϓϩύςΟΛௐ͠ͳ͕Βίϯϙʔωϯτͷಈ͖Λ֬ೝͰ͖ΔstorybookΛݟΔ͚ͩͰ࣮͕Ͱ͖Δঢ়ଶ14
© 2012-2019 BASE, Inc.ᶄՌɿ࡞ۀϑϩʔ15• SketchͰίϯϙʔωϯτͷ࡞• GitHub issueͱͯ͠ίϯϙʔωϯτͷมߋΛొ• Pull requestͰίϯϙʔωϯτͷ࣮ˍREADME.mdͷߋ৽• PR͝ͱʹσϓϩΠ͞ΕͨstorybookͰಈ࡞ͷ֬ೝ• Ϛʔδ & σϓϩΠσβΠφʔΤϯδχΞ
© 2012-2019 BASE, Inc.ᶄՌɿॏཁͳ͜ͱ16• Sketch / PhotoshopͷੈքͰ࡞ۀΛ͍݁ͨ͠σβΠφʔ• JavaScriptͷੈքͰ࡞ۀΛ͍݁ͨ͠ΤϯδχΞ• ίϛϡχέʔγϣϯ͢Δॴ͕ඞཁ(ΤϯδχΞ͔ΒΈͨʣ͋Δ͋Δ• Βͳ͍ؒʹσβΠϯͷௐ͕sketch্ʹೖ͍ͬͯΔͷʹΤϯδχΞ͕ؾ͔ͮͳ͍ͷͰ࣮͞Εͳ͍• ද໘తͳσβΠϯͷཪʹӅ͞Εͨҙਤ͕Θ͔Βͳ͍• ྫ) ৭ͷ͍ํɺϞʔμϧͱμΠΞϩάͷ͍͚ɾɾɾetcͻͱ·ͣGitHubΛڠۀͷॴͱͯ͠ཧ͍ͯ͠Δ
© 2012-2019 BASE, Inc.ᶄՌɿڠۀͷͱͯ͠ͷGitHub• issueͱͯ͠Ҋ݅Λىථ͢Δ• มߋͷࠩɾ༷ΛGitHubʹूதͤ͞Δ• sketchΛΤϯδχΞ͕ݟͯมߋΛΩϟον͢Δͷݫ͍͠• Βͳ͍͏ͪʹ༷͕มΘͬͨͷʹؾ͔ͮͳ͍Λආ͚Δ17
© 2012-2019 BASE, Inc.ᶄՌɿڠۀͷͱͯ͠ͷGitHub• ίϯϙʔωϯτͷ֓ཁREADME.mdʹ• Storybook͔ΒREADME.mdΛimportͯ͠ಉ͡ͷ͕ݟ͑ΔΑ͏ʹ• ίϯϙʔωϯτ͝ͱʹREADMEΛ༻ҙ͢Δ͜ͱͰɺPR্Ͱ༷ͷυΩϡϝϯτͱ࣮ͷࠩΛಉ࣌ʹϨϏϡʔ͢Δ͜ͱ͕Ͱ͖Δ• ୭Ͱฤू͘͢͠৺ཧతෛՙͷ͍README.md18
© 2012-2019 BASE, Inc.ᶄՌɿςετ• ςετϑϨʔϜϫʔΫJestΛ࠾༻• @storybook/storyshots ʹΑΔDOMͷεφοϓγϣοτςετ• storybookʹొͯ͋͠Δίϯϙʔωϯτͯ͢ΛDOMͰൺֱͯ͠diffΛग़ͯ͘͠ΕΔ• @storybook/storyshots/puppeteerʹΑΔεΫϦʔϯγϣοτͷϏδϡΞϧϦάϨογϣϯςετ• storybookʹొͯ͋͠Δίϯϙʔωϯτͯ͢ΛࣗಈͰࡱӨͯ͠diffΛൺֱͯ͘͠ΕΔ• ※ ϒϥβͰͷಈ࡞ͳͷͰɺ࣮ߦλΠϛϯάͷͳͲͰ҆ఆੑʹ͚ܽΔҹͳͷͰશ෦͓·͔ͤ·͍ͩ͠• storybookΛߋ৽͍͚ͯ͠ςετࣗಈͰ૿͑Δ҆৺ײ19
© 2012-2019 BASE, Inc.ᶄՌ࣍ੈཧը໘ˏୈҰϦϦʔε࣍ੈཧը໘ˏୈҰϦϦʔε
© 2012-2019 BASE, Inc.ᶅ࣮ࡍʹͬͯΈͯͲ͏͔ͩͬͨ21
© 2012-2019 BASE, Inc.ᶅֶͼɿϥΠϒϥϦ࡞ͷਐΊํ22• খ͍͞ίϯϙʔωϯτ͔Βॱ൪ʹ࡞ΓΛߴΊΔ• ྫɿbuttonɺinputɾɾɾ• storybook্Ͱಈ͍͍ͯΔΑ͏ʹΈ࣮͑ͯࡍʹΈࠐΉͱɺઈରʹͭ͗ͭ͗ͱ͕ग़ͯ͘Δ• Λ͔ͬ͠ΓݻΊΔ• ுΓͬͯͯ͢ͷίϯϙʔωϯτΛ࠷ॳʹग़͠Ζ͏ͱ͠ͳ͍• ֆʹඳ͍ͨṷʹͳΓ͕ͪ• ࣮ࡍͷΞϓϦέʔγϣϯʹΈࠐΈͳ͕Β։ൃ͢Δ• ίϯϙʔωϯτͷ։ൃ͚ͩΛಠཱͨ͠ϝϯόʔɾϓϩδΣΫτͰਐΊͯίϛϡχέʔγϣϯίετखΓ͔Γ૿͑ͯ͏·͍͔͘ͳ͍
© 2012-2019 BASE, Inc.ᶅֶͼɿখ͍͞ίϯϙʔωϯτ࡞ΓͳΒ؆୯ʁ23• খ͞ͳ෦Ͱਖ਼͘͠࡞ΔʹҰఆͷࣝɾೳྗ͕ඞཁ• ඪ४ͷHTMLλάΛϥοϓ͢ΔʹHTMLͷ༷ΛΒͳ͍ͱ͍͚ͳ͍ྫ͑ͦͷatomͳίϯϙʔωϯτɾɾɾ• ඪ४ͷHTMLͱಉ͡ײ֮Ͱ͑ΔΠϯλʔϑΣΠεʹͳ͍ͬͯ·͔͢ʁ• ྫ) changeΠϕϯτ͔͠ൃՐ͠ͳ͍inputλά (inputΠϕϯτ͕དྷͳ͍)• ྫ) mouseenterͳͲ͕ൃՐ͠ͳ͍• ྫ) disabledଐੑΛͯ͠ແԠ• ͏ͱ͖ʹελΠϧͷඍௐͰ͖·͔͢ʁ• ྫ) z-indexΛ෦Ͱઃఆ͍ͯ͠Δ• ྫ) margin͕ઃఆ͞Ε͍ۭͯͯനΛͤͳ͍• a11yରԠదʹ͞Ε͍ͯ·͔͢ʁ
© 2012-2019 BASE, Inc.ᶅֶͼɿVueͱίϯϙʔωϯτઃܭ24• ίϯϙʔωϯτઃܭɾ࣮ΔͱΠϝʔδҎ্ʹ͍͠• Vue.js࠷ॳͷҰาΛ౿Έग़͍͢͠ϑϨʔϜϫʔΫ• ≠ ඞཁʹͳΔࣝɾٕྔ͕গͳ͍• ࣮͢ΔલʹɺVuetifyMaterial-UIͳͲOSSͷϥΠϒϥϦͷιʔεΛݟͯงғؾΛ௫ΉͷΛΦεεϝ• ϝϯόʔͷशख़͕ߴ͘ͳ͍߹ʹɺ͓ͦΒ͍͖͘ͳΓίϯϙʔωϯτͱ͔Λߟ͑ͣʹɺ·ͣVue.jsͰҰ௨Γίʔυॻ͍ͯܦݧΛੵΉ΄͏͕ྑͦ͞͏
© 2012-2019 BASE, Inc.ᶅֶͼɿ࠷ॳʹ༻ҙ͓͖͍ͯͨ͜͠ͱ25• ίϯϙʔωϯτখ͍͞मਖ਼ΛසൟʹϦϦʔε͢Δ• ϏϧυɾϦϦʔεपΓ࠷ॳ͔Β͋Δఔ࡞ΓࠐΉՁ͕͋Δ• ͳΔ͘ϦϦʔεͷෛՙΛԼ͓͛ͯ͘• ͋ͱͰͳʹ͔͠Α͏ͱ͢ΔͱWebpack͕ਏ͍linter/prettierͷඋStorybookͷඋ + ඞਢʹ͍ۙϓϥάΠϯͷಋೖ@storybook/addon-actionsstorybook-addon-vue-info@storybook/addon-knobs@storybook/storyshots(ඞཁͳΒ)TypecriptͷಋೖPR୯ҐͰͷstorybookͷࣗಈϏϧυ
© 2012-2019 BASE, Inc.ᶅֶͼɿ·ͱΊ26• ίϯϙʔωϯτઃܭͯ͠ཁ݅Λཧ͢Δͱॳظίετ࣮֬ʹ্͕Δ• ༷ܾఆͷίετ• ΤϯδχΞɾσβΠφʔؒͷίϛϡχέʔγϣϯίετ• ظతʹ͏ίϯϙʔωϯτΛผϥΠϒϥϦͱͯ͠Γग़͢ͷ༗ޮ• routerstoreͳͲ۩ମੑͷߴ͍ίϯςΩετ͕ೖͬͯ͜ͳ͍ͷͰίϯϙʔωϯτΛΫϦʔϯʹอͯΔ• ͍͖ͳΓίϯϙʔωϯτΛ࡞Ζ͏ͱͤͣɺ·ͣVue.jsʹ׳ΕΔ• webpack͕Τϥʔʹͳͬͯٽ͔ͳ͍• Jest͕Τϥʔʹͳͬͯٽ͔ͳ͍
© 2012-2019 BASE, Inc.͓·͚ɿWe are hiring• ۂ໘ϧτϥϫΠυσΟεϓϨΠ͕ങ͑Δ৬͍͍ͧ• ϑϩϯτΤϯυΤϯδχΞʹԣղ૾͕ॏཁ•Chrome DevTools͕ѹతʹݟ͍͢2738WK95C-W
© 2012-2019 BASE, Inc.͓·͚ɿςοΫϒϩάߋ৽ͯ͠·͢28https://devblog.thebase.in/ຊͷొஃʹؔ࿈ͷ͋Δهࣄɾ࣍ੈͷཧը໘Λ࡞ΔϑϩϯτΤϯυͷऔΓΈɾʮSketchΛ༻͍ͨσβΠϯγεςϜʯΛ࡞ͬͯνʔϜͰͷσβΠϯ࡞ۀΛޮԽͨ͠ɾʮBASEʯͷཧը໘ϦχϡʔΞϧϓϩδΣΫτͷ͜Ε·Ͱͱ͜Ε͔Β
© 2012-2019 BASE, Inc.͓·͚ɿΦϯυϝσΟΞߋ৽ͯ͠·͢29https://basebook.binc.jp/ϑϩϯτΤϯυνʔϜͷهࣄ࣍ͷ5͍ଓ͚ͯΒ͏ʮBASEʯͷͨΊʹɻ࣍ੈཧը໘Λ1͔Β࡞ΔɺϑϩϯτΤϯυνʔϜͷઓ