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

   View Slide

2. © 2012-2019 BASE, Inc.
   ࣗݾ঺հ
   দݪ ༎հ
   ϑϩϯτΤϯυΤϯδχΞ
   2018೥9݄ BASEೖࣾ
   : simezi9
   2
   

   View Slide

3. © 2012-2019 BASE, Inc. 3
   ࠓ೔࿩͢͜ͱ
   ੒Ռɿߏஙͨ͠ϥΠϒϥϦͱ࡞ۀϑϩʔ
   2
   ܦҢɿͳͥίϯϙʔωϯτϥΠϒϥϦΛ࡞͔ͬͨ
   1
   ֶͼɿ࣮ࡍʹ΍ͬͯΈͯͲ͏͔ͩͬͨ
   3
   

   View Slide

4. © 2012-2019 BASE, Inc.
   ᶃͳͥίϯϙʔωϯτϥΠϒϥ
   ϦΛ࡞ͬͨͷ͔
   4
   

   View Slide

5. © 2012-2019 BASE, Inc.
   ᶃܦҢɿBASEͷϓϩμΫτʹ͍ͭͯ
   5
   ωοτγϣοϓ࡞੒αʔϏε
   ʮBASEʯ
   γϣοϐϯάΞϓϦ
   ʮBASEʯ
   Ձ஋ͷަ׵ΛΑΓγϯϓϧʹ͠ɺ
   ੈքதͷਓʑ͕࠷దͳܦࡁ׆ಈΛߦ͑ΔΑ͏ʹ͢Δɻ
   MISSION
   

   View Slide

6. © 2012-2019 BASE, Inc. 6
   

   View Slide

7. © 2012-2019 BASE, Inc.
   ᶃܦҢɿͦͷҰํͰ࣮૷͸ɾɾɾ
   • αʔϏεΠϯ͔Βܧ͗଍͠ଓ͚ΒΕͨίʔυ
   • σβΠϯΫΦϦςΟͷҡ͕࣋೉͍͠
   • ৔౰ͨΓతͳ࣮૷͕ଟ͘ϝϯςφϯε͕೉͍͠
   • ࣾ಺ͷσβΠϯΨΠυϥΠϯ͕ͳ͍
   7
   

   View Slide

8. © 2012-2019 BASE, Inc.
   ࣍ੈ୅؅ཧը໘ϓϩδΣΫτ
   ελʔτ
   ᶃܦҢɿͦΕΛଧഁ͢ΔͨΊʹ
   8
   

   View Slide

9. © 2012-2019 BASE, Inc.
   ϝΠϯػೳͱͳΔ؅ཧը໘ͷશ໘ϦχϡʔΞϧ
   &
   ίϯϙʔωϯτϥΠϒϥϦ࡞੒ʹΑΔ
   σβΠϯͷ౷Ұ
   ࣍ͷ5೥ͷ։ൃΛࢧ͑Δ
   ᶃܦҢɿ࣍ੈ୅؅ཧը໘ϓϩδΣΫτ
   9
   

   View Slide

10. © 2012-2019 BASE, Inc.
    ᶃܦҢɿBASEͷ؅ཧը໘ʹٻΊΒΕΔ΋ͷ
    10
    • 70ສγϣοϓͷΦʔφʔ͕࢖͏ը໘
    • ʮ͓฼͞Μ΋࢖͑Δʯίϯηϓτ
    αΠτશମͰσβΠϯͷΫΦϦςΟΛҡ࣋͢ΔͨΊʹ
    ίϯϙʔωϯτԽͯ͠Ұݩ؅ཧ͍ͨ͠
    

    View Slide

11. © 2012-2019 BASE, Inc.
    ᶃܦҢɿίϯϙʔωϯτϥΠϒϥϦ(BBQ)஀ੜ
    11
    

    View Slide

12. © 2012-2019 BASE, Inc.
    ᶄߏஙͨ͠ϥΠϒϥϦͱ࡞ۀϑϩʔ
    12
    

    View Slide

13. © 2012-2019 BASE, Inc.
    ᶄ੒ՌɿϥΠϒϥϦ
    • ίϯϙʔωϯτϥΠϒϥϦɺBBQ
    • Vue.js + TypeScript + Storybook
    • ࢖͍ճͤΔΑ͏ʹಠཱͨ͠ϦϙδτϦ
    • Ϣʔβʔ͸Vueͷpluginͱͯ͠ར༻
    • AtomicDesignΛऔΓೖΕͨઃܭ
    • Atoms + MoleculesΛొ࿥
    • ࠶ར༻ੑͷߴ͍΋ͷ͚ͩ
    • αΠτશମͰ̏ճҎ্࢖͏͔ʁ
    • ݫີͳϨΠϠʔ෼͚͸͠ͳ͍
    • AtomͱAtomΛ૊Έ߹Θͤͨ΋ͷɺ
    ఔ౓ͷײ֮
    13
    

    View Slide

