次の5年を支えるVue.js製UIコンポーネントライブラリを育てる / build up Vue.js component library for next five years.pdf

Atomic Designを実現するコンポーネント指向開発のいま
https://base.connpass.com/event/122517/

で登壇した際の資料になります。

#atomic_shibuya

Transcript

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