Slide 1

Slide 1 text

·ͩؒʹ߹͏l)5.-z :FPNBOͰ௥͍͚ͭʂߴ଎8FCΞϓϦ։ൃ *OOPWBUJPO&((!LBEPQQF

Slide 2

Slide 2 text

ࣗݾ঺հ ● ໊લ ● ໳࿬߃ฏ !LBEPQQF ● ৬ۀ ● ιϑτ΢ΣΞΤϯδχΞ ● ॴଐ ● )5.-8&45KQגࣜձࣾγΣΞ΢Οζ

Slide 3

Slide 3 text

ຊ೔ͷεϥΠυ ● 4MJEF4IBSF ● IUUQXXXTMJEFTIBSFOFULBEPQQF ● 4QFBLFS%FDL ● IUUQTTQFBLFSEFDLDPNLBEPQQF

Slide 4

Slide 4 text

ΞδΣϯμ ● )5.-8&45KQ঺հ ● l)5.-zͰͰ͖Δ͜ͱ ● l)5.-zʹ͍͍ͭͯͨ͘Ίʹ ● :FPNBOͰ௥͍͚ͭʂ ߴ଎8FCΞϓϦ։ൃ

Slide 5

Slide 5 text

)5.-8&45KQͷ঺հ

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

)5.-8&45KQ ● ؔ੢Ͱ)5.-ͷ࿩୊Λ੝Γ্͛ΔͨΊ ʹ೥ʹൃ଍ͨ͠ίϛϡχςΟ ● ׆ಈ಺༰ ● )5.-ؔ࿈ͷษڧձɾΠϕϯτ։࠵ ● .-Ͱͷ৘ใڞ༗

Slide 8

Slide 8 text

)5.-ͳͲษڧձ ● )5.-̑ؔ࿈ٕज़ͷൃදΛͱ͓ͯ͠ ٕज़޲্ɾ৘ใަ׵Λߦ͏৔ॴ ● ෆఆظ։࠵ ● ೥ʹୈճ͕։࠵ɾݱࡏ·Ͱʹճ։࠵ ● ʮ)5.-ͱ͔ษڧձʯΛΠϯεύΠΞ

Slide 9

Slide 9 text

๻ͱ)5.-8&45KQ

Slide 10

Slide 10 text

ग़ձ͍ ● ● ژ౎(56()5.-ϋοΧιϯʹࢀՃ ● +BWB4DSJQU)5.-ॳ৺ऀͰͨ͠ ● ͦͷޙ ● )5.-ಡॻձ΍ϋοΧιϯʹͭ͘͜͠ࢀՃ ● ίΞϝϯόʔͱ͓ͯ͠༠͍Λ͏͚Δ

Slide 11

Slide 11 text

ษڧձͰϓϨθϯ ● )5.-ͳͲษڧձ͕։࠵͞ΕΔͨͼʹ Ͱ͖Δ͚ͩϓϨθϯ ● ͦΕ͕͖͔͚ͬͰʜ

Slide 12

Slide 12 text

ࡶࢽͷಛूهࣄΛॻ͘͜ͱʹ ● 8&#%#1SFTTWPM ● ʮ࡞ֶͬͯͿσʔλՄࢹԽʯ

Slide 13

Slide 13 text

ࢀՃ͢ΔϝϦοτ ● ৽ٕज़Λ஌Δɾษڧ͢Δ͖͔͚ͬʹͳΔ ● ٕज़ʹͱ͕ͬͨਓͱ஌Γ߹͑Δ ● खΛ্͛Ε͹ࣗ෼͕ൃදͰ͖Δ ● ͦͷؾʹͳΕ͹ੈք͕޿͕Δ

Slide 14

Slide 14 text

ੋඇࢀՃ͍ͯͩ͘͠͞ʂ

Slide 15

Slide 15 text

l)5.-zͰͰ͖Δ͜ͱ

Slide 16

