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
まだ間に合うHTML5 - Yeomanで追いつけ!高速Webアプリ開発
Search
kadoppe
October 26, 2013
Technology
0
140
まだ間に合うHTML5 - Yeomanで追いつけ!高速Webアプリ開発
2013/10/26に大阪で開催されたInnovation EGG 第1回のセミナーで使ったプレゼン資料です。
http://eventregist.com/e/InnovationEGG01
kadoppe
October 26, 2013
Tweet
Share
More Decks by kadoppe
See All by kadoppe
一年間スタートアップのCTOをやってきて学んだこと
kadoppe
1
740
未知の顧客にとっても価値あるプロダクトを生み出す
kadoppe
2
1.8k
プレイド開発チームにおけるチーム・ジャーニー ver.202010
kadoppe
4
960
不確実性の高い世界のなかで、非連続な成長を生み出す / Developers Summit 2020 Summer
kadoppe
1
1.9k
プレイド開発チームにおけるチーム・ジャーニー
kadoppe
12
5.8k
プレイドのエンジニアからみた「正しいものを正しくつくる」
kadoppe
0
2.1k
フラット型組織におけるエンジニアリングマネジメント
kadoppe
1
1.3k
Pebble + JavaScriptでつくるスマートウォッチ
kadoppe
0
200
Firefox OSでSVGをつかってみた
kadoppe
0
100
Other Decks in Technology
See All in Technology
わたしとトラックポイント / TrackPoint tips
masahirokawahara
1
240
【若手エンジニア応援LT会】AWS Security Hubの活用に苦労した話
kazushi_ohata
0
160
CAMERA-Suite: 広告文生成のための評価スイート / ai-camera-suite
cyberagentdevelopers
PRO
3
260
visionOSでの空間表現実装とImmersive Video表示について / ai-immersive-visionos
cyberagentdevelopers
PRO
1
110
コンテンツを支える 若手ゲームクリエイターの アートディレクションの事例紹介 / cagamefi-game
cyberagentdevelopers
PRO
1
120
AWSコンテナ本出版から3年経った今、もし改めて執筆し直すなら / If I revise our container book
iselegant
15
3.9k
Java x Spring Boot Warm up
kazu_kichi_67
2
490
Figma Dev Modeで進化するデザインとエンジニアリングの協働 / figma-with-engineering
cyberagentdevelopers
PRO
1
430
「 SharePoint 難しい」ってよく聞くけど、そんなに言うなら8歳の息子に試してもらった
taichinakamura
1
600
マネジメント視点でのre:Invent参加 ~もしCEOがre:Inventに行ったら~
kojiasai
0
450
Fargateを使った研修の話
takesection
0
110
WINTICKETアプリで実現した高可用性と高速リリースを支えるエコシステム / winticket-eco-system
cyberagentdevelopers
PRO
1
190
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
19
1.1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
7
150
Optimizing for Happiness
mojombo
376
69k
KATA
mclloyd
29
13k
Docker and Python
trallard
40
3.1k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
3
370
Statistics for Hackers
jakevdp
796
220k
Making Projects Easy
brettharned
115
5.9k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
328
21k
Transcript
·ͩؒʹ߹͏l)5.-z :FPNBOͰ͍͚ͭʂߴ8FCΞϓϦ։ൃ *OOPWBUJPO&((!LBEPQQF
ࣗݾհ • ໊લ • ߃ฏ !LBEPQQF • ৬ۀ •
ιϑτΣΞΤϯδχΞ • ॴଐ • )5.-8&45KQגࣜձࣾγΣΞΟζ
ຊͷεϥΠυ • 4MJEF4IBSF • IUUQXXXTMJEFTIBSFOFULBEPQQF • 4QFBLFS%FDL • IUUQTTQFBLFSEFDLDPNLBEPQQF
ΞδΣϯμ • )5.-8&45KQհ • l)5.-zͰͰ͖Δ͜ͱ • l)5.-zʹ͍͍ͭͯͨ͘Ίʹ • :FPNBOͰ͍͚ͭʂ ߴ8FCΞϓϦ։ൃ
)5.-8&45KQͷհ
None
)5.-8&45KQ • ؔͰ)5.-ͷΛΓ্͛ΔͨΊ ʹʹൃͨ͠ίϛϡχςΟ • ׆ಈ༰ • )5.-ؔ࿈ͷษڧձɾΠϕϯτ։࠵ • .-Ͱͷใڞ༗
)5.-ͳͲษڧձ • )5.-̑ؔ࿈ٕज़ͷൃදΛͱ͓ͯ͠ ٕज़্ɾใަΛߦ͏ॴ • ෆఆظ։࠵ • ʹୈճ͕։࠵ɾݱࡏ·Ͱʹճ։࠵ • ʮ)5.-ͱ͔ษڧձʯΛΠϯεύΠΞ
ͱ)5.-8&45KQ
ग़ձ͍ • • ژ(56()5.-ϋοΧιϯʹࢀՃ • +BWB4DSJQU)5.-ॳ৺ऀͰͨ͠ • ͦͷޙ •
)5.-ಡॻձϋοΧιϯʹͭ͘͜͠ࢀՃ • ίΞϝϯόʔͱ͓ͯ͠༠͍Λ͏͚Δ
ษڧձͰϓϨθϯ • )5.-ͳͲษڧձ͕։࠵͞ΕΔͨͼʹ Ͱ͖Δ͚ͩϓϨθϯ • ͦΕ͕͖͔͚ͬͰʜ
ࡶࢽͷಛूهࣄΛॻ͘͜ͱʹ • 8&# %#1SFTTWPM • ʮ࡞ֶͬͯͿσʔλՄࢹԽʯ
ࢀՃ͢ΔϝϦοτ • ৽ٕज़ΛΔɾษڧ͢Δ͖͔͚ͬʹͳΔ • ٕज़ʹͱ͕ͬͨਓͱΓ߹͑Δ • खΛ্͛Ε͕ࣗൃදͰ͖Δ • ͦͷؾʹͳΕੈք͕͕Δ
ੋඇࢀՃ͍ͯͩ͘͠͞ʂ
l)5.-zͰͰ͖Δ͜ͱ
)5.-ͱl)5.-z • l)5.-zͱͯᐆດͳݴ༿ • Ͳ͔͜Β͕)5.-ͳͷʁ • Ͳ͜·Ͱ͕)5.-ͳͷʁ
ڱٛͷ)5.- • )5.-ͷ࣍ͷόʔδϣϯ • ϚʔΫΞοϓݴޠͱͯ͠ͷ༷ • ৽͍͠λάʗཁૉ͕Ճ
ٛͷl)5.-z • ϦονΠϯλʔωοτΞϓϦέʔγϣϯ 3*" ࣮ݱͷͨΊͷ༷ʑͳ༷܈ • ʮ)5.-ؔ࿈ٕज़ʯͱݺΕΔ • ຊϓϨθϯͰl)5.-zͱදه
͍͔ͭΒ͑Δl)5.-z • "͏͑Δ • ֤ϒϥβ͕ஈ֊తʹରԠ • *OUFSOFU&YQMPSFSҠߦ • .P[JMMB'JSFGPYҠߦ •
(PPHMF$ISPNFҠߦ • 4BGBSJҠߦ
l)5.-zͰͰ͖Δ͜ͱ • ϚʔΫΞοϓฤ • දݱฤ • +BWB4DSJQU"1*ฤ • εϚϗΞϓϦฤ
ϚʔΫΞοϓฤ
γϯϓϧͳϚʔΫΞοϓ • ΑΓγϯϓϧͳλάͰ)5.-͕ هड़Ͱ͖ΔΑ͏ʹ ˠ੍࡞ɾ։ൃޮΞοϓˢ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ TR/html4/loose.dtd"> !
! ! <!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> ! ! ! <meta charset="UTF-8">
<style type=”text/css”>...</style> <script type=”text/javascript”>...</script> ! ! ! <style>...</style> <script>...</script>
ηϚϯςΟοΫͳϚʔΫΞοϓ • <div>ཁૉ • ίϯϐϡʔλ͕ҙຯΛղऍ͢Δͷ͕͍͠ • <article>, <section>ཁૉͳͲΛ ͏͜ͱͰ •
ίϯϐϡʔλ͕ҙຯΛղऍͰ͖ΔΑ͏ʹ • εΫϦʔϯϦʔμݕࡧΤϯδϯ͕ ߴػೳʹ
<article>ཁૉ • lهࣄzΛϚʔΫΞοϓ • 344ϑΟʔυʹؚΊͨͱ͖ʹ̍ͭͷهࣄͱͯ͠ Γཱͭ୯Ґ • ྫʣ • ϒϩάͷΤϯτϦ
<article> <h1>ແమ๒ͰϥʔϝϯΛ৯͖ͯͨ</h1> <p>ແੑʹϥʔϝϯ͕৯͍ͨͱࢥ͍ɾɾɾ</p> <p>େߦྻ͕Ͱ͖͚ͯͨͲΊ͛ͣʹฒΜͰɾɾɾ</p> ... </article>
<section>ཁૉ • จষͷlηΫγϣϯzΛϚʔΫΞοϓ • ྫʣ • จষʹ͓͚Δzষz
<section> <h1>1ষ ͡Ίʹ</h1> <p> ... </p> </section> <section> <h1>2ষ എܠ</h2>
<p> ... </p> </section>
දݱฤ
$44 • 8FCϖʔδ্ͰϦονͳදݱΛ࣮ݱ͢Δ ͨΊͷ༷ʑͳϓϩύςΟ͕Ճ͞Εͨ • ը૾εΫϦϓτ͕ඞཁͩͬͨදݱ ˠελΠϧγʔτ͚ͩͰ࣮ݱՄೳʹ
০ܥϓϩύςΟ • border-radius • ؙ֯ • box-shadow, text-shadow • υϩοϓγϟυ
.box { box-shadow: 2px 2px 2px rgba(0,0,0,0.2); border-radius: 3px; }
ࢀߟɿζϧ͍σβΠϯ ζϧ͍σβΠϯʢʣɿCPYTIBEPXͰදݱ͢Δɺʮηϛϑϥοτʯͳζϧ͍σβΠϯςΫχοΫ ˏ*5 IUUQXXXBUNBSLJUDPKQBJUBSUJDMFTOFXTIUNM
ΞχϝʔγϣϯܥϓϩύςΟ • transition • $44ϓϩύςΟʹΑΔঢ়ଶͷมԽΛ Ξχϝʔγϣϯ • animation • ΩʔϑϨʔϜΞχϝʔγϣϯ
.box { background-color: red; transition: background-color 1s; } .box:hover {
background-color: blue; }
.box { animation: an-animation 2s infinite; } @keyframes an-animation {
0%, 100% { left: 0px; } 50% { left: 100px; } }
ࢀߟɿ̑ͰΘ͔Δ$44ͷάϥϑΟοΫεػೳ ʮͰΘ͔Δ$44ͷάϥϑΟοΫεػೳʯαϯϓϧ IUUQXXXBUNBSLJUDPKQGXDSEFTJHOCFOLZPXFCHSBQIJDTTBNQMFIUNM
8FC'POUT • ϑΥϯτΛ8FC͔Βμϯϩʔυ͠ ϒϥβͰදࣔ͢Δٕज़ • Πϯετʔϧ͞Ε͍ͯͳ͍ϑΥϯτ͕ ར༻Մೳ • ը૾จࣈ͕ඞཁͩͬͨදݱ ˠ$44ͷΈͰ࣮ݱՄೳʹ
@font-face { font-family: kadoppeFont; src: url(kadoppe.woff) } .box { font-family:
kadoppeFont; }
ศརɿ(PPHMF'POUT (PPHMF'POUTIUUQXXXHPPHMFDPNGPOUT
ศརɿ'0/51-64 '0/51-64ʛϑΥϯτϓϥεIUUQXFCGPOUGPOUQMVTKQ
άϥϑΟοΫඳըػೳ • $BOWBT • ϏοτϚοϓը૾ • *OMJOF47( • ϕΫλʔը૾ •
8FC(- • %άϥϑΟοΫ
<canvas id="canvas" width="150" height="150"></canvas> <script> ! 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); </script>
<svg width="150" height="150"> ! <circle r="50" cx="75" cy="75" /> </svg>
σϞ5IF4IPEP 5IF4IPEPIUUQXXXUIFTIPEPDPN
ࣄྫ4IBSF8JT ແྉֶशαΠτ4IBSF8JTIUUQTIBSFXJTDPN
ࣄྫ)FMMP3BDFS )FMMP3BDFSä8FC(-IUUQIFMMPSBDFSDPNXFCHM
+BWB4DSJQU"1*ฤ
(FPMPDBUJPO"1* • ϢʔβͷҐஔใΛѻ͏ͨΊͷ"1* • 8FCΞϓϦέʔγϣϯ͕ϢʔβͷॴΛ Δ͜ͱ͕Մೳʹ
navigator.geolocation.getCurrentPosition(function(position) { console.log(position.coords.latitude); // Ң console.log(position.coords.longitude); // ܦ });
ࣄྫ(PPHMF.BQ
MPDBM4UPSBHF • ϒϥβʹσʔλΛอଘ • ͋ͱͰऔΓग़ͯ͠༻Մೳ • ΦϑϥΠϯར༻Մೳͳ8FCΞϓϦ͕ ࣮ݱՄೳ
window.localStorage.setItem(‘food’, ‘ϥʔϝϯ’); console.log( window.localStorage.getItem(‘food’) );
'JMF"1* • ίϯϐϡʔλ্ͷϑΝΠϧΛಡΈࠐΉͨ Ίͷ"1* • ༻ྫɿ͜͜ʹϑΝΠϧΛυϩοϓ +BWB4DSJQUͰͷϩʔΧϧϑΝΠϧͷಡΈࠐΈ)5.-3PDLT IUUQXXXIUNMSPDLTDPNKBUVUPSJBMTpMFEOEpMFT
8FC"VEJP"1* • Իͷੜ • ϑΟϧλʔॲཧ • ߴਫ਼ͷ࠶ੜλΠϛϯά੍ޚ • ༻ྫɿ •
ήʔϜ • γϯηαΠβʔ
ࣄྫ"OHSZ#JSET "OHSZ#JSET$ISPNFIUUQDISPNFBOHSZCJSETDPN
εϚϗΞϓϦฤ
1IPOF(BQ • εϚʔτϑΥϯ༻ωΠςΟϒΞϓϦ։ൃϑ ϨʔϜϫʔΫ • J04 "OESPJE 8JOEPXT1IPOF • l)5.-zؔ࿈ٕज़Λ͔ͭͬͯ։ൃ
• )5.- • $44 • +BWB4DSJQU
ࣄྫɿ.Z)FBSU$BNFS 1IPOF(BQc.Z)FBSU$BNFSBIUUQQIPOFHBQDPNBQQNZIFBSUDBNFSB
ୈ̏ͷϞόΠϧ04 • J04"OESPJEʹ͙࣍ୈͷ04 • 'JSFGPY04 • 5J[FO • ϓϥοτϑΥʔϜ͕ΞϓϦ͕ l)5.-zͰ࣮͞Ε͍ͯΔ
'JSFGPY04 ;5&0QFO1PXFSFECZ'JSFGPY04(6OMPDLFE4NBSUQIPOF0SBOHFF#BZ&YDMVTJWFcF#BZ IUUQXXXFCBZDPNJUN
5J[FO 6SCBO"JSTIJQ5BLFTUIF4UBHFBUUIF5J[FO%FWFMPQFS$POGFSFODF IUUQVSCBOBJSTIJQDPNCMPHVSCBOBJSTIJQUBLFTUIFTUBHFBUUIFUJ[FO EFWFMPQFSDPOGFSFODF
l)5.-zʹ͍͍ͭͯͨ͘Ίʹ
্͍͍ͭͯ͘Ͱͷ • ٕज़͕͗͢Δɾଟ͗͢Δ • ৽ٕज़͕ͲΜͲΜొ͢Δ • "1* • େྔͷ+BWB4DSJQUϥΠϒϥϦ •
#BDLCPOFKT %KT 5ISFFKT ̋̋KT
Ͳ͏͢Εʜ ɾТɾʆ
̍ɽͱʹ͔͘ڵຯΛ࣋ͭ
̎ɽͱʹ͔͘ίʔυΛॻ͘
ͰɺίʔυΛॻ͘ͷ ͔͔࣌ؒΔΑʜ ɾТɾʆ
͏खΕʁؒʹ߹Θͳ͍ʁ ɾТɾʆ
̏ɽߴʹίʔυΛॻ͜͏
ͦ͜Ͱ
:FPNBO͍͚ͭʂ ߴ8FCΞϓϦ։ൃ
:FPNBO • 8FC։ൃʹؔΘΔ໘ͳ͜ͱΛ ࣗಈԽͯ͘͠ΕΔπʔϧ • ίʔυΛॻ͘લͷ४උ • ίʔυΛॻ͍͍ͯΔ࣌ͷ࡞ۀ • ίʔυΛॻ͖ऴΘͬͨ͋ͱͷ࡞ۀ
:FPNBOͷߏཁૉ
:P • :FPNBOͷϓϩδΣΫτΛੜ • ༷ʑͳͻͳܗ͕ެ։͞Ε͍ͯΔ • XFCBQQҰൠతͳΣϒΞϓϦ༻ • CBDLCPOF#BDLCPOFKT༻ •
DISPNFBQQ$ISPNF8FC4UPSF༻
(SVOU • ͞·͟·ͳ࡞ۀΛࣗಈԽ • ։ൃ༻αʔόͷىಈ • ϑΝΠϧߋ৽ͷࢹ • ࣗಈςετ •
ϦϦʔε࡞ۀ
#PXFS • +BWB4DSJQUϥΠϒϥϦͷύοέʔδཧ • ݕࡧ • Πϯετʔϧ • Ξοϓσʔτ •
ґଘؔͷࣗಈղܾ
࣮ࡍʹ͔ͭͬͯΈΔ
खॱ • ඞཁͳπʔϧͷ४උ • ϓϩδΣΫτͷ࡞ • αʔόͷىಈ • ίʔυΛॻ͘ •
ϦϦʔε
ඞཁͳπʔϧͷ४උ • 8FCϒϥβ • ςΩετΤσΟλ • ීஈ͍ͬͯΔͷ • λʔϛφϧʢ௨শɿࠇ͍ը໘ʣ •
OPEFKT
OPEFKT • αʔόαΠυ+BWB4DSJQU࣮ߦڥ • ৄ͍͜͠ͱΒͳͯ͘0, • Πϯετʔϧ • QLHϑΝΠϧΛμϯϩʔυ͢Δͷ͕؆୯ IUUQOPEFKTKQOPEFKTPSH@KBEPDTW
:FPNBOͷΠϯετʔϧ $ npm install -g yo grunt-cli bower generator-webapp $Λআ͍ͨ෦Λ
λʔϛφϧͰೖྗͯ͠&/5&3
ϓϩδΣΫτͷ࡞ $ cd /Users/kadoppe/Source/hello-yeoman $ yo webapp
ͻͳܗʹԿΛؚΊΔ͔ਘͶΒΕΔ ͱΓ͋͑ͣ&OUFSΛೖྗ
৭ʑΠϯετʔϧ͞ΕΔ ͱΓ͋͑ͣͭ
ੜ͞ΕΔϓϩδΣΫτ • BQQˡ8FCΞϓϦͷίʔυ͜ͷத • CPXFSKTPO • (SVOUpMFKT • OPEF@NPEVMFT •
QBDLBHFKTPO • UFTU
BQQσΟϨΫτϦͷத • IUNM • CPXFS@DPNQPOFOUT • JNBHFTը૾ϑΝΠϧΛஔ • JOEFYIUNM •
SPCPUTUYU • TDSJQUT+BWB4DSJQUϑΝΠϧΛஔ • TUZMFT$44ϑΝΠϧ
ಋೖ͞Ε͍ͯΔϑϨʔϜϫʔΫɾϥΠϒϥϦ • )5.-#PJMFSQMBUF • .PEFSOJ[S • 3FRVJSF+4 • #PPUTUSBQ
)5.-#PJMFSQMBUF • )5.-Ͱ8FC੍࡞Λߦ͏ͱ͖ͷ ϕετϓϥΫςΟεΛूΊͨςϯϓϨ • /PSNBMJ[FDTT • (PPHMF"OBMZUJDTಋೖ༻λά • *&ରԠ
• ৄ͘͠ެࣜΛݟ͍ͯͩ͘͞ IUUQIUNMCPJMFSQMBUFDPN
)5.-#PJMFSQMBUF • )5.-Ͱ8FC੍࡞Λߦ͏ͱ͖ͷ ϕετϓϥΫςΟεΛूΊͨςϯϓϨ • /PSNBMJ[FDTT • (PPHMF"OBMZUJDTಋೖ༻λά • *&ରԠ
.PEFSOJ[S • ϒϥβ͕αϙʔτ͍ͯ͠Δ)5.-ɾ $44ͷػೳΛࣗಈݕग़ • <html>ཁૉͷclassଐੑʹ αϙʔτঢ়گΛग़ྗͯ͘͠ΕΔ • $44+BWB4DSJQUͰॲཧΛذ ͢Δͷʹศར
<html class=“js canvas canvastext no-geolocation rgba hsla multiplebgs borderimage borderradius
boxshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions video audio localstorage sessionstorage webworkers applicationcache fontface”>
3FRVJSF+4 • +BWB4DSJQUͰ֎෦+BWB4DSJQUϑΝΠϧ ͷಡΈࠐΈΛ࣮ݱ͢ΔϥΠϒϥϦ • $ݴޠͰ͍͏JNQPSU • େنͳ+BWB4DSJQUϓϩάϥϜΛ ॻ͘ͱ͖ʹศར
#PPUTUSBQ • ༗໊ͳ$44ϑϨʔϜϫʔΫ • ͋Β͔͡Ίఆٛ͞ΕͨDMBTTΛཁૉʹ ઃఆ͢Δ͚ͩͰྑ͍ײ͡ͷσβΠϯʹ • σβΠϯྗ͕ͳ͍ͱ͖ʹศར
αʔόͷىಈ $ grunt server
αʔό͕ىಈ͠ ϒϥβʹϖʔδ͕ ࣗಈతʹදࣔ͞ΕΔ
ίʔυΛॻ͘ • ςΩετΤσΟλͰࣗ༝ʹίʔυΛฤू • )5.-ɿJOEFYIUNM • +BWB4DSJQU • NBJOKTɿઃఆؔͷίʔυ •
BQQKTɿΞϓϦέʔγϣϯͷίʔυ • $44ɿNBJOTDTT
-JWF3FMPBE • ϑΝΠϧΛมߋͨ͠Βࣗಈతʹϒϥβ Λߋ৽ͯ͘͠ΕΔΈ • ʮΤσΟλˠอଘˠϒϥβˠߋ৽ˠʯ ͷख͕ؒେ෯ʹܰݮ
+BWB4DSJQUϥΠϒϥϦΛಋೖ $ bower install d3.js
require.config({ paths: { d3: '../bower_components/d3/d3' }, shim: { d3: {
exports: 'd3' } } }); NBJOKTʹ͓·͡ͳ͍Ճ ˞3FRVJSF+4ͷ%KTಡΈࠐΈઃఆ
define(['d3'], function (d3) { }); BQQKTʹ͓·͡ͳ͍Ճ ˞3FRVJSF+4ͷ%KTಡΈࠐΈઃఆ
define(['d3'], function (d3) { }); BQQKTʹ͓·͡ͳ͍Ճ ˞3FRVJSF+4ͷ%KTಡΈࠐΈઃఆ
͞Βʹ։ൃΛߴԽ • $P⒎FF4DSJQUΛ͏ • ίϯύΠϧ͢Δͱ+BWB4DSJQUʹͳΔݴޠ • ಉ͜͡ͱΛΑΓγϯϓϧʹ࣮ݱͰ͖Δ • 4BTTʢ4$44ʣΛ͏ •
ίϯύΠϧ͢Δͱ$44ʹͳΔݴޠ • มNJYJOʢؔʣɺೖΕࢠߏ͕Մೳ
$.click(function () { console.log(‘clicked’); }); ! ! ! $.click ->
console.log ‘clicked’
.wrapper .inner a { text-decoration: none; } .wrapper .inner a:hover
{ text-decoration: underline; } ! ! ! .wrapper { .inner { a { text-decoration: none; &:hover { text-decoration: underline; } } } }
ϦϦʔε $ grunt build
ϦϦʔε࣌ʹͬͯ͘ΕΔ͜ͱ • +BWB4DSJQUͱ$44ͷ࠷దԽ • ݁߹ͱѹॖ • ը૾ͷ࠷దԽ • ϦϦʔεʹඞཁͳϑΝΠϧͷΈΛ EJTUσΟϨΫτϦʹҠಈ
·ͱΊ • l)5.-z͏͑ΔʗΘΕ͍ͯΔ • ٕज़ͷൣғɾछྨ͕ଟ͍͍͗ͯͭͯ͘͢ ͷ͕େม • ڵຯΛ࣋ͬͯͱʹ͔͘ίʔυΛॻ͘͜ͱ ͕ॏཁ •
:FPNBOͰ։ൃɾֶशޮΞοϓ
·ͩؒʹ߹͏ʂ ͍͚ͭΔʂ
͓͠·͍