非フロントエンジニアが爆速でVuetifyを使うためにキャッチした6つのこと

by kimukei

Slide 1

Slide 1 text

ඇϑϩϯτΤϯυΤϯδχΞ ͕ര଎Ͱ7VFUJGZΛ࢖͏ͨΊ ʹΩϟονͨͭ͠ͷ͜ͱ

Slide 2

Slide 2 text

ࣗݾ঺հ w ໊લ໦ଜܚ w ৽ଔ೥໨ w -*'6--)0.&`4ݟ͑Δෆಈ࢈Ձ஋ IUUQTMJGVMMIPNFT JOEFYKQ w 3VCZPO3BJMT TJOBUSB K2VFSZ "84 4FMFOJVN && w /P4DIPPM IUUQTOPTDIPPMBTJB w -BSBWFM /VYUKT 7VFUJGZ

Slide 3

Slide 3 text

7VFUJGZΛ࢖͏ͨΊʹ Ωϟονͨͭ͠ͷ͜ͱ

Slide 4

Slide 4 text

NUNEˡ͜͏͍͏΍ͭ SPX DPM P⒎TFU EqFY KVTUJGZ WTFMFDU WEBUFQJDLFS 7VFUJGZͷόʔδϣϯ

Slide 5

Slide 5 text

.mt-md-2ˡ͜Ε

Slide 6

Slide 6 text

NNBSHJO QQBEEJOH .mt-md-2

Slide 7

Slide 7 text

t: top b: bottom l: left r: right x: *-left and *-right y: *-top and *-bottom a: all .mt-md-2 IUUQTWVFUJGZKTDPNKBTUZMFT TQBDJOH

Slide 8

Slide 8 text

CSFBLQPJOU .mt-md-2

Slide 9

Slide 9 text

CSFBLQPJOU UIJTWVFUJGZCSFBLQPJOU ͰΞΫηεͰ͖Δ

Slide 10

Slide 10 text

O QY ͸Oͱ΋ॻ͚Δ BVUP΋࢖͑Δ .mt-md-2

Slide 11

Slide 11 text

ͳΜͰͷഒ਺

Slide 12

Slide 12 text

ը໘͸ͷഒ਺Ͱग़དྷ͍ͯΔ ࢀߟ7FDUPS7JEFP4UBOEBSET

Slide 13

Slide 13 text

ͷഒ਺Ͱ૊·Εͨͷ ͕ྑ͍σβΠϯ

Slide 14

Slide 14 text

SPX DPM P⒎TFU

Slide 15

Slide 15 text

HSJETZTUFN

Slide 16

Slide 16 text

WSPX WDPM WDPM WDPM WDPM WDPM WDPM WDPM WDPM WDPM WDPM WDPM WDPM SPXʢߦʣͷதʹDPMʢྻʣ͕͋Δ

Slide 17

Slide 17 text

WSPX DPMݸ WDPM WDPM WDPM WDPM WDPM WDPM WDPM WDPM WDPM WDPM WDPM WDPM ݸͷDPMʢྻʣ͔ΒͳΔ

Slide 18

Slide 18 text

WSPX WDPM DPMT P⒎TFU WDPM DPMT P⒎TFU P⒎TFUͰ࢝·ΓҐஔΛ੍ޚ

Slide 19

Slide 19 text

CSFBLQPJOUΛࢦఆͯ͠Ϩεϙϯγϒͳ഑ஔʹ

Slide 20

Slide 20 text

EqFY KVTUJGZ

Slide 21

Slide 21 text

HSJETZTUFN

Slide 22

Slide 22 text

EqFY w Eͱ͸EJTQMBZ w EqFYEJTQMBZqFY w E\CSFBLQPJOU^qFYͱ͔΋Ͱ͖Δ

Slide 23

Slide 23 text

KVTUJGZ w KVTUJGZTUBSU w KVTUJGZDFOUFS w KVTUJGZFOE w KVTUJGZTQBDFCFUXFFO w KVTUJGZTQBDFBSPVOE