14. © 2012-2019 BASE, Inc.
    ᶄ੒ՌɿϥΠϒϥϦ
    • storybook্Ͱ֬ೝͰ͖Δ͜ͱ
    • ࣮ࡍʹಈ͘ίϯϙʔωϯτΛ৮ΕΔ
    • ίϯϙʔωϯτΛ૊ΈࠐΉίʔυ͕
    ݟ͑Δ
    • ίϯϙʔωϯτʹΘͨ͢ϓϩύςΟ
    ͷ֬ೝ͕Ͱ͖Δ
    • ϓϩύςΟΛௐ੔͠ͳ͕Βίϯϙʔ
    ωϯτͷಈ͖Λ֬ೝͰ͖Δ
    storybookΛݟΔ͚ͩͰ࣮૷͕Ͱ͖Δঢ়ଶ
    14
    

    View Slide

15. © 2012-2019 BASE, Inc.
    ᶄ੒Ռɿ࡞ۀϑϩʔ
    15
    • SketchͰίϯϙʔωϯτͷ࡞੒
    • GitHub issueͱͯ͠ίϯϙʔωϯτͷมߋΛొ࿥
    • Pull requestͰίϯϙʔωϯτͷ࣮૷ˍREADME.mdͷߋ৽
    • PR͝ͱʹσϓϩΠ͞ΕͨstorybookͰಈ࡞ͷ֬ೝ
    • Ϛʔδ & σϓϩΠ
    σβΠφʔ
    ΤϯδχΞ
    

    View Slide

16. © 2012-2019 BASE, Inc.
    ᶄ੒Ռɿॏཁͳ͜ͱ
    16
    • Sketch / PhotoshopͷੈքͰ࡞ۀΛ׬͍݁ͨ͠σβΠφʔ
    • JavaScriptͷੈքͰ࡞ۀΛ׬͍݁ͨ͠ΤϯδχΞ
    • ίϛϡχέʔγϣϯ͢Δ৔ॴ͕ඞཁ
    (ΤϯδχΞ͔ΒΈͨʣ͋Δ͋Δ
    • ஌Βͳ͍ؒʹσβΠϯͷௐ੔͕sketch্ʹ͸ೖ͍ͬͯΔͷʹΤϯδ
    χΞ͕ؾ͔ͮͳ͍ͷͰ࣮૷͞Εͳ͍
    • ද໘తͳσβΠϯͷཪʹӅ͞Εͨҙਤ͕Θ͔Βͳ͍
    • ྫ) ৭ͷ࢖͍ํɺϞʔμϧͱμΠΞϩάͷ࢖͍෼͚ɾɾɾetc
    ͻͱ·ͣ͸GitHubΛڠۀͷ৔ॴͱͯ͠੔ཧ͍ͯ͠Δ
    

    View Slide

17. © 2012-2019 BASE, Inc.
    ᶄ੒Ռɿڠۀͷ৔ͱͯ͠ͷGitHub
    • issueͱͯ͠Ҋ݅Λىථ͢Δ
    • มߋͷࠩ෼ɾ࢓༷ΛGitHubʹूதͤ͞Δ
    • sketchΛΤϯδχΞ͕ݟͯมߋΛΩϟον
    ͢Δͷ͸ݫ͍͠
    • ஌Βͳ͍͏ͪʹ࢓༷͕มΘͬͨͷʹؾ͔ͮ
    ͳ͍໰୊Λආ͚Δ
    17
    

    View Slide

18. © 2012-2019 BASE, Inc.
    ᶄ੒Ռɿڠۀͷ৔ͱͯ͠ͷGitHub
    • ίϯϙʔωϯτͷ֓ཁ͸README.mdʹ
    • Storybook͔Β΋README.mdΛimport
    ͯ͠ಉ͡΋ͷ͕ݟ͑ΔΑ͏ʹ
    • ίϯϙʔωϯτ͝ͱʹREADMEΛ༻ҙ͢
    Δ͜ͱͰɺPR্Ͱ࢓༷ͷυΩϡϝϯτͱ
    ࣮૷ͷࠩ෼Λಉ࣌ʹϨϏϡʔ͢Δ͜ͱ͕Ͱ
    ͖Δ
    • ୭Ͱ΋ฤू͠΍͘͢৺ཧతෛՙͷ௿͍
    README.md
    18
    

    View Slide

