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

9eedb2b6ddfdfccf6cc347225ab1deda?s=47 simezi9
March 21, 2019

次の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

9eedb2b6ddfdfccf6cc347225ab1deda?s=128

simezi9

March 21, 2019
Tweet

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͔Β࡞Δɺ ϑϩϯτΤϯυνʔϜͷ௅ઓ