Slide 24

Slide 24 text

഑ஔͷجຊ

Slide 25

Slide 25 text

WTFMFDU

Slide 26

Slide 26 text

දࣔ ˠ ˠ ˠ ѻ͍͍ͨ

Slide 27

Slide 27 text

WNPEFM࢖ͬͯϩδοΫ ͪ͝Όͪ͝Όॻ͔ͳ͍

Slide 28

Slide 28 text

ΦϒδΣΫτʹ UFYUͱWBMVFΛ༻ҙ͢Ε͹0,

Slide 29

Slide 29 text

ࢀরϓϩύςΟ໊͸ ઃఆͰ͖Δ

Slide 30

Slide 30 text

WTFMFDU͕៉ྷʹ✨

Slide 31

Slide 31 text

WEBUFQJDLFS

Slide 32

Slide 32 text

஀ੜ೔ೖྗϑΥʔϜ ࡞Ζ͏

Slide 33

Slide 33 text

CJSUIEBZQJDLFSͳ͍Α

Slide 34

Slide 34 text

CJSUIEBZQJDLFSͳ͍Α σϑΥϧτͰ೥ͷબ୒͔Β࢝·Γɺ೔෇ൣғΛ੍ݶ͠ɺ೔෇ Λબ୒ͨ͠ޙʹϐοΧʔϝχϡʔΛด͡Δͱɺ׬ᘳͳ஀ੜ೔ ϐοΧʔʹͳΓ·͢ɻ CZެࣜ

Slide 35

Slide 35 text

ͳΔ΄Ͳʁ

Slide 36

Slide 36 text

WEBUFQJDLFSΛ ΧελϚΠζ͢Δ

Slide 37

Slide 37 text

w ೔ຊޠରԠ w ೔෇ͷʮ೔ʯ͸औΔ w ೥͔Βબ୒ w ࠷ॳʹ೥Λબ୒͢Δͱ͖ɺ೥͔ΒʹͳΔΑ͏ʹɹ ʢWNPEFMʹॳظ஋Λ༩͑ͯ΋ղܾͰ͖ͳ͍ʣ w ೔෇ൣғ੍ݶ w ೔෇Λબ୒ͱಉ࣌ʹQJDLFSΛด͡Δ

Slide 38

Slide 38 text

݁ߏେม

Slide 39

Slide 39 text

Ͱ΋ͳΜͱ͔

Slide 40

Slide 40 text

৭ʑ͍͡Γ·͢

Slide 41

Slide 41 text

௕͍ͷͰޙͰهࣄʹ ·ͱΊ·͢

Slide 42

Slide 42 text

7VFUJGZͷόʔδϣϯ

Slide 43

Slide 43 text

7VFUJGZͷόʔδϣϯ w όʔδϣϯ͸ྑ֬͘ೝ͢΂͠ w WW݁ߏഁյతͳมߋ͕ଟ͍ w ϚΠφʔόʔδϣϯݻ༗ͷόά͕͋ͬͨΓ͢Δ w Wʹ্͛ͯͳ͍ͳΒ w 7VFUJGZͰ͸ͳ͘2VBTBSʹʢ.JHSBUJOHGSPN 7VFUJGZUP2VBTBSʣ

Slide 44

Slide 44 text

٧·ͬͨΒόʔδϣϯ ͍ٙ·͠ΐ͏

Slide 45

Slide 45 text

࠷ޙʹ

Slide 46

Slide 46 text

-5ͳͲొஃػձΛืू͍ͯ͠·͢ ͓༠͍͋Ε͹ߦ͖·͢ !,.3@·Ͱ ˣ࣋ͪωλˣ 3VCZPO3BJMT -BSBWFM /VYUKT 7VFUJGZ "84

Slide 47

Slide 47 text

ΑΖ͓͘͠ئ͍͠·͢ʂ