Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
5 Points Of Customizing Vuetify
arm4
December 17, 2019
Technology
4
820
5 Points Of Customizing Vuetify
arm4
December 17, 2019
Tweet
Share
More Decks by arm4
See All by arm4
Google Data Studio 101
fromarm4
0
63
about abstract component design using slots of Vue.js
fromarm4
4
920
laravel_lt_party_with_mokumoku_3
fromarm4
0
200
Make it happen in realtime with Laravel Echo and Pusher
fromarm4
0
720
Trying to write a code with Laravel+Vue+TypeScript
fromarm4
0
260
Create a Laravel notification via Slack when batch jobs are finished
fromarm4
0
380
solving frontend issues
fromarm4
1
1.1k
Popular Vue.js UI Frameworks in 2019
fromarm4
2
690
SKDs対象のWeb API設計概論〜Laravelを添えて〜
fromarm4
0
760
Other Decks in Technology
See All in Technology
データ分析基盤のはじめかた
chanyou0311
0
120
eBPF for Security Observability
lizrice
0
190
Oracle Cloud Infrastructure:2022年6月度サービス・アップデート
oracle4engineer
PRO
0
150
サイボウズの アジャイル・クオリティ / Agile Quality at Cybozu
cybozuinsideout
PRO
4
2.3k
HoloLens2とMetaQuest2どちらも動くWebXRアプリをBabylon.jsで作る
iwaken71
0
200
oakのミドルウェアを書くときの技のらしきもの
toranoana
0
130
Build 2022で発表されたWindowsアプリ開発のあれこれ振り返ろう
hatsunea
1
380
モブに早く慣れたい人のためのガイド / A Guide to Getting Started Quickly with Mob Programming
cybozuinsideout
PRO
2
1.8k
さいきんのRaspberry Pi。 / osc22do-rpi
akkiesoft
6
5.2k
Custom AppをIP制限ありのままで審査に通す方法
yusuga
0
680
Citizen 개발기
outsider
0
280
紙にまつわる苦しみを機能化してきた カミナシの歴史
kaminashi
0
1.3k
Featured
See All Featured
5 minutes of I Can Smell Your CMS
philhawksworth
196
18k
The Web Native Designer (August 2011)
paulrobertlloyd
74
1.9k
It's Worth the Effort
3n
172
25k
Scaling GitHub
holman
451
140k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
151
13k
Rebuilding a faster, lazier Slack
samanthasiow
62
7.2k
Practical Orchestrator
shlominoach
178
8.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
Web development in the modern age
philhawksworth
197
9.3k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
What the flash - Photography Introduction
edds
62
10k
4 Signs Your Business is Dying
shpigford
169
20k
Transcript
7VFUJGZΛపఈతʹΧελϚΠζ͠ ࣗࡏͳ6*Λ࡞Γ্͛Δ ͭͷϙΠϯτ 2019.12.17 Yoko Hato @plumsa
ࣗݾհ גࣜձࣾϓϥϜβ 13*.&03%&3ࣄۀ෦ $50ࣄۀاըϦʔμʔ ോ༸ࢠ ௨শɿϥϥɾϕϧࢠ ໊͋ͩɿ՝ղܾ͓࢞͞Μ ৗܥެࣜ5XJUUFSΛ͍ͬͯ·͢ɻ ՋͭͿ͍ͨ࣌͠ʹϑΥϩʔ͍ͯͩ͘͠͞ɻ ΑΖ͓͘͠ئ͍͠·͢ɻ
@plumsa
13*.&03%&3ͷએ 13*.&03%&3 ৽͍͠Χλνͷडୗ։ൃαʔϏε IUUQTQSJNFPSEFSKQ ࢲ͕ͨͪಘҙͱ͢ΔγεςϜɺ Ϗδωε՝ʹ໘͍ͯ͠Δ͓٬༷ͷղܾࡦͱͳΔ શΦʔμʔϝΠυͷۀγεςϜͰ͢ɻ
ษڧձͷએ 13*.&03%&3Ͱ ִिͰٕज़ษڧձΛ։ ࠵͍ͯ͠·͢ɻ ςʔϚ͋Γͷ ࢀՃऀશһͰखΛಈ͔ ͠ͳ͕Βਐߦ͢ΔϞϒ ϓϩͷΑ͏ͳײ͡Ͱ ͢ɻ ΓΘ͔ͣʂ
ઌண໊༷ʂʂ ͷ֬Ͱλίύʂ 13*.&5&$)5"-,Ͱݕࡧ IUUQTQMVNTBDPOOQBTTDPNFWFOU
7VFUJGZΛపఈతʹΧελϚΠζ͢Δ ͭͷϙΠϯτ ίϯϙʔωϯτͷϓϩύςΟͷ༷Λ શʹཧղ͢Δ είʔϓ͖εϩοτ 4DPQFE4MPU Λ શʹཧղ͢Δ
ίϯϙʔωϯτͷΧελϜΠϕϯτΛ શʹཧղ͢Δ TZODम০ࢠͱVQEBUFΛશʹཧղ͢Δ WNPEFMΛશʹཧղ͢Δ
Point. 1 ίϯϙʔωϯτͷϓϩύςΟ ͷ༷Λશʹཧղ͢Δ
ίϯϙʔωϯτͷϓϩύςΟ QSPQT ʹܕͱσϑΥϧτ͕ઃఆͰ͖Δ w ࢦఆ͞ΕͨܕͰͳ͍ΛϓϩύςΟͰ͢ͱΤϥʔʹͳΔɻ EJTBCMFElจࣈͩΑzCPPMFBOʹจࣈྻΛ͍ͯ͠ΔͷͰΤϥʔ w WCJOEͰ͞ͳ͍߹ɺશͯจࣈྻͱͯ͠͞ΕΔɻ EJTBCMFElGBMTFzlGBMTFzͱ͍͏ͨͩͷจࣈྻͷͨΊUSVFͱఆ͞ΕΔ্ʹΤϥʔ w
ϓϩύςΟͷܕ͕CPPMFBOͷ߹ɺͳ͠Ͱهड़͢ΔͱUSVFͱͳ ΔɻEJTBCMFEEJTBCMFElUSVFz͜͏ॻ͘ͷͱಉ͡ w σϑΥϧτ͕͋ΓϓϩύςΟ͕͞Εͳ͍߹ɺ σϑΥϧτͰίϯϙʔωϯτઃఆ͞ΕΔɻ υΩϡϝϯτʹهࡌ͞Ε͍ͯΔσϑΥϧτʹͳΔ w มͰσʔλΛ͢Α͏ͳಈతͳΛ͢ࡍɺ ඞͣWCJOEΛ༻͢Δɻ EJTBCMFElJT)PHFzWCJOE͠ͳ͍ͱzJT)PHFzͱ͍͏ͨͩͷจࣈྻʹͳΔ ҎԼͷ༷جຊతʹॏཁʂ
7VFUJGZυΩϡϝϯτ ϓϩύςΟνΣοΫϙΠϯτ
ίϯϙʔωϯτͷϧʔτཁૉʹ ༻࣌ʹଐੑ DMBTT TUZMFͳͲ ͕ઃఆͰ͖Δ w ίϯϙʔωϯτͷϓϩύςΟͱͯ͠ఆٛ͞Ε͍ͯͳ͍ଐੑΛهड़ͨ͠ ߹ɺϧʔτཁૉͷଐੑͱͯ͠Ճ͞ΕΔɻ ྫʣϧʔτཁૉ͕EJWͰυΩϡϝϯτʹهࡌͷͳ͍UBCJOEFYΛՃ͢Δ w
͠ϧʔτཁૉʹಉ͡ଐੑ͕ఆٛ͞Ε͍ͯΔ߹ɺίϯϙʔωϯτ༻࣌ ʹఆٛͨ͠ͷͰ্ॻ͖͞Εͯ͠·͏ɻ ྫʣWCUOͷUZQFlCVUUPOzUZQFlTVCNJUzʹͰ͖Δ w DMBTTͱTUZMFಛผͰɺίϯϙʔωϯτ༻࣌ʹఆ͕ٛͨ͠ϧʔτཁૉ ͷͱϚʔδ͞ΕΔɻ ίϯϙʔωϯτར༻࣌ʹDMBTTTUZMFΛϧʔτͷEJWͳͲʹͯΔ͜ͱ͕Ͱ͖Δɻ w WDPNCPCPYͷΑ͏ͳJOQVUܥίϯϙʔωϯτͰɺଐੑ͕Ճ͞ΕΔͷ ϧʔτཁૉͰͳ͘JOQVUཁૉͰ͋Δ߹͕͋Δɻৄ͘͠BUUSTͱ JOIFSJU"UUSTͰݕࡧɻWDPNCPCPYίϯϙʔωϯτʹDMBTTΛॻ͘ͱJOQVUཁૉʹ༩͞ΕΔɻ ҎԼͷ༷ͷཧղΧελϚΠζ࣌ʹॏཁʂ
Point. 2 είʔϓ͖εϩοτ 4DPQFE4MPU Λ શʹཧղ͢Δ
εϩοτΛ͏ͱ ίϯϙʔωϯτͷதͷίϯςϯπΛ ༻࣌ʹ͖ͳͷʹஔ͖͑Δ͜ͱ͕Ͱ͖Δ ΧελϚΠζʹεϩοτ͕ॏཁʂ εϩοτͷ༷ͷதͰ ίϯϙʔωϯτͷதͷσʔλΛ ར༻࣌ʢεϩοτίϯςϯπʣʹड͚ͤΔ είʔϓ͖εϩοτ 4DPQFE4MPU
༷Λཧղ͍ͯ͠ͳ͍ͱ্ख͍͘͜ͳͤͳ͍ɻ υΩϡϝϯτͷݟຊίʔυͰ &4ͷΦϒδΣΫτͷׂೖ͕ଟ༻͞Ε͍ͯΔͷͰ &4ͷ༷͔ͬ͠Γ಄ʹೖΕ͓ͯ͘͜ͱ͕ॏཁɻ IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC+BWB4DSJQU3FGFSFODF0QFSBUPST %FTUSVDUVSJOH@BTTJHONFOU0CKFDU@EFTUSVDUVSJOH
7VFUJGZυΩϡϝϯτ εϩοτνΣοΫϙΠϯτ
ɹεϩοτΛશʹཧղ͢ΔͨΊͷ ͓͢͢ΊεϥΠυհ IUUQTTQFBLFSEFDLDPNGSPNBSNBCPVUBCTUSBDUDPNQPOFOU EFTJHOVTJOHTMPUTPGWVFEPUKT
Point. 3 ίϯϙʔωϯτͷ ΧελϜΠϕϯτΛ શʹཧղ͢Δ
ίϯϙʔωϯτͰ@inputͷΑ͏ʹॻ͘ͷɺ IUNMཁૉͰϦοεϯͰ͖ΔΑ͏ͳ ωΠςΟϒͷΠϕϯτͰͳ͘ΧελϜΠϕϯτ FNJU bJOQVU` ͱͯ͠ίϯϙʔωϯτ࡞ऀ͕ΠϕϯτΛൃՐ ͖ͤ͞ͳΛૹ͍ͬͯΔ͚ͩɻ ΧελϜΠϕϯτͱωΠςΟϒΠϕϯτผ FUBSHFUWBMVFͷΑ͏ʹॻ͍ͯऔಘͰ͖ͳ͍ɻ FUBSHFUWBMVFͷΑ͏ʹॻ͚Δͷɺίϯϙʔωϯτ࡞ऀ
͕ωΠςΟϒΠϕϯτͷΦϒδΣΫτΛ ΧελϜΠϕϯτͰ͍ͯ͠Δɺ ͘͠ɺMJTUFOFSTϓϩύςΟΛͬͯίϯϙʔωϯτ શͯͷΠϕϯτϦεφΛɺಛఆͷࢠཁૉʹඥ͚͍ͮͯΔɻ ྫʣWCUOυΩϡϝϯτͰ&WFOUλϒ͕ͳ͍͕DMJDLΠϕϯτͳͲͷ ωΠςΟϒΠϕϯτ͕ϦοεϯͰ͖Δɻ
7VFUJGZυΩϡϝϯτ ΧελϜΠϕϯτνΣοΫϙΠϯτ
Point. 4 TZODम০ࢠͱVQEBUFΛ શʹཧղ͢Δ
TZODम০ࢠͱ ಛఆͷϓϩύςΟʹ͓͍ͯٙࣅతʹ ํόΠϯσΟϯάΛ࣮ݱͤ͞ΔͨΊʹ͏म০ࢠ ʹΘͱΓ͕ઌ͔ཛ͕ઌ͔ͷΑ͏ͳ୯ํαΠΫϧΛ࡞Γɺ ٖࣅతʹɺ͔͋ͨσʔλ͕ίϯϙʔωϯτ֎Ͱಉظ͍ͯ͠Δ͔ͷ Α͏ʹৼΔΘͤΔίϯϙʔωϯτઃܭςΫχοΫ ίϯϙʔωϯτར༻࣌ ίϯϙʔωϯτͰ͜͏ॻ͔Ε͍ͯΔ
7VFUJGZυΩϡϝϯτ TZODVQEBUFΠϕϯτνΣοΫϙΠϯτ
TZODҙ TZODΛ͚ͨ߹ TFBSDIJOQVUTZODlTFBSDI bʂ`z ͷΑ͏ʹࣜʹ͢Δ͜ͱͰ͖ͳ͍ͨΊҙ ࣜʹ͍ͨ͠߹ !VQEBUFTFBSDIJOQVUΛ͏ɻ
Point. 5 WNPEFMΛશʹཧղ͢Δ
WNPEFMͱ JOQVUཁૉʹ͓͍ͯٙࣅతʹ ํόΠϯσΟϯάΛ࣮ݱͤ͞ΔͨΊʹ͏σΟϨΫςΟϒ JOQVUཁૉɺUFYUBSFBཁૉɺTFMFDUཁૉͰ༻͢Δ͜ͱ͕Ͱ͖ɺ όϯυϓϩύςΟͱΠϕϯτҎԼͷΈ߹ΘͤͰ͢ɻ JOQVUཁૉɺUFYUBSFBཁૉɹɹɹɿWBMVFɺJOQVUΠϕϯτɹɹɹ νΣοΫϘοΫεͱϥδΦϘλϯɿDIFDLFEɺDIBOHFΠϕϯτ TFMFDUཁૉɹɹɹɹɹɹɹɹɹɿWBMVFɺDIBOHFΠϕϯτ ͜Εɺ7VFUJGZͰͳ͘ɺ7VFͷ༷ɻ JOQVUཁૉͷωΠςΟϒJOQVU
Πϕϯτ͕ൃՐͨ͠ΒɺΛ EPDUJUMFʹ֨ೲ͢Δɻ Ͳ͔͜ͰEPDUJUMF͕ॻ͖ ΘͬͨΒɺWBMVFʹόΠϯ υ͞Ε͕ͨ มΘΔɻ
ʹΘͱΓ͕ઌ͔ཛ͕ઌ͔ͷΑ͏ͳ୯ํαΠΫϧΛ࡞Γɺ ٖࣅతʹɺ͔͋ͨσʔλ͕ίϯϙʔωϯτ֎Ͱಉظ͍ͯ͠Δ͔ͷ Α͏ʹৼΔΘͤΔίϯϙʔωϯτઃܭςΫχοΫ ίϯϙʔωϯτར༻࣌ ίϯϙʔωϯτͰ͜͏ॻ͔Ε͍ͯΔ ίϯϙʔωϯτʹ͓͚ΔWNPEFMͱ ٙࣅతʹIUNMཁૉͰߦ͍ͬͯΔWNPEFMͷڍಈΛ ίϯϙʔωϯτͰ࣮ݱͤ͞ΔͨΊʹ͏σΟϨΫςΟϒ
͓͔Γ ͍͚ͨͩͨͩΖ͏͔ʁ
ίϯϙʔωϯτʹ͓͚ΔWNPEFMͱɺ TZODͱ΄΅ಉ͡ڍಈΛ͍ͯ͠Δ ίϯϙʔωϯτ࡞ऀ͕͖ͳΑ͏ʹ࡞ΕΔ WNPEFMͳͷͰ͋Γ ࢲ͕ͨͪΑ͍ͬͯ͘ΔWNPEFMͱ Α͘ࣅ͍ͯΔผɻ ͱࢥͬͨ΄͏͕͍͍ɻ
WDIFDLCPYͷΑ͏ͳίϯϙʔ ωϯτͰɺWNPEFMίϯ ϙʔωϯτͷ෦Ͱ͜ͷΑ͏ ʹॻ͔Ε͓ͯΓɺ NPEFMΦϓγϣϯΛ༻ͯ͠ ίϯϙʔωϯτͰWNPEFM͕ࢦ ఆ͞Εͨͱ͖ʹ༻͞ΕΔ ϓϩύςΟͱΠϕϯτΛ ΧελϚΠζ͍ͯ͠Δ͜ͱ͕ ͔Δɻ
WNPEFMͰมߋΛόΠϯυ͞ΕΔϓϩύςΟ͕ JOQVUWBMVFͳͷɺ 7VFͰͳ͘ɺ7VFUJGZͷ༷ɻ
·ͱΊ 7VFͷ༷ɺಛʹίϯϙʔωϯτपΓͷ༷Λ͑ ͓͔ͯͳ͍ͱ7VFUJGZΧελϚΠζ࣌ʹ ϋϚΓϙΠϯτͱͳΓ ΧελϚΠζ͕͘͠ײ͡Δɻ ࠓͷͭͷϙΠϯτΛ͓͑ͯ͘ͱϋϚΓͮΒ͍ 5IBOLZPV❤ -FU`T7VFUJGZ