Slide 16 text

)5.-ͱl)5.-z ● l)5.-z͸ͱͯ΋ᐆດͳݴ༿ ● Ͳ͔͜Β͕)5.-ͳͷʁ ● Ͳ͜·Ͱ͕)5.-ͳͷʁ

Slide 17

Slide 17 text

ڱٛͷ)5.- ● )5.-ͷ࣍ͷόʔδϣϯ ● ϚʔΫΞοϓݴޠͱͯ͠ͷ࢓༷ ● ৽͍͠λάʗཁૉ͕௥Ճ

Slide 18

Slide 18 text

޿ٛͷl)5.-z ● ϦονΠϯλʔωοτΞϓϦέʔγϣϯ 3*" ࣮ݱͷͨΊͷ༷ʑͳ࢓༷܈ ● ʮ)5.-ؔ࿈ٕज़ʯͱݺ͹ΕΔ ● ຊϓϨθϯͰ͸l)5.-zͱදه

Slide 19

Slide 19 text

͍͔ͭΒ࢖͑Δl)5.-z ● "΋͏࢖͑Δ ● ֤ϒϥ΢β͕ஈ֊తʹରԠ ● *OUFSOFU&YQMPSFSҠߦ ● .P[JMMB'JSFGPYҠߦ ● (PPHMF$ISPNFҠߦ ● 4BGBSJҠߦ

Slide 20

Slide 20 text

l)5.-zͰͰ͖Δ͜ͱ ● ϚʔΫΞοϓฤ ● දݱฤ ● +BWB4DSJQU"1*ฤ ● εϚϗΞϓϦฤ

Slide 21

Slide 21 text

ϚʔΫΞοϓฤ

Slide 22

Slide 22 text

γϯϓϧͳϚʔΫΞοϓ ● ΑΓγϯϓϧͳλάͰ)5.-͕ هड़Ͱ͖ΔΑ͏ʹ ˠ੍࡞ɾ։ൃޮ཰Ξοϓˢ

Slide 23

Slide 23 text

! ! !

Slide 24

Slide 24 text

! ! !

Slide 25

Slide 25 text

... ... ! ! ! ... ...

Slide 26

Slide 26 text

ηϚϯςΟοΫͳϚʔΫΞοϓ ●

ཁૉ ● ίϯϐϡʔλ͕ҙຯΛղऍ͢Δͷ͕೉͍͠ ● , ཁૉͳͲΛ ࢖͏͜ͱͰ ● ίϯϐϡʔλ͕ҙຯΛղऍͰ͖ΔΑ͏ʹ ● εΫϦʔϯϦʔμ΍ݕࡧΤϯδϯ͕ ߴػೳʹ

Slide 27

Slide 27 text

ཁૉ ● lهࣄzΛϚʔΫΞοϓ ● 344ϑΟʔυʹؚΊͨͱ͖ʹ̍ͭͷهࣄͱͯ͠ ੒Γཱͭ୯Ґ ● ྫʣ ● ϒϩάͷΤϯτϦ

Slide 28

Slide 28 text

ແమ๒ͰϥʔϝϯΛ৯΂͖ͯͨ

ແੑʹϥʔϝϯ͕৯΂͍ͨͱࢥ͍ɾɾɾ

େߦྻ͕Ͱ͖͚ͯͨͲΊ͛ͣʹฒΜͰɾɾɾ

...

Slide 29

Slide 29 text

ཁૉ ● จষͷlηΫγϣϯzΛϚʔΫΞοϓ ● ྫʣ ● จষʹ͓͚Δzষz

Slide 30

Slide 30 text

1ষ ͸͡Ίʹ

...

2ষ എܠ

...

Slide 31

Slide 31 text

දݱฤ

Slide 32

Slide 32 text

$44 ● 8FCϖʔδ্ͰϦονͳදݱΛ࣮ݱ͢Δ ͨΊͷ༷ʑͳϓϩύςΟ͕௥Ճ͞Εͨ ● ը૾΍εΫϦϓτ͕ඞཁͩͬͨදݱ ˠελΠϧγʔτ͚ͩͰ࣮ݱՄೳʹ

