実務における 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