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
130
まだ間に合う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
550
未知の顧客にとっても価値あるプロダクトを生み出す
kadoppe
2
1.6k
プレイド開発チームにおけるチーム・ジャーニー ver.202010
kadoppe
4
890
不確実性の高い世界のなかで、非連続な成長を生み出す / Developers Summit 2020 Summer
kadoppe
1
1.7k
プレイド開発チームにおけるチーム・ジャーニー
kadoppe
12
4.9k
プレイドのエンジニアからみた「正しいものを正しくつくる」
kadoppe
0
1.9k
フラット型組織におけるエンジニアリングマネジメント
kadoppe
1
1.2k
Pebble + JavaScriptでつくるスマートウォッチ
kadoppe
0
190
Firefox OSでSVGをつかってみた
kadoppe
0
95
Other Decks in Technology
See All in Technology
強みを伸ばすキャリアデザイン
yug1224
0
200
Signals Unleashed: The Full Guide
rainerhahnekamp
0
350
AWS を使う上で知っておきたいオンプレミス知識/aws-on-premise-essentials
emiki
1
4.1k
Apple Vision Pro trial session
akkeylab
0
120
Let's get started with Ruby && Rails Tips
sinsoku
0
190
入社後初めてのタスクでk8sアップグレードした話.pdf
kkato1
0
370
少数チームで挑む: SwiftUI, TCA, KMPを用いた 新規動画配信アプリ 「ABEMA Live」の開発について
tomu28
0
480
Algyan イベント振り返り
linyixian
0
170
[PlatformCon 24] Platform Orchestrators: The Missing Middle of Internal Developer Platforms?
danielbryantuk
0
160
プロダクト開発における ソフトウェアサプライチェーンセキュリティ: 実践的フレームワークとその活用 / Software Supply Chain Security in Product Development: Practical Framework and their applications
nttcom
1
310
次世代Web認証「パスキー」 / mo-zatsudan-passkey
nkzn
22
13k
AIQ株式会社 エンジニア向け会社紹介資料
aiqlab
0
340
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
237
11k
The Invisible Customer
myddelton
114
12k
VelocityConf: Rendering Performance Case Studies
addyosmani
319
23k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
51k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
Code Reviewing Like a Champion
maltzj
513
39k
Imperfection Machines: The Place of Print at Facebook
scottboms
258
12k
jQuery: Nuts, Bolts and Bling
dougneiner
58
7.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.3k
The Cost Of JavaScript in 2023
addyosmani
13
3.8k
Building an army of robots
kneath
300
41k
Building Applications with DynamoDB
mza
88
5.6k
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Ͱ։ൃɾֶशޮΞοϓ
·ͩؒʹ߹͏ʂ ͍͚ͭΔʂ
͓͠·͍