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
170
まだ間に合う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
920
未知の顧客にとっても価値あるプロダクトを生み出す
kadoppe
2
1.9k
プレイド開発チームにおけるチーム・ジャーニー ver.202010
kadoppe
4
1k
不確実性の高い世界のなかで、非連続な成長を生み出す / Developers Summit 2020 Summer
kadoppe
1
2k
プレイド開発チームにおけるチーム・ジャーニー
kadoppe
12
7.3k
プレイドのエンジニアからみた「正しいものを正しくつくる」
kadoppe
0
2.2k
フラット型組織におけるエンジニアリングマネジメント
kadoppe
1
1.4k
Pebble + JavaScriptでつくるスマートウォッチ
kadoppe
0
230
Firefox OSでSVGをつかってみた
kadoppe
0
140
Other Decks in Technology
See All in Technology
Rustから学ぶ 非同期処理の仕組み
skanehira
1
140
Firestore → Spanner 移行 を成功させた段階的移行プロセス
athug
1
490
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
300
DevIO2025_継続的なサービス開発のための技術的意思決定のポイント / how-to-tech-decision-makaing-devio2025
nologyance
1
410
Platform開発が先行する Platform Engineeringの違和感
kintotechdev
4
580
要件定義・デザインフェーズでもAIを活用して、コミュニケーションの密度を高める
kazukihayase
0
120
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
1.1k
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
470
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
22
12k
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
170
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
180
なぜスクラムはこうなったのか?歴史が教えてくれたこと/Shall we explore the roots of Scrum
sanogemaru
5
1.6k
Featured
See All Featured
The Language of Interfaces
destraynor
161
25k
Making Projects Easy
brettharned
117
6.4k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
RailsConf 2023
tenderlove
30
1.2k
Being A Developer After 40
akosma
90
590k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
For a Future-Friendly Web
brad_frost
180
9.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Context Engineering - Making Every Token Count
addyosmani
3
51
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Six Lessons from altMBA
skipperchong
28
4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
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Ͱ։ൃɾֶशޮΞοϓ
·ͩؒʹ߹͏ʂ ͍͚ͭΔʂ
͓͠·͍