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
670
未知の顧客にとっても価値あるプロダクトを生み出す
kadoppe
2
1.7k
プレイド開発チームにおけるチーム・ジャーニー ver.202010
kadoppe
4
930
不確実性の高い世界のなかで、非連続な成長を生み出す / Developers Summit 2020 Summer
kadoppe
1
1.8k
プレイド開発チームにおけるチーム・ジャーニー
kadoppe
12
5.5k
プレイドのエンジニアからみた「正しいものを正しくつくる」
kadoppe
0
1.9k
フラット型組織におけるエンジニアリングマネジメント
kadoppe
1
1.2k
Pebble + JavaScriptでつくるスマートウォッチ
kadoppe
0
190
Firefox OSでSVGをつかってみた
kadoppe
0
99
Other Decks in Technology
See All in Technology
JBUG岡山 #6 WordCamp男木島の チームビルディング
takeshifurusato
0
150
楽しくGoを学び合う、LayerXの勉強会文化 / LayerX's study culture of having fun and learning Go together
ar_tama
2
350
推薦システムを本番導入する上で一番優先すべきだったこと~NewsPicks記事推薦機能の改善事例を元に~
morinota
0
120
Azure Pipelinesを使用したCICDベースラインアーキテクチャ実践
yuriemori
0
190
年間一億円削減した時系列データベースのアーキテクチャ改善~不確実性の高いプロジェクトへの挑戦~
lycorptech_jp
PRO
3
2.9k
20240724_cm_odyssey_hibiyatech
hiashisan
0
110
Github Actions 로 Android 팀의 효율성 극대화
hadonghyun
0
160
E2Eテスト自動化プラットフォームにおけるAIの活用
shift_evolve
0
180
コンテナ・K8s研修 - 前半 コンテナ基礎・ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
エンジニアリングマネージャーはどう学んでいくのか #devsumi / How Do Engineering Managers Continue to Learn and Grow?
expajp
4
1.3k
運用改善、不都合な真実 / 20240722-ssmjp-kaizen
opelab
17
8k
LLMアプリケーションの評価の実践と課題 ~PharmaXにおける今後の展望~
pharma_x_tech
2
160
Featured
See All Featured
Design by the Numbers
sachag
277
18k
Building Effective Engineering Teams - LeadDev
addyosmani
47
2.2k
4 Signs Your Business is Dying
shpigford
178
21k
Designing the Hi-DPI Web
ddemaree
276
34k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
26
2.1k
Being A Developer After 40
akosma
72
580k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
Practical Orchestrator
shlominoach
185
10k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
18
1.2k
The Pragmatic Product Professional
lauravandoore
29
6.1k
Thoughts on Productivity
jonyablonski
64
4.1k
A better future with KSS
kneath
231
17k
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Ͱ։ൃɾֶशޮΞοϓ
·ͩؒʹ߹͏ʂ ͍͚ͭΔʂ
͓͠·͍