Slide 33

Slide 33 text

૷০ܥϓϩύςΟ ● border-radius ● ؙ֯ ● box-shadow, text-shadow ● υϩοϓγϟυ΢

Slide 34

Slide 34 text

.box { box-shadow: 2px 2px 2px rgba(0,0,0,0.2); border-radius: 3px; }

Slide 35

Slide 35 text

ࢀߟɿζϧ͍σβΠϯ ζϧ͍σβΠϯʢʣɿCPYTIBEPXͰදݱ͢Δɺʮηϛϑϥοτʯͳζϧ͍σβΠϯςΫχοΫ ˏ*5 IUUQXXXBUNBSLJUDPKQBJUBSUJDMFTOFXTIUNM

Slide 36

Slide 36 text

ΞχϝʔγϣϯܥϓϩύςΟ ● transition ● $44ϓϩύςΟʹΑΔঢ়ଶͷมԽΛ Ξχϝʔγϣϯ ● animation ● ΩʔϑϨʔϜΞχϝʔγϣϯ

Slide 37

Slide 37 text

.box { background-color: red; transition: background-color 1s; } .box:hover { background-color: blue; }

Slide 38

Slide 38 text

.box { animation: an-animation 2s infinite; } @keyframes an-animation { 0%, 100% { left: 0px; } 50% { left: 100px; } }

Slide 39

Slide 39 text

ࢀߟɿ̑෼ͰΘ͔Δ$44ͷάϥϑΟοΫεػೳ ʮ෼ͰΘ͔Δ$44ͷάϥϑΟοΫεػೳʯαϯϓϧ IUUQXXXBUNBSLJUDPKQGXDSEFTJHOCFOLZPXFCHSBQIJDTTBNQMFIUNM

Slide 40

Slide 40 text

8FC'POUT ● ϑΥϯτΛ8FC͔Βμ΢ϯϩʔυ͠ ϒϥ΢βͰදࣔ͢Δٕज़ ● Πϯετʔϧ͞Ε͍ͯͳ͍ϑΥϯτ͕ ར༻Մೳ ● ը૾จࣈ͕ඞཁͩͬͨදݱ ˠ$44ͷΈͰ࣮ݱՄೳʹ

Slide 41

Slide 41 text

@font-face { font-family: kadoppeFont; src: url(kadoppe.woff) } .box { font-family: kadoppeFont; }

Slide 42

Slide 42 text

