実務における Vue.js と Atomic Design

Transcript

1. ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic Design May 27, 2020 ࣮຿ʹ͓͚Δ Vue.js

   ͱ Atomic Design

2. ࣗݾ঺հ ໊લ ্ݪ ಙਓ ॴଐ Crevo גࣜձࣾ ໾৬ ϦʔυΤϯδχΞ ܦྺ

   ԭೄͰ໿ 7 ೥൒ɺ౦ژͰ͸ Crevo Ͱ໿ 3 ೥൒։ൃऀͱͯ͠׆ ಈத ޷͖ͳΤσΟλ Emacs ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic Design

3. Crevo ͱ͸ ʮಈը৽࣌୅ͷΫϦΤΠλʔܦࡁݍΛͭ͘Δɻ ʯͱ͍͏ϛογϣϯ Λܝ͛ͯ׆ಈ͍ͯ͠ΔελʔτΞοϓاۀͰ͢ɻ Crevo https://corp.crevo.jp ࣮຿ʹ͓͚Δ Vue.js ͱ

   Atomic Design

4. Crevo ͷ֤छαʔϏε Crevo Pro ༧ࢉ΍༻్ʹ߹Θͤͨ࠷దͳಈըΛاըʙ੍࡞·ͰҰ؏͢Δಈը ੍࡞αʔϏεಈը੍࡞αʔϏε https://crevo.jp ࣮຿ʹ͓͚Δ Vue.js ͱ

   Atomic Design

5. Crevo ͷ֤छαʔϏε Crevo Jobs ࠃ಺֎ 7,000 ໊Λӽ͑ΔϓϩಈըΫϦΤΠλʔͱͷϚονϯά αʔϏε https://jobs.crevo.jp ࣮຿ʹ͓͚Δ

   Vue.js ͱ Atomic Design

6. Crevo ͷ֤छαʔϏε Crevo Base ΫϦΤΠςΟϒ੍࡞ʹಛԽ੍ͨ͠࡞؅ཧπʔϧ https://base.crevo.jp ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic

   Design

7. ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic Design Crevo ͷγεςϜʹ Vue.js ͱ Atomic

   Design Λಋೖͯ͠ಘΒΕͨ ஌ݟΛڞ༗͠·͢ ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic Design

8. ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic Design લఏ 2014 ೥͔Β։ൃ͞Εଓ͚ͯΔͦΕͳΓͷྺ࢙͕͋Δ Web Ξ

   ϓϦέʔγϣϯ جຊతʹαʔόαΠυΤϯδχΞ͕ϝϯς͖ͯͨ͠ ͦͷͨΊ jQuery ͕׆༂ͯͨ͠Γ CSS पΓ͕ࠞಱͷۃΈͩͬ ͨΓ͢Δ Ember.js ΋ೖͬͯΔ͚ͲॏྔڃͰѻ͍ͮΒͯͭ͘Β͍ ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic Design

9. ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic Design ͦ͏͍͏ͱ͜ΖͰ΋ Vue.js Λಋೖ͢Δͱ Developer Experience

   ͕ ޲্͠·͢! ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic Design

10. ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic Design Vue.js ͱ Atomic Design ͷ؆୯ͳઆ໌

    Vue.js ͸ίϯϙʔωϯτࢦ޲ͷ JS ϑϨʔϜϫʔΫ Atomic Design ͸ը໘ͷߏ੒ཁૉΛ 5 ֊૚ʹ෼͚ɺ࠷ऴతͳ UI ͱ UI ͷجૅͱͳΔσβΠϯγεςϜΛಉ࣌ʹ࡞੒͢Δઃ ܭํ๏ Vue.js ͷίϯϙʔωϯτࢦ޲ͱ Atomic Design ͷઃܭࢥ૝͸ ૬ੑ͕ྑ͍ Atomic Design ͷߏ੒ཁૉͱίϯϙʔωϯτΛ 1 ର 1 ରԠ͞ ͤΒΕΔ ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic Design

11. ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic Design ಋೖͯ͠࠷ऴతʹͲ͏ͳ͔ͬͨ Atomic Design Λڞ௨ݴޠͱͯ͠ઃܭͷٞ࿦͕Ͱ͖ΔΑ͏ʹ ͳͬͨ

    CSS ΋ઃܭ΋Ұ৽͞Εͯ࠶ར༻ੑ͕૿ͨ͠ BEM ΋࠾༻ͨ͠ͷͰطଘͷը໘΁ͷ࢖͍ճ͠΋༰қ ݹ͍ΞϓϦ͸ݹ͍ը໘͕෇͖෺ʜʜ Storybook ͰίϯϙʔωϯτΛΧλϩάԽͨ͠ͷͰͦ͜Ͱڍ ಈ֬ೝ΋Ͱ͖ͯศར ͞Βʹ CircleCI ͰӾཡՄೳʹ͍ͯ͠Δͱ֤ϒϥϯνͷ࠷৽ί ϯϙʔωϯτ͕͍ͭͰ΋ݟΕΔΑ͏ʹͨ͠ ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic Design

12. ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic Design CSS ه๏ͱͯ͠ BEM Λઌʹಋೖͨ͠ BEM

    ಋೖલͷ CSS Scoped CSS ͔ͩΒͱ .title, .description Έ͍ͨͳΫϥ εΛྔ࢈͍ͯ͠Δͱ Slot Λ࢖ͬͨ࣌ʹόοςΟϯάͯͭ͠Β ͍͜ͱʹͳΓ͕ͪ ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic Design

13. ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic Design όοςΟϯάྫ ਌ίϯϙʔωϯτ <template lang='pug'> div

    .title hoge child .title fuga </template> <style lang='scss' scoped> .title { font-size: 2em; } </style> ࢠίϯϙʔωϯτ <template lang='pug'> div // ͕͜͜ҙਤͤͣ 2em ʹ .title foo .content slot </template> <style lang='scss' scoped> .title { color: #00f; } </style> ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic Design

14. ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic Design BEM ಋೖޙͷ CSS BEM Ͱॻ͍ͯΕ͹

    slot Λ࢖ͬͯΔ৔߹౳ʹ΋όοςΟϯά ͕ى͖ʹ͍͘ ͜ͷ࣌ Block ͸ίϯϙʔωϯτ໊ʹ͢Δͷ͕ϙΠϯτ ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic Design

15. ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic Design ਌ίϯϙʔωϯτ <template lang='pug'> .o-parent .o-parent__title

    hoge child .o-child-title fuga </template> <style lang='scss' scoped> .o-parent-title { font-size: 2em; } </style> ࢠίϯϙʔωϯτ <template lang='pug'> .o-child // Өڹड͚ͳ͍ .o-child__title foo .o-child__content slot </template> <style lang='scss' scoped> .o-child-title { color: #00f; } </style> ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic Design

16. ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic Design ίϯϙʔωϯτͷઃܭ Atomic Design ಋೖલ ໌֬ͳࢦ਑͕ͳͯ͘ɺ࠶ར༻ੑͷͳ͍ίϯϙʔωϯτ͕࡞ΒΕ͕

    ͪͩͬͨ A ʮίϯϙʔωϯτͰ͖·ͨ͠! ʯ B ( Θ͋ɺશ෦ೖΓͰ࠶ར༻Ͱ͖ͳ͍ʙ) B ʮ͜ͷ··ͩͱ࠶ར༻ੑ͕௿͍͔Β෼ׂ͍ͯ͜͠͏͔ʯ A ʮͲ͏෼ׂ͠·͔͢? ʯ B ( ຖ౓෼ׂͷ૬ஊʹͳΔͳ͋ʜʜ) ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic Design

17. ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic Design Atomic Design ಋೖޙ Atomic Design

    Λࢦ਑ʹ͢Δͱڞ௨ͷݴ༿Ͱઃܭͷ࿩͕Ͱ͖ΔΑ ͏ʹͳͬͨ A ʮMolecule ίϯϙʔωϯτͰ͖·ͨ͠! ͜͜͸طଘͷ Atom Λ࢖͍·ͨ͠ʯ B ʮ͓ɺ͍͍Ͷ! ͜͜͸ Organism ʹ෼ׂ͍ͯ͠ΔͶɻ΋͔͠ ͯ͠ Molecule Ͱ΋͍͍ͷͰ͸ʯ A ʮ୯ମͰཱ͍ࣗͯ͠ΔͷͰ Organism ͕ద੾͔ͱ! ʯ B ʮͳΔ΄Ͳʙʯ ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic Design

18. ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic Design CSS ͷϝϯςφϯεੑ Atomic Design ಋೖલͷ

    CSS ࡶʹ HTML, CSS Λॻ͍ͯΔͱ BEM Λ࢖ͬͯ΋ B__E__E__E_M Έ͍ͨͳ͜ͱʹͳΓ͕ͪ Α͋͘ΔΞϯνύλʔϯ 3 ֊૚Ҏ্ਂ͘ͳΔͱϝϯςφϯε͸ͱͯ΋ͭΒ͍ ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic Design

19. ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic Design ྫ (Pug) .form label.form__row input.form__row__input.form__row__input--disabled

    ྫ (SASS) .form &__row &__input &--disabled ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic Design

20. ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic Design Atomic Design ಋೖޙͷ CSS Atomic

    Design ϕʔεͰίϯϙʔωϯτ෼ׂ͢Ε͹֊૚Խ͞Εͨ ֤ίϯϙʔωϯτͰ CSS ͕ॻ͔ΕΔͷͰ BEM ͷ֊૚΋ਂ͘ͳΓ ʹ͍͘ ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic Design

21. ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic Design ྫ (Pug) .o-form label.m-form-row input.a-input.a-input--disabled

    ྫ (SASS) .o-form .m-form-row .a-input &--disabled ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic Design

22. ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic Design طଘͷը໘΁ͷ CSS ͷ࢖͍ճ͠ ଉͷ௕͍γεςϜͰ͸ Vue

    Λಋೖͯͯ͠΋ੲͷը໘͸ Vue Ͱ͸ͳ͍͜ͱ͕ଟʑ͋Δ ίϯϙʔωϯτͷ CSS Λͦ͏͍͏ը໘ʹ΋ద༻ͨ͘͠ͳΔ ˠ ͜ͷ৔߹΋ BEM Ͱॻ͍ͯΕ͹طଘͷ CSS ͱͷόοςΟ ϯά͕ى͖ʹ͍͘ ͜͜͸ྫΛग़͠ʹ͍͘ͷͰׂѪʜʜ ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic Design

23. ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic Design CircleCI Ͱ storybook Λ build

    ͢Δͱศར खݩͷϚγϯͰ storybook Λಈ͔ͯ͠΋σβΠφʔʹ͸ݟ͑ ͳ͍ ֤ϒϥϯνͰίϯϙʔωϯτΛ૿΍ͨ͠ࡍʹ΋֬ೝͯ͠΋Β ͍͍ͨ ˠ CircleCI ͰͦΕΛ୭Ͱ΋ݟΕΔͱ֬ೝ࡞ۀ͕ḿΔ ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic Design

24. ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic Design CircleCI ͷઃఆྫ build_storybook: executor: ruby

    steps: - restore_workspace: reload: false - run: command: | yarn run build-storybook -c .storybook \ -o /tmp/storybook-static - store_artifacts: path: /tmp/storybook-static destination: storybook ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic Design

25. ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic Design Cirlce CI ͷ Artifacts ࣮຿ʹ͓͚Δ

    Vue.js ͱ Atomic Design

26. ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic Design ࣮ࡍͷը໘ ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic

    Design

27. ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic Design Vue.js ͱ Atomic Design ౳Λಋೖͨ݁͠Ռ

    Atomic Design Λڞ௨ݴޠͱͯ͠ઃܭͷٞ࿦͕Ͱ͖ΔΑ͏ʹ ͳͬͨ CSS ΋ઃܭ΋Ұ৽͞Εͯ࠶ར༻ੑ͕૿ͨ͠ BEM ΋ಉ࣌࠾༻ͨ͠ͷͰطଘͷը໘΁ͷ࢖͍ճ͠΋༰қ ݹ͍ΞϓϦ͸ݹ͍ը໘͕෇͖෺ʜʜ Storybook ͰίϯϙʔωϯτΛΧλϩάԽͨ͠ͷͰͦ͜Ͱڍ ಈ֬ೝ΋Ͱ͖ͯศར ͞Βʹ CircleCI ͰӾཡՄೳʹ͍ͯ͠Δͱ֤ϒϥϯνͷ࠷৽ί ϯϙʔωϯτ͕͍ͭͰ΋ݟΕΔΑ͏ʹͨ͠ ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic Design

28. ࠷ޙʹ ಈըࢢ৔ͷࣗࣾ SaaS αʔϏε։ൃΛ͍ͨ͠ΤϯδχΞΛืूத Ͱ͢! https://corp.crevo.jp/recruit/engineer ࣮຿ʹ͓͚Δ Vue.js ͱ Atomic

    Design