19. © 2012-2019 BASE, Inc.
    ᶄ੒Ռɿςετ
    • ςετϑϨʔϜϫʔΫ͸JestΛ࠾༻
    • @storybook/storyshots ʹΑΔDOMͷεφο
    ϓγϣοτςετ
    • storybookʹొ࿥ͯ͋͠Δίϯϙʔωϯτ͢
    ΂ͯΛDOMͰൺֱͯ͠diffΛग़ͯ͘͠ΕΔ
    • @storybook/storyshots/puppeteerʹΑΔε
    ΫϦʔϯγϣοτͷϏδϡΞϧϦάϨογϣϯ
    ςετ
    • storybookʹొ࿥ͯ͋͠Δίϯϙʔωϯτ͢
    ΂ͯΛࣗಈͰࡱӨͯ͠diffΛൺֱͯ͘͠ΕΔ
    • ※ ϒϥ΢βͰͷಈ࡞ͳͷͰɺ࣮ߦλΠϛϯάͷ໰୊ͳͲͰ΍΍
    ҆ఆੑʹ͚ܽΔҹ৅ͳͷͰશ෦͓·͔ͤ͸·ͩ೉͍͠
    • storybookΛߋ৽͍͚ͯ͠͹ςετ΋ࣗಈͰ૿
    ͑Δ҆৺ײ
    19
    

    View Slide

20. © 2012-2019 BASE, Inc.
    ᶄ੒Ռ
    ࣍ੈ୅؅ཧը໘ˏୈҰ஄ϦϦʔε
    ࣍ੈ୅؅ཧը໘ˏୈҰ஄ϦϦʔε
    

    View Slide

21. © 2012-2019 BASE, Inc.
    ᶅ࣮ࡍʹ΍ͬͯΈͯͲ͏͔ͩͬͨ
    21
    

    View Slide

22. © 2012-2019 BASE, Inc.
    ᶅֶͼɿϥΠϒϥϦ࡞੒ͷਐΊํ
    22
    • খ͍͞ίϯϙʔωϯτ͔Βॱ൪ʹ࡞Γ׬੒౓ΛߴΊΔ
    • ྫɿbuttonɺinputɾɾɾ
    • storybook্Ͱಈ͍͍ͯΔΑ͏ʹΈ͑ͯ΋࣮ࡍʹ૊ΈࠐΉͱɺઈ
    ରʹͭ͗ͭ͗ͱ໰୊͕ग़ͯ͘Δ
    • ౔୆Λ͔ͬ͠ΓݻΊΔ
    • ுΓ੾ͬͯ͢΂ͯͷίϯϙʔωϯτΛ࠷ॳʹग़͠੾Ζ͏ͱ͠ͳ͍
    • ֆʹඳ͍ͨṷʹͳΓ͕ͪ
    • ࣮ࡍͷΞϓϦέʔγϣϯʹ૊ΈࠐΈͳ͕Β։ൃ͢Δ
    • ίϯϙʔωϯτͷ։ൃ͚ͩΛಠཱͨ͠ϝϯόʔɾϓϩδΣΫτͰ
    ਐΊͯ΋ίϛϡχέʔγϣϯίετ΍ख໭Γ͹͔Γ૿͑ͯ͏·͘
    ͍͔ͳ͍
    

    View Slide

23. © 2012-2019 BASE, Inc.
    ᶅֶͼɿখ͍͞ίϯϙʔωϯτ࡞ΓͳΒ؆୯ʁ
    23
    • খ͞ͳ෦඼Ͱ΋ਖ਼͘͠࡞Δʹ͸Ұఆͷ஌ࣝɾೳྗ͕ඞཁ
    • ඪ४ͷHTMLλάΛϥοϓ͢Δʹ͸HTMLͷ࢓༷Λ஌Βͳ͍ͱ͍͚ͳ͍
    ྫ͑͹ͦͷatomͳίϯϙʔωϯτɾɾɾ
    • ඪ४ͷHTMLͱಉ͡ײ֮Ͱ࢖͑ΔΠϯλʔϑΣΠεʹͳ͍ͬͯ·͔͢ʁ
    • ྫ) changeΠϕϯτ͔͠ൃՐ͠ͳ͍inputλά (inputΠϕϯτ͕དྷͳ͍)
    • ྫ) mouseenterͳͲ͕ൃՐ͠ͳ͍
    • ྫ) disabledଐੑΛ౉ͯ͠΋ແ൓Ԡ
    • ࢖͏ͱ͖ʹελΠϧͷඍௐ੔͸Ͱ͖·͔͢ʁ
    • ྫ) z-indexΛ಺෦Ͱઃఆ͍ͯ͠Δ
    • ྫ) margin͕ઃఆ͞Ε͍ۭͯͯനΛ௚ͤͳ͍
    • a11yରԠ͸ద੾ʹ͞Ε͍ͯ·͔͢ʁ
    

    View Slide

