Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
個人でデジタル庁の デザインシステムをVue.jsで 作っている話
Search
にしはら
October 25, 2025
Technology
1
270
個人でデジタル庁の デザインシステムをVue.jsで 作っている話
デジタル庁が公開しているデザインシステムをVue.jsで実装した話です。デザインシステムを作っていく中で感じた強力なv-modelやcomputedの魅力などをお伝えします。
にしはら
October 25, 2025
Tweet
Share
More Decks by にしはら
See All by にしはら
速くて安いWebサイトを作る
nishiharatsubasa
17
16k
スーパーマリオRPGのリメイク版の変更点からみるUX
nishiharatsubasa
1
740
defineModelを使って気軽にコンポーネントのv-modelをやろう
nishiharatsubasa
3
1.4k
2023 CSS
nishiharatsubasa
7
4.7k
vue_component_from_composable
nishiharatsubasa
2
650
エルデンリングに学ぶ道に迷わないUIと世界観
nishiharatsubasa
0
1.4k
HTMLとCSSだけでつくるリアルな絵 / How to make a realistic picture only HTML and CSS
nishiharatsubasa
2
7.1k
Other Decks in Technology
See All in Technology
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
[OCI Skill Mapping] AWSユーザーのためのOCI – IaaS編(Compute/Storage/Networking) (2025年10月8日開催)
oracle4engineer
PRO
1
170
Node.js 2025: What's new and what's next
ruyadorno
0
960
HonoとJSXを使って管理画面をサクッと型安全に作ろう
diggymo
0
160
混合雲環境整合異質工作流程工具運行關鍵業務 Job 的經驗分享
yaosiang
0
140
OAuthからOIDCへ ― 認可の仕組みが認証に拡張されるまで
yamatai1212
0
160
「魔法少女まどか☆マギカ Magia Exedra」におけるバックエンドの技術選定
gree_tech
PRO
0
100
「REALITY」3Dアバターシステムの7年分の拡張の歴史について
gree_tech
PRO
0
120
Copilot Studio ハンズオン - 生成オーケストレーションモード
tomoyasasakimskk
0
190
Findy Team+ QAチーム これからのチャレンジ!
findy_eventslides
0
500
Microsoft 365 の認証と承認を理解する / Understanding Microsoft 365 Authentication and Authorization
karamem0
0
110
「改善」ってこれでいいんだっけ?
ukigmo_hiro
0
400
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Side Projects
sachag
455
43k
Mobile First: as difficult as doing things right
swwweet
225
10k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Designing for Performance
lara
610
69k
Transcript
ݸਓͰσδλϧிͷ σβΠϯγεςϜΛ7VFKTͰ ࡞͍ͬͯΔ ʙͦͯ͠ɺվΊͯײͨ͡7VFKTͷັྗʙ 7VF'FT+BQBO
ݪཌྷ גࣜձࣾ*$4 ϑϩϯτΤϯυΤϯδχΞ !DSBZpTIFS@[BSJ
*$4.&%*"ͰهࣄΛॻ͍͍ͯ·͢ ศརʁ ͦΕͱࠞཚʁ $44ͷJG ؔ IUUQTJDTNFEJBFOUSZ IUUQTJDTNFEJBFOUSZ Σϒͷ৽ػೳ͍ͭ·Ͱͯ ࣮ફೖͰ͖Δ͔
σδλϧிσβΠϯγεςϜͱʁ
σδλϧிσβΠϯγεςϜͱʁ ओʹߦػؔެڞػؔͰར༻͞ΕΔ͜ͱΛ೦಄ʹߏங͞Ε͍ͯΔ σβΠϯγεςϜͰ͢ɻಛͱͯ͠ɺ ΞΫηγϏϦςΟͷ֬อΛ༏ઌͨ͠ ͭ͘Γʹͳ͍ͬͯΔ͜ͱɺ ߦαʔϏεͷը໘Ͱར༻͍͢͠ϧʔϧΛ ͦΖ͍͑ͯΔ͜ͱͳͲ͕ڍ͛ΒΕ·͢ɻ ʢதུʣ σδλϧிσβΠϯγεςϜࣗମ͘ެ։͞Ε͍ͯΔͷͱͳΓ·͢ͷͰɺ ߦػؔެڞػؔͰ͋Δ͔Ͳ͏͔ΛΘͣɺ
ͲͳͨͰແྉͰར༻͢Δ͜ͱ͕Ͱ͖·͢ɻ ग़యɿIUUQTEFTJHOEJHJUBMHPKQJOUSPEVDUJPOBCPVU ڧௐҾ༻ऀ
σδλϧிσβΠϯγεςϜͱʁ ΞΫηγϒϧͰ͞·͟·ͳঢ়ଶͷίϯϙʔωϯτ͕༻ҙ͞Ε͍ͯΔ
σδλϧிσβΠϯγεςϜͱʁ ʢҰ෦ʣ ίϯϙʔωϯτʹ͍ͭͯ5BJMXJOE3FBDUͰͷίʔυ͕ ެ͔ࣜΒఏڙ͞Ε͍ͯΔ
σδλϧிσβΠϯγεςϜͱʁ Ͱɺ 7VFKT൛ͳ͍ʜ
σδλϧிσβΠϯγεςϜͱʁ ͕ࣗ࡞͍ͬͯ·͢ IUUQTHJUIVCDPN$SBZpTIFS[BSJEJHJUBMBHFODZEFTJHOTZTUFN ͪͳΈʹ࣮ͷ044ͱͯ͠ͷެ։ࣗͷํ͕ૣ͍
σδλϧிσβΠϯγεςϜͱʁ ެ։͞Ε͍ͯΔ'JHNBͷσβΠϯΛͱʹ7VFKTͰ࣮
σδλϧிσβΠϯγεςϜͱʁ Ͱ͖Δ͚ͩγϯϓϧʹखܰʹ͑ΔΑ͏ʹ͢Δͷ͕ίϯηϓτͰ͢
σδλϧிσβΠϯγεςϜͱʁ ఏڙ͞Ε͍ͯΔͷ͓͓Α࣮͍ͦͯ͠·͢ ਵ࣌Ճத
σδλϧிσβΠϯγεςϜͱʁ தظͷӡ༻Λߟ͑ͯɺ࣮ߦ࣌ͷґଘ7VFKTͷΈͰ͢
σδλϧிσβΠϯγεςϜͱʁ ͪͳΈʹຊϓϩδΣΫτ σδλϧிͱҰ͕ؔ͋Γ·ͤΜ σβΠϯɿ$$#: ίʔυεχϖοτɿ.*5ϥΠηϯε ͜ΕΒͷϥΠηϯεͷͱʹ։ൃ͍ͯ͠·͢
վΊͯײͨ͡7VFKTͷັྗ
WNPEFM
վΊͯײͨ͡7VFKTͷັྗ WNPEFMೖྗͱঢ়ଶͷಉظʹ͑Δ ͷΈʹ͢ΕΑ͘ɺ Πϕϯτॲཧʹؾʹ͔͚ͳͯ͘Α͍ ˣ͜͏ॻ͚Δ <input :value="text" @change="handleChange" /> <input
v-model="text" />
վΊͯײͨ͡7VFKTͷັྗ ίϯϙʔωϯτؒͷΛ͔ΜͨΜʹ࿈ܞͰ͖Δ ίϯϙʔωϯτʹWNPEFM͕͑Δ const labels = ["બࢶ1", "બࢶ2", "બࢶ3"]; const
checked = ref([]); <CheckboxGroup v-model="checked" :labels="labels" />
DPNQVUFE
const TAX_RATE = 1.1; const price = ref(100); const taxIncluded
= computed(() => price.value * TAX_RATE); <p>੫ࠐΈɿ{{ taxIncluded }}</p> վΊͯײͨ͡7VFKTͷັྗ DPNQVUFEґଘͷ͕ෆมͳݶΓΩϟογϡΛฦ͢ͷͰ ϋΠύϑΥʔϚϯε ࢉग़Ͱ͖ΔDPNQVUFEͰ࠷దԽͰ͖Δ
վΊͯײͨ͡7VFKTͷັྗ جຊతʹ໎Θͣ͑0,ɻ ڭՊॻͲ͓Γʹ͢Ε࠷దԽ͞ΕΔ
TMPU
վΊͯײͨ͡7VFKTͷັྗ ΞΠίϯͷཧϘλϯίϯϙʔωϯτͰߦ͍ͨ͘ͳ͍ ίϯϙʔωϯτͷதͷΛ͍ͨ͠
<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ΛͬͯϨΠΞτ·ͰΛ࣋ͭ ίϯϙʔωϯτͷංେԽΛ͗ɺ ίϯϙʔωϯτͷ൚༻ੑΛߴΊΔ
σδλϧிσβΠϯγεςϜΛ ࣮ͯ͠ಘΒΕͨͷ
σδλϧிσβΠϯγεςϜΛ࣮ͯ͠ಘΒΕͨͷ ΞΫηγϒϧͳίϯϙʔωϯτͷ࡞Γํͷݟ ։ൃऀମݧΛҙࣝͨ͠ίϯϙʔωϯτཻɺ ͷ͚ํ 7VFύϫϑϧʂσβΠϯγεςϜͮ͘Γʹྑ͍ʂ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ גࣜձࣾ*$4ͰϑϩϯτΤϯυΤϯδχΞΛืूதʂ IUUQTJDTXFCKQSFDSVJU