$30 off During Our Annual Pro Sale. View Details »

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

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

simezi9

March 21, 2019
Tweet

More Decks by simezi9

Other Decks in Programming

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