24. © 2012-2019 BASE, Inc.
    ᶅֶͼɿVueͱίϯϙʔωϯτઃܭ
    24
    • ίϯϙʔωϯτઃܭɾ࣮૷͸΍ΔͱΠϝʔδҎ্ʹ೉͍͠
    • Vue.js͸࠷ॳͷҰาΛ౿Έग़͠΍͍͢ϑϨʔϜϫʔΫ
    • ≠ ඞཁʹͳΔ஌ࣝɾٕྔ͕গͳ͍
    • ࣮૷͢ΔલʹɺVuetify΍Material-UIͳͲOSSͷϥΠϒϥϦͷ
    ιʔεΛݟͯงғؾΛ௫ΉͷΛΦεεϝ
    • ϝϯόʔͷशख़౓͕ߴ͘ͳ͍৔߹ʹ͸ɺ͓ͦΒ͍͖͘ͳΓίϯϙʔ
    ωϯτͱ͔Λߟ͑ͣʹɺ·ͣ͸Vue.jsͰҰ௨Γίʔυॻ͍ͯܦݧ
    ΛੵΉ΄͏͕ྑͦ͞͏
    

    View Slide

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ͷࣗಈϏϧυ
    

    View Slide

26. © 2012-2019 BASE, Inc.
    ᶅֶͼɿ·ͱΊ
    26
    • ίϯϙʔωϯτઃܭͯ͠ཁ݅Λ੔ཧ͢Δͱॳظίετ͸࣮֬ʹ্͕Δ
    • ࢓༷ܾఆͷίετ
    • ΤϯδχΞɾσβΠφʔؒͷίϛϡχέʔγϣϯίετ
    • ௕ظతʹ࢖͏ίϯϙʔωϯτΛผϥΠϒϥϦͱͯ͠੾Γग़͢ͷ͸༗ޮ
    • router΍storeͳͲ۩ମੑͷߴ͍ίϯςΩετ͕ೖͬͯ͜ͳ͍ͷͰ
    ίϯϙʔωϯτΛΫϦʔϯʹอͯΔ
    • ͍͖ͳΓίϯϙʔωϯτΛ࡞Ζ͏ͱͤͣɺ·ͣVue.jsʹ׳ΕΔ
    • webpack͕Τϥʔʹͳͬͯ΋ٽ͔ͳ͍
    • Jest͕Τϥʔʹͳͬͯ΋ٽ͔ͳ͍
    

    View Slide

27. © 2012-2019 BASE, Inc.
    ͓·͚ɿWe are hiring
    • ۂ໘΢ϧτϥϫΠυσΟεϓϨΠ͕ങ͑Δ
    ৬৔͸͍͍ͧ
    • ϑϩϯτΤϯυΤϯδχΞʹ͸ԣղ૾
    ౓͕ॏཁ
    •Chrome DevTools
    ͕ѹ౗తʹݟ΍͍͢
    27
    38WK95C-W
    

    View Slide

28. © 2012-2019 BASE, Inc.
    ͓·͚ɿςοΫϒϩάߋ৽ͯ͠·͢
    28
    https://devblog.thebase.in/
    ຊ೔ͷొஃʹؔ࿈ͷ͋Δهࣄ
    ɾ࣍ੈ୅ͷ؅ཧը໘Λ࡞ΔϑϩϯτΤϯυͷऔΓ૊Έ
    ɾʮSketchΛ༻͍ͨσβΠϯγεςϜʯΛ࡞ͬͯνʔϜͰͷσβΠϯ࡞ۀΛޮ཰Խͨ͠࿩
    ɾʮBASEʯͷ؅ཧը໘ϦχϡʔΞϧϓϩδΣΫτͷ͜Ε·Ͱͱ͜Ε͔Β
    

    View Slide

29. © 2012-2019 BASE, Inc.
    ͓·͚ɿΦ΢ϯυϝσΟΞߋ৽ͯ͠·͢
    29
    https://basebook.binc.jp/
    ϑϩϯτΤϯυνʔϜͷهࣄ
    ࣍ͷ5೥΋࢖͍ଓ͚ͯ΋Β͏ʮBASEʯͷͨΊʹɻ࣍ੈ୅؅ཧը໘Λ1͔Β࡞Δɺ
    ϑϩϯτΤϯυνʔϜͷ௅ઓ
    

    View Slide