個人でデジタル庁の デザインシステムをVue.jsで 作っている話

デジタル庁が公開しているデザインシステムをVue.jsで実装した話です。デザインシステムを作っていく中で感じた強力なv-modelやcomputedの魅力などをお伝えします。

Transcript

1. ݸਓͰσδλϧிͷ σβΠϯγεςϜΛ7VFKTͰ ࡞͍ͬͯΔ࿩ ʙ
   ͦͯ͠ɺվΊͯײͨ͡7VFKTͷັྗ
   ʙ 7VF
   'FT
   +BQBO
   
2. ੢ݪ
   ཌྷ גࣜձࣾ
   *$4 ϑϩϯτΤϯυΤϯδχΞ !DSBZpTIFS@[BSJ
3. *$4
   .&%*"ͰهࣄΛॻ͍͍ͯ·͢ ศརʁ ͦΕͱ΋ࠞཚʁ $44ͷJG ؔ਺ IUUQTJDTNFEJBFOUSZ IUUQTJDTNFEJBFOUSZ ΢Σϒͷ৽ػೳ͸͍ͭ·Ͱ଴ͯ͹ ࣮ફ౤ೖͰ͖Δ͔
4. σδλϧிσβΠϯγεςϜͱ͸ʁ
5. σδλϧிσβΠϯγεςϜͱ͸ʁ ओʹߦ੓ػؔ΍ެڞػؔͰར༻͞ΕΔ͜ͱΛ೦಄ʹߏங͞Ε͍ͯΔ σβΠϯγεςϜͰ͢ɻಛ௃ͱͯ͠͸ɺ ΞΫηγϏϦςΟͷ֬อΛ༏ઌͨ͠ ͭ͘Γʹͳ͍ͬͯΔ͜ͱɺ ߦ੓αʔϏεͷը໘Ͱར༻͠΍͍͢ϧʔϧΛ ͦΖ͍͑ͯΔ͜ͱͳͲ͕ڍ͛ΒΕ·͢ɻ ʢதུʣ σδλϧிσβΠϯγεςϜࣗମ͸޿͘ެ։͞Ε͍ͯΔ΋ͷͱͳΓ·͢ͷͰɺ ߦ੓ػؔ΍ެڞػؔͰ͋Δ͔Ͳ͏͔Λ໰Θͣɺ ͲͳͨͰ΋ແྉͰར༻͢Δ͜ͱ͕Ͱ͖·͢ɻ ग़యɿIUUQTEFTJHOEJHJUBMHPKQJOUSPEVDUJPOBCPVU
   ڧௐ͸Ҿ༻ऀ
6. σδλϧிσβΠϯγεςϜͱ͸ʁ ΞΫηγϒϧͰ͞·͟·ͳঢ়ଶͷίϯϙʔωϯτ͕༻ҙ͞Ε͍ͯΔ
7. σδλϧிσβΠϯγεςϜͱ͸ʁ ʢҰ෦ʣ ίϯϙʔωϯτʹ͍ͭͯ͸5BJMXJOE΍3FBDUͰͷίʔυ͕ ެ͔ࣜΒఏڙ͞Ε͍ͯΔ
8. σδλϧிσβΠϯγεςϜͱ͸ʁ Ͱ΋ɺ 7VFKT൛͸ͳ͍ʜ
9. σδλϧிσβΠϯγεςϜͱ͸ʁ ࣗ෼͕࡞͍ͬͯ·͢ IUUQTHJUIVCDPN$SBZpTIFS[BSJEJHJUBMBHFODZEFTJHOTZTUFN ͪͳΈʹ࣮૷ͷ044ͱͯ͠ͷެ։͸ࣗ෼ͷํ͕ૣ͍
10. σδλϧிσβΠϯγεςϜͱ͸ʁ ެ։͞Ε͍ͯΔ'JHNBͷσβΠϯΛ΋ͱʹ7VFKTͰ࣮૷
11. σδλϧிσβΠϯγεςϜͱ͸ʁ Ͱ͖Δ͚ͩγϯϓϧʹखܰʹ࢖͑ΔΑ͏ʹ͢Δͷ͕ίϯηϓτͰ͢
12. σδλϧிσβΠϯγεςϜͱ͸ʁ ఏڙ͞Ε͍ͯΔ΋ͷ͸͓͓Α࣮ͦ૷͍ͯ͠·͢ ਵ࣌௥Ճத
13. σδλϧிσβΠϯγεςϜͱ͸ʁ த௕ظͷӡ༻Λߟ͑ͯɺ࣮ߦ࣌ͷґଘ͸7VFKTͷΈͰ͢
14. σδλϧிσβΠϯγεςϜͱ͸ʁ ͪͳΈʹຊϓϩδΣΫτ͸ σδλϧிͱ͸Ұ੾ؔ܎͕͋Γ·ͤΜ σβΠϯɿ$$
    #:
     ίʔυεχϖοτɿ.*5ϥΠηϯε ͜ΕΒͷϥΠηϯεͷ΋ͱʹ։ൃ͍ͯ͠·͢
15. վΊͯײͨ͡7VFKTͷັྗ
16. WNPEFM
17. վΊͯײͨ͡7VFKTͷັྗ WNPEFM͸ೖྗͱঢ়ଶͷಉظʹ࢖͑Δ ஋ͷΈʹ஫໨͢Ε͹Α͘ɺ Πϕϯτॲཧʹؾʹ͔͚ͳͯ͘Α͍ ˣ͜͏ॻ͚Δ <input :value="text" @change="handleChange" /> <input v-model="text" />
18. վΊͯײͨ͡7VFKTͷັྗ ίϯϙʔωϯτؒͷ஋Λ͔ΜͨΜʹ࿈ܞͰ͖Δ ίϯϙʔωϯτʹ΋WNPEFM͕࢖͑Δ const labels = ["બ୒ࢶ1", "બ୒ࢶ2", "બ୒ࢶ3"]; const checked = ref([]); <CheckboxGroup v-model="checked" :labels="labels" />
19. DPNQVUFE
20. const TAX_RATE = 1.1; const price = ref(100); const taxIncluded = computed(() => price.value * TAX_RATE); <p>੫ࠐΈɿ{{ taxIncluded }}</p> վΊͯײͨ͡7VFKTͷັྗ DPNQVUFE͸ґଘͷ஋͕ෆมͳݶΓΩϟογϡΛฦ͢ͷͰ ϋΠύϑΥʔϚϯε ࢉग़Ͱ͖Δ஋͸DPNQVUFEͰ࠷దԽͰ͖Δ
21. վΊͯײͨ͡7VFKTͷັྗ جຊతʹ໎Θͣ࢖͑͹0,ɻ ڭՊॻͲ͓Γʹ͢Ε͹࠷దԽ͞ΕΔ
22. TMPU
23. վΊͯײͨ͡7VFKTͷັྗ ΞΠίϯͷ؅ཧ͸ϘλϯίϯϙʔωϯτͰߦ͍ͨ͘ͳ͍ ίϯϙʔωϯτͷத਎ͷ੹೚Λ෼཭͍ͨ͠
24. <button> <span class="frontIcon"> <slot name="frontIcon" /> </span> <slot name="label" /> <span class="backIcon"> <slot name="backIcon" /> </span> </button> <MyButton> <template #frontIcon> <Icon /> </template> <template #label> ϥϕϧ </template> </MyButton> վΊͯײͨ͡7VFKTͷັྗ ˝.Z#VUUPOWVFίϯϙʔωϯτ ˝ݺͼग़͢ଆ TMPUΛ࢖ͬͯϨΠΞ΢τ·Ͱ͸੹೚Λ࣋ͭ ίϯϙʔωϯτͷංେԽΛ๷͗ɺ ίϯϙʔωϯτͷ൚༻ੑΛߴΊΔ
25. σδλϧிσβΠϯγεςϜΛ ࣮૷ͯ͠ಘΒΕͨ΋ͷ
26. σδλϧிσβΠϯγεςϜΛ࣮૷ͯ͠ಘΒΕͨ΋ͷ ΞΫηγϒϧͳίϯϙʔωϯτͷ࡞Γํ΁ͷ஌ݟ ։ൃऀମݧΛҙࣝͨ͠ίϯϙʔωϯτཻ౓ɺ ੹຿ͷ෼͚ํ 7VF͸ύϫϑϧʂσβΠϯγεςϜͮ͘Γʹ΋ྑ͍ʂ
27. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ גࣜձࣾ*$4Ͱ͸ϑϩϯτΤϯυΤϯδχΞΛืूதʂ IUUQTJDTXFCKQSFDSVJU