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
Keep a distance from jQuery
Search
Kusamao Abe
June 07, 2018
Programming
0
130
Keep a distance from jQuery
At jam plus #01
https://kfug.connpass.com/event/87799/
Kusamao Abe
June 07, 2018
Tweet
Share
More Decks by Kusamao Abe
See All by Kusamao Abe
Vue builds
kusamao
1
500
Javascript in the past and now
kusamao
1
170
The Essence of UI Design
kusamao
1
1.9k
Make good (better) form
kusamao
0
250
Making mock-up in web application
kusamao
0
94
Using Heroku on entrusted development
kusamao
0
1.1k
Other Decks in Programming
See All in Programming
はじめてのMaterial3 Expressive
ym223
2
260
速いWebフレームワークを作る
yusukebe
5
1.7k
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
1
190
今から始めるClaude Code入門〜AIコーディングエージェントの歴史と導入〜
nokomoro3
0
100
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
250
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
440
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
280
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.8k
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
私の後悔をAWS DMSで解決した話
hiramax
4
210
時間軸から考えるTerraformを使う理由と留意点
fufuhu
15
4.7k
AWS発のAIエディタKiroを使ってみた
iriikeita
1
180
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
KATA
mclloyd
32
14k
RailsConf 2023
tenderlove
30
1.2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Designing for humans not robots
tammielis
253
25k
Into the Great Unknown - MozCon
thekraken
40
2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Transcript
jQueryͱͷ ͓͖߹͍ͷํ 2018/06/07 jam plus #01 at tambourine commune
ࣗݾհ גࣜձࣾλϯόϦϯ ςΫχΧϧσΟϨΫλʔWebΤϯδχΞ ҆෦ຑੜKusamao Abe
Έͳ͞Μ͕͡Ίͯ৮ͬͨ ϒϥβԿͰ͔ͨ͠
IUUQTXXXXPSH1FPQMFNJNBTBUFTUPCKFDU.BD*&
Internet Explorer 5.1
࣌ͷMac OSͷ σϑΥϧτϒϥβͰͨ͠
ࠓͰݏΘΕऀͷIEͪΌΜ w ࣌HTML4.0PNGରԠɺECMA४ڌͳͲɺ ඪ४ԽΛਐΊΔΠΠϠπ w Netscapeॏ͍ͯ͘ʹͳΒͳ͔ͬͨͷͰɺ ࣮࣭Ұ w ˞Flash͕ݸ͋ΔͱϑϦʔζͨ͠Γ͚ͨ͠Ͳʜʜ w
˞Win IEͱผͩͬͨ ʢϨϯμϦϯάΤϯδϯ͕ҧͬͨʣ
࣌มΘΔ
มԽʹ͍͍͚ͭͯͳ͘ͳͬͨͱ͖ɺ औΓ͞Εͯ͠·͏ʜʜ
lϑϩϯτΤϯυͷٕज़ͷ਼ૣ͗͢Δz lͲ͏͙ͤ͢Խ͢Δ͠ർΕͨz
None
ʮ͑ͬɺjQueryͬͯΔ͚Ͳɺ Reactͬͨ΄͏͕͍͍ͷ͔ͳ͋ʜʜʯ
৽͍ٕ͠ज़Λ৮Δͷ ୯७ʹΠΠͷͰΦεεϝʂ
Ͱɺ͜͏͍͏ʮڧ͍ʯݴ༿Ͱ ෆ҆ʹͳΔͷ͠ΜͲ͘ͳ͍ʁ
jQuery͕ඞཁͩͬͨ࣌ w ϒϥβؒࠩҟ͕ ͳ͔ͬͨ w ඪ४ԽϚδཔΉΑʂ
࣌ਐΈɺ Web͕Ͱ͖Δ͜ͱଟछଟ༷ʹ
Web͕ࠓͷΑ͏ʹ͘։͔Εɺ اۀݸਓ͕WebαΠτΛ࣋ͭͳΜͯ WWWͷظ΄ͱΜͲ୭৴͡ͳ͔ͬͨ
ಉ͡Α͏ʹɺWebͰ௨ൢͨ͠Γɺ ௨͢ΔͳΜ͖ͯͬͱເޠͩͬͨ
ࠓWebΞϓϦέʔγϣϯΛ Θͳ͍ͳ͍
Ͱɺ;ͭ͏ͷWebαΠτ੍࡞ ʢ͍·ͩʹʣͳ͘ͳΒͳ͍
গ͚ͩ͠ɺ Θͨ͠ͷੲΛʜ
Θͨ͠ͱJavaScriptͱͷؔΘΓ ʙɹझຯͰͬͯͨࠒ ίϐϖϚϯ ɹWebܥϕϯνϟʔͰΞϧόΠτ jQueryͱͷग़ձ͍ ɹWebܥϕϯνϟʔೖࣾ w ϚʔΫΞοϓۀ͔ΒϑϩϯτΤϯυΤϯδχΞʹ w Express
Browserify Backbone.jsͰͷ αʔόαΠυϨϯμϦϯά SPA
Backbone.js w jQueryΛ͏·͍͜ͱΫϥΠΞϯταΠυMVCʹدͤͨΑ͏ͳϑϨʔϜ ϫʔΫ w ຖճrenderͰॻ͖͑ΒΕΕ͍͍͚Ͳ݁ߏDOMΛ͍ͬͯ͡ঢ়ଶΛ ཧ͢ΔͷͰ͍ͨΜ w ϦΞϧλΠϜόϦσʔγϣϯͷͨΊʹ.on͠·͘ΔΈ͍ͨͳͷ͕͋Δ
ࠓͷձࣾʹೖͬͯ w SPAҊ݅ͰAngular1.xܥ w vue.js࣮Ҋ݅Ͱͬͯͳ͍͕ษڧձग़ͨΓΠϯλʔϯͱҰॹʹ ͬͨΓ w LaravelɾWordPress w ;ͭ͏ͷϚʔΫΞοϓۀ
Angular.js 1.x w ϦΞϧλΠϜόϦσʔγϣϯͷѹతָ͞ w SFOEFSࣗͰॻ͔ͳ͍͍ͯ͘ͷʂʁ w ͱʹ͔͘σΧ͍4DPQFʢ7JFX.PEFMʣΛྔ࢈ɺ݁ہσʔλͷঢ়ଶΛ Ѳ͠ͳ͍ͱಡΊͳ͍Έ͍ͨʹͳΓ͕ͪͩͬͨ
ݸਓɾαʔΫϧͷαΠτ αʔόαΠυ WebΞϓϦέʔγϣϯ γϯάϧϖʔδ ΞϓϦέʔγϣϯ
ϚʔΫΞοϓ ˣ ϑϩϯτΤϯυ ˠ8FCΤϯδχΞ ˠςΫχΧϧσΟϨΫλʔ
WebΞϓϦέʔγϣϯ࡞ऀͱɺ WebαΠτ࡞ऀͷؒʹ͕ࠩ͋Δ
IUUQTXXXMJHIUOJOHEFTJHOTZTUFNDPN ελΠϧΨΠυ BEM FLOCSS OOCSS CSSઃܭ Ξχϝʔγϣϯɾ ΠϯλϥΫγϣϯઃܭ WAI-ARIA ΞΫηγϏϦςΟ
ϚʔΫΞοϓدΓͷઃܭ
ϑϩϯτΤϯυΤϯδχΞͰ ͜͜ʹ৮Βͳ͍ͻͱ͍Δʢଟʣ
Reactͱ͔vue.jsͱ͔ݴ͏͚Ͳ͋͞ w ͦΒ৽͍͜͠ͱΛΔͷ͍͍͜ͱ w ͕ͩɺશ෦ͷਓ͕͍·͙͢jQueryΛΊͨ΄͏͕͍͍Έ͍ͨͳ͡Ό ͳ͍ w ϑΥʔϜ͕͋ΔίʔϙϨʔταΠτͰͪΐͬͱָʹ࡞Δͷʹ͋ͬͨΒ ศར͚ͩͲjQueryͰΪϦ͍͚ΔΜͩΑͳʙ w
ͨͩɺنͷൺֱతେ͖͍WebΞϓϦέʔγϣϯ੍࡞ͰjQueryͰؤு Δͷ͙͢ʹࢮ͕͍ͬͯΔ
Ͱɺ࣌มΘΔ ʢ࠶ܝʣ
ͪΐͬͱͨ͠αΠτ੍࡞ͳΒjQueryͰ͍͍ ˣ ͦͦjQuery͢Β͍Βͳ͍͕࣌དྷͦ͏ʂ
ຊͰ͢ɻ
“You don’t need jQuery.” ˠඞཁͳ͍ɺͳͯ͘Ͱ͖Δ ʢ͜ͱ͕͋Δʣ
“write less, do more”
هड़ྔ૿͑·͢
ଟ͍͚Δ w άϩʔόϧϝχϡʔͷυϩοϓμϯϦετ։ด w ϞʔμϧμΠΞϩά w εϜʔζεΫϩʔϧʢΞϯΧʔϦϯΫͷͭʣ
.on(event, handler()) w ΊͬͪΌΑ͘ॻ͘ͷͰ w .clickͱ͔.loadͱ͔.resize݁ہ͜Εͱಉ͜͡ͱ w Ұճ͚ͩͳΒ.oneͱ͔֎͢ͳΒ.offͱ͔
eventTarget.addEventListener(type, listener[, option])
͍
.addEventListener() w WindowElementɺ΄͔ʹXMLHttpRequestͱ͔ʹੜ͑ͯΔ w ୈҰҾͷtypejQueryͷ.onͱಉ͡ͰΠϕϯτͷ໊લ w ୈೋҾͷlister͕jQueryͷhandlerͱಉ͡ίʔϧόοΫ w ୈࡾҾͷΦϓγϣϯͰonce: trueΛ͢ͱճಈ͍ͨΒফ͑Δ
.addEventListener() w listnerΛؔʹͨ͠߹ɺҾEventͷΠϯλʔϑΣʔεΛ࣋ͭ ΦϒδΣΫτ w jQueryͷhandlerͰͬͯ͘ΔeventͱࣅͯඇͳΔͷ ˞isinstanceofͰݟΔͱjQueryͷeventEventΛܧঝ͍ͯ͠ͳ͍ w Ͱ͋Β͔ͨ͏ͷಉ͡ɻ preventDefault()currentTarget͋Γ·͢
$( selector ) w Կؾͳͬͯ͘ΔDOMͷऔಘ w ηϨΫλʹ߹க͢ΔͷΛʮͯ͢ʯऔಘ͢Δ w .each͢Δ͜ͱ͋ΕҰׅͰॲཧͰ͖Δ͜ͱ w
ෳ͔Ͳ͏͔ҙࣝͯ͠ͳ͘ͳ͍Ͱ͔͢
• getElementById() • getElementsByClassName() • getElementsByTagName()
͍͑͑·ͩΔ͍ͬ͜͠
document.querySelector() document.querySelectorAll()
document.querySelector() w ηϨΫλʹ߹க͢Δʮ࠷ॳͷʯDOMʢElementʣΛฦ͢ w ηϨΫλ͕͓͔͍͠ͱྫ֎Λు͘ w Ұக͠ͳ͍߹nullฦ٫
document.querySelectorAll() w ηϨΫλʹ߹க͢Δʮͯ͢ͷʯDOMʢNodeListʣΛฦ͢ w ηϨΫλ͕͓͔͍͠ͱྫ֎Λు͘
NodeList Array͡Όͳ͍͚Ͳfor ofΛ͏ͱElement͝ͱͷॲཧ͕Ͱ͖Δ Arrayʹม͔ͨͬͨ͠Β͜Ε
ࢠଙཁૉʹ͝ҙ ͜ͷHTMLʹରͯ͠ ͜͏͢ΔͱinnerEmphasisͷLengthʜʜ0ʁ
Ͱ͢ IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC"1*%PDVNFOURVFSZ4FMFDUPS"MM
K2VFSZʹൺͨΒهड़ྔଟ͍͠ ࡉ͔͍ҧ͍ଟ͍͠ ϝιουͨ͘͞ΜΔඞཁ͋ͬͯ ͩΔ͘ͳ͍ʁ
Θ͔Δ
Ͱͳͥࢲ͕͜Μͳ͜ͱΛ ͍ͬͯΔͷ͔
jQueryΛͬͯͯ͜ͷهड़Λॻ͚Δ jQueryΛॻ͍͔ͯΒಉ͜͡ͱΛ͢ΔίʔυΛॻ͍ͯΈΔͷ ݁ߏϥΫ ʑͷWebαΠτ੍࡞ͰऔΓೖΕΔϋʔυϧ͕͍ ͏·͍͔͘ͳ͔ͬͨΒjQueryॻ͚͍͍͠ɺ jQueryͳ͠Ͱॻ͚Εసૹྔ͕ݮͰ͖Δ
WebαΠτ੍࡞ͰReactೖΕΔͬͯ ϋʔυϧߴ͘ͳ͍Ͱ͔͢
jQueryͷ໘ӨΛॏͶͭͭ ڑΛஔ͍ͨΓΕͨΓ͢Δ΄͏͕ ݱ࣮త͡Όͳ͍Ͱ͔͢
jQueryΛΕͯΈΔͱ ྑ͞ѱ͕͞Θ͔ͬͯ͘Δͱࢥ͏
ʮ͜ΕjQueryͰಉ͡Α͏ͳͷ࡞ͬͯʂʯ ʮࢮʹ·͢ʯ
ͦ͏͍͏ͱ͖ʹɺ3FBDUͱ͔WVFKTΛ ৮Γ࢝ΊΔϋʔυϧ͕Լ͕Ε͍͍ͳ
+".͍͖ͬͯ·͠ΐ͏
ࢀߟ w :PV%POU/FFEK2VFSZ IUUQTRJJUBDPNUBUFTVLFJUFNTCEECCC w ΠϚυΩͷ+BWB4DSJQUͷॻ͖ํ IUUQTRJJUBDPNTIJCVLBXBJUFNTBCDCCCFEE w 3FBDUΛ͏ͱͳͥK2VFSZ͕ཁΒͳ͘ͳΔͷ͔ IUUQTRJJUBDPNOBSVUPJUFNTGECCDGEGBG
w ·Ͱʹ8FCͷϑϩϯτΤϯυ͕ḷ͖ͬͯͨಓ IUUQTRJJUBDPNKPFSFJUFNTCFCECFCG