ศརɿ(PPHMF'POUT (PPHMF'POUTIUUQXXXHPPHMFDPNGPOUT

Slide 43

Slide 43 text

ศརɿ'0/51-64 '0/51-64ʛϑΥϯτϓϥεIUUQXFCGPOUGPOUQMVTKQ

Slide 44

Slide 44 text

άϥϑΟοΫඳըػೳ ● $BOWBT ● ϏοτϚοϓը૾ ● *OMJOF47( ● ϕΫλʔը૾ ● 8FC(- ● %άϥϑΟοΫ

Slide 45

Slide 45 text

! var canvas, ctx; canvas = document.getElementById('canvas'); ! ctx = canvas.getContext('2d'); ! ! ctx.strokeStyle = "#FF0000"; ! ctx.strokeRect(25, 25, 100, 100); ! ! ctx.fillStyle = "#FFCC00"; ! ctx.fillRect(25, 25, 100, 100);

Slide 46

Slide 46 text

Slide 47

Slide 47 text

σϞ5IF4IPEP 5IF4IPEPIUUQXXXUIFTIPEPDPN

Slide 48

Slide 48 text

ࣄྫ4IBSF8JT ແྉֶशαΠτ4IBSF8JTIUUQTIBSFXJTDPN

Slide 49

Slide 49 text

ࣄྫ)FMMP3BDFS )FMMP3BDFSä8FC(-IUUQIFMMPSBDFSDPNXFCHM

Slide 50

Slide 50 text

+BWB4DSJQU"1*ฤ

Slide 51

Slide 51 text

(FPMPDBUJPO"1* ● ϢʔβͷҐஔ৘ใΛѻ͏ͨΊͷ"1* ● 8FCΞϓϦέʔγϣϯ͕Ϣʔβͷ৔ॴΛ ஌Δ͜ͱ͕Մೳʹ

Slide 52

Slide 52 text

navigator.geolocation.getCurrentPosition(function(position) { console.log(position.coords.latitude); // Ң౓ console.log(position.coords.longitude); // ܦ౓ });

Slide 53

Slide 53 text

ࣄྫ(PPHMF.BQ

Slide 54

Slide 54 text

MPDBM4UPSBHF ● ϒϥ΢βʹσʔλΛอଘ ● ͋ͱͰऔΓग़ͯ͠࢖༻Մೳ ● ΦϑϥΠϯར༻Մೳͳ8FCΞϓϦ͕ ࣮ݱՄೳ

Slide 55

Slide 55 text

window.localStorage.setItem(‘food’, ‘ϥʔϝϯ’); console.log( window.localStorage.getItem(‘food’) );

Slide 56

Slide 56 text

'JMF"1* ● ίϯϐϡʔλ্ͷϑΝΠϧΛಡΈࠐΉͨ Ίͷ"1* ● ࢖༻ྫɿ͜͜ʹϑΝΠϧΛυϩοϓ +BWB4DSJQUͰͷϩʔΧϧϑΝΠϧͷಡΈࠐΈ)5.-3PDLT IUUQXXXIUNMSPDLTDPNKBUVUPSJBMTpMFEOEpMFT

Slide 57

Slide 57 text

8FC"VEJP"1* ● Ի੠ͷੜ੒ ● ϑΟϧλʔॲཧ ● ߴਫ਼౓ͷ࠶ੜλΠϛϯά੍ޚ ● ࢖༻ྫɿ ● ήʔϜ ● γϯηαΠβʔ

Slide 58

Slide 58 text

ࣄྫ"OHSZ#JSET "OHSZ#JSET$ISPNFIUUQDISPNFBOHSZCJSETDPN

Slide 59

Slide 59 text

εϚϗΞϓϦฤ

Slide 60

Slide 60 text

1IPOF(BQ ● εϚʔτϑΥϯ༻ωΠςΟϒΞϓϦ։ൃϑ ϨʔϜϫʔΫ ● J04 "OESPJE 8JOEPXT1IPOF ● l)5.-zؔ࿈ٕज़Λ͔ͭͬͯ։ൃ ● )5.- ● $44 ● +BWB4DSJQU

Slide 61

Slide 61 text

ࣄྫɿ.Z)FBSU$BNFS 1IPOF(BQc.Z)FBSU$BNFSBIUUQQIPOFHBQDPNBQQNZIFBSUDBNFSB

Slide 62

Slide 62 text

ୈ̏ͷϞόΠϧ04 ● J04΍"OESPJEʹ͙࣍ୈͷ04 ● 'JSFGPY04 ● 5J[FO ● ϓϥοτϑΥʔϜ͕ΞϓϦ͕ l)5.-zͰ࣮૷͞Ε͍ͯΔ

Slide 63

Slide 63 text

'JSFGPY04 ;5&0QFO1PXFSFECZ'JSFGPY04(6OMPDLFE4NBSUQIPOF0SBOHFF#BZ&YDMVTJWFcF#BZ IUUQXXXFCBZDPNJUN

Slide 64

Slide 64 text

5J[FO 6SCBO"JSTIJQ5BLFTUIF4UBHFBUUIF5J[FO%FWFMPQFS$POGFSFODF IUUQVSCBOBJSTIJQDPNCMPHVSCBOBJSTIJQUBLFTUIFTUBHFBUUIFUJ[FO EFWFMPQFSDPOGFSFODF

Slide 65

Slide 65 text

l)5.-zʹ͍͍ͭͯͨ͘Ίʹ

Slide 66

Slide 66 text

্͍͍ͭͯ͘Ͱͷ໰୊఺ ● ٕज़͕޿͗͢Δɾଟ͗͢Δ ● ৽ٕज़͕ͲΜͲΜొ৔͢Δ ● "1* ● େྔͷ+BWB4DSJQUϥΠϒϥϦ ● #BDLCPOFKT %KT 5ISFFKT ̋̋KT

Slide 67

Slide 67 text

Ͳ͏͢Ε͹ʜ ɾТɾʆ

Slide 68

Slide 68 text

̍ɽͱʹ͔͘ڵຯΛ࣋ͭ

Slide 69

Slide 69 text

̎ɽͱʹ͔͘ίʔυΛॻ͘

Slide 70

Slide 70 text

Ͱ΋ɺίʔυΛॻ͘ͷ ͔͔࣌ؒΔΑʜ ɾТɾʆ

Slide 71

Slide 71 text

΋͏ख஗Εʁؒʹ߹Θͳ͍ʁ ɾТɾʆ

Slide 72

Slide 72 text

̏ɽߴ଎ʹίʔυΛॻ͜͏

Slide 73

Slide 73 text

ͦ͜Ͱ

Slide 74

Slide 74 text

:FPNBO௥͍͚ͭʂ ߴ଎8FCΞϓϦ։ൃ

Slide 75

Slide 75 text

:FPNBO ● 8FC։ൃʹؔΘΔ໘౗ͳ͜ͱΛ ࣗಈԽͯ͘͠ΕΔπʔϧ ● ίʔυΛॻ͘લͷ४උ ● ίʔυΛॻ͍͍ͯΔ࣌ͷ࡞ۀ ● ίʔυΛॻ͖ऴΘͬͨ͋ͱͷ࡞ۀ

Slide 76

Slide 76 text

:FPNBOͷߏ੒ཁૉ

Slide 77

Slide 77 text

:P ● :FPNBOͷϓϩδΣΫτΛੜ੒ ● ༷ʑͳͻͳܗ͕ެ։͞Ε͍ͯΔ ● XFCBQQҰൠతͳ΢ΣϒΞϓϦ༻ ● CBDLCPOF#BDLCPOFKT༻ ● DISPNFBQQ$ISPNF8FC4UPSF༻

Slide 78

Slide 78 text

(SVOU ● ͞·͟·ͳ࡞ۀΛࣗಈԽ ● ։ൃ༻αʔόͷىಈ ● ϑΝΠϧߋ৽ͷ؂ࢹ ● ࣗಈςετ ● ϦϦʔε࡞ۀ

Slide 79

Slide 79 text

#PXFS ● +BWB4DSJQUϥΠϒϥϦͷύοέʔδ؅ཧ ● ݕࡧ ● Πϯετʔϧ ● Ξοϓσʔτ ● ґଘؔ܎ͷࣗಈղܾ

Slide 80

Slide 80 text

࣮ࡍʹ͔ͭͬͯΈΔ

Slide 81

Slide 81 text

खॱ ● ඞཁͳπʔϧͷ४උ ● ϓϩδΣΫτͷ࡞੒ ● αʔόͷىಈ ● ίʔυΛॻ͘ ● ϦϦʔε

Slide 82

Slide 82 text

ඞཁͳπʔϧͷ४උ ● 8FCϒϥ΢β ● ςΩετΤσΟλ ● ීஈ࢖͍ͬͯΔ΋ͷ ● λʔϛφϧʢ௨শɿࠇ͍ը໘ʣ ● OPEFKT

Slide 83

Slide 83 text

OPEFKT ● αʔόαΠυ+BWB4DSJQU࣮ߦ؀ڥ ● ৄ͍͜͠ͱ͸஌Βͳͯ͘΋0, ● Πϯετʔϧ ● QLHϑΝΠϧΛμ΢ϯϩʔυ͢Δͷ͕؆୯ IUUQOPEFKTKQOPEFKTPSH@KBEPDTW

Slide 84

Slide 84 text

:FPNBOͷΠϯετʔϧ $ npm install -g yo grunt-cli bower generator-webapp $Λআ͍ͨ෦෼Λ λʔϛφϧͰೖྗͯ͠&/5&3

Slide 85

Slide 85 text

ϓϩδΣΫτͷ࡞੒ $ cd /Users/kadoppe/Source/hello-yeoman $ yo webapp

Slide 86

Slide 86 text

ͻͳܗʹԿΛؚΊΔ͔ਘͶΒΕΔ ͱΓ͋͑ͣ&OUFSΛೖྗ

Slide 87

Slide 87 text

৭ʑΠϯετʔϧ͞ΕΔ ͱΓ͋͑ͣ଴ͭ

Slide 88

Slide 88 text

ੜ੒͞ΕΔϓϩδΣΫτ ● BQQˡ8FCΞϓϦͷίʔυ͸͜ͷத ● CPXFSKTPO ● (SVOUpMFKT ● OPEF@NPEVMFT ● QBDLBHFKTPO ● UFTU

Slide 89

Slide 89 text

BQQσΟϨΫτϦͷத਎ ● IUNM ● CPXFS@DPNQPOFOUT ● JNBHFTը૾ϑΝΠϧΛ഑ஔ ● JOEFYIUNM ● SPCPUTUYU ● TDSJQUT+BWB4DSJQUϑΝΠϧΛ഑ஔ ● TUZMFT$44ϑΝΠϧ

Slide 90

Slide 90 text

ಋೖ͞Ε͍ͯΔϑϨʔϜϫʔΫɾϥΠϒϥϦ ● )5.-#PJMFSQMBUF ● .PEFSOJ[S ● 3FRVJSF+4 ● #PPUTUSBQ

Slide 91

Slide 91 text

)5.-#PJMFSQMBUF ● )5.-Ͱ8FC੍࡞Λߦ͏ͱ͖ͷ ϕετϓϥΫςΟεΛूΊͨςϯϓϨ ● /PSNBMJ[FDTT ● (PPHMF"OBMZUJDTಋೖ༻λά ● *&ରԠ ● ৄ͘͠͸ެࣜΛݟ͍ͯͩ͘͞ IUUQIUNMCPJMFSQMBUFDPN

Slide 92

Slide 92 text

)5.-#PJMFSQMBUF ● )5.-Ͱ8FC੍࡞Λߦ͏ͱ͖ͷ ϕετϓϥΫςΟεΛूΊͨςϯϓϨ ● /PSNBMJ[FDTT ● (PPHMF"OBMZUJDTಋೖ༻λά ● *&ରԠ

Slide 93

Slide 93 text

.PEFSOJ[S ● ϒϥ΢β͕αϙʔτ͍ͯ͠Δ)5.-ɾ $44ͷػೳΛࣗಈݕग़ ● ཁૉͷclassଐੑʹ αϙʔτঢ়گΛग़ྗͯ͘͠ΕΔ ● $44΍+BWB4DSJQUͰॲཧΛ෼ذ ͢Δͷʹศར

Slide 94

Slide 94 text

Slide 95

Slide 95 text

3FRVJSF+4 ● +BWB4DSJQUͰ֎෦+BWB4DSJQUϑΝΠϧ ͷಡΈࠐΈΛ࣮ݱ͢ΔϥΠϒϥϦ ● $ݴޠͰ͍͏JNQPSU ● େن໛ͳ+BWB4DSJQUϓϩάϥϜΛ ॻ͘ͱ͖ʹศར

Slide 96

Slide 96 text

#PPUTUSBQ ● ༗໊ͳ$44ϑϨʔϜϫʔΫ ● ͋Β͔͡Ίఆٛ͞ΕͨDMBTTΛཁૉʹ ઃఆ͢Δ͚ͩͰྑ͍ײ͡ͷσβΠϯʹ ● σβΠϯྗ͕ͳ͍ͱ͖ʹศར

Slide 97

Slide 97 text

αʔόͷىಈ $ grunt server

Slide 98

Slide 98 text

αʔό͕ىಈ͠ ϒϥ΢βʹϖʔδ͕ ࣗಈతʹදࣔ͞ΕΔ

Slide 99

Slide 99 text

ίʔυΛॻ͘ ● ςΩετΤσΟλͰࣗ༝ʹίʔυΛฤू ● )5.-ɿJOEFYIUNM ● +BWB4DSJQU ● NBJOKTɿઃఆؔ܎ͷίʔυ ● BQQKTɿΞϓϦέʔγϣϯͷίʔυ ● $44ɿNBJOTDTT

Slide 100

Slide 100 text

-JWF3FMPBE ● ϑΝΠϧΛมߋͨ͠Βࣗಈతʹϒϥ΢β Λߋ৽ͯ͘͠ΕΔ࢓૊Έ ● ʮΤσΟλˠอଘˠϒϥ΢βˠߋ৽ˠʯ ͷख͕ؒେ෯ʹܰݮ

Slide 101

Slide 101 text

+BWB4DSJQUϥΠϒϥϦΛಋೖ $ bower install d3.js

Slide 102

Slide 102 text

require.config({ paths: { d3: '../bower_components/d3/d3' }, shim: { d3: { exports: 'd3' } } }); NBJOKTʹ͓·͡ͳ͍௥Ճ ˞3FRVJSF+4ͷ%KTಡΈࠐΈઃఆ

Slide 103

Slide 103 text

define(['d3'], function (d3) { }); BQQKTʹ͓·͡ͳ͍௥Ճ ˞3FRVJSF+4ͷ%KTಡΈࠐΈઃఆ

Slide 104

Slide 104 text

define(['d3'], function (d3) { }); BQQKTʹ͓·͡ͳ͍௥Ճ ˞3FRVJSF+4ͷ%KTಡΈࠐΈઃఆ

Slide 105

Slide 105 text

͞Βʹ։ൃΛߴ଎Խ ● $P⒎FF4DSJQUΛ࢖͏ ● ίϯύΠϧ͢Δͱ+BWB4DSJQUʹͳΔݴޠ ● ಉ͜͡ͱΛΑΓγϯϓϧʹ࣮ݱͰ͖Δ ● 4BTTʢ4$44ʣΛ࢖͏ ● ίϯύΠϧ͢Δͱ$44ʹͳΔݴޠ ● ม਺΍NJYJOʢؔ਺ʣɺೖΕࢠߏ଄͕Մೳ

Slide 106

Slide 106 text

$.click(function () { console.log(‘clicked’); }); ! ! ! $.click -> console.log ‘clicked’

Slide 107

Slide 107 text

.wrapper .inner a { text-decoration: none; } .wrapper .inner a:hover { text-decoration: underline; } ! ! ! .wrapper { .inner { a { text-decoration: none; &:hover { text-decoration: underline; } } } }

Slide 108

Slide 108 text

ϦϦʔε $ grunt build

Slide 109

Slide 109 text

ϦϦʔε࣌ʹ΍ͬͯ͘ΕΔ͜ͱ ● +BWB4DSJQUͱ$44ͷ࠷దԽ ● ݁߹ͱѹॖ ● ը૾ͷ࠷దԽ ● ϦϦʔεʹඞཁͳϑΝΠϧͷΈΛ EJTUσΟϨΫτϦʹҠಈ

Slide 110

Slide 110 text

·ͱΊ ● l)5.-z͸΋͏࢖͑Δʗ࢖ΘΕ͍ͯΔ ● ٕज़ͷൣғɾछྨ͕ଟ͍͍͗ͯͭͯ͘͢ ͷ͕େม ● ڵຯΛ࣋ͬͯͱʹ͔͘ίʔυΛॻ͘͜ͱ ͕ॏཁ ● :FPNBOͰ։ൃɾֶशޮ཰Ξοϓ