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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
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
530
Javascript in the past and now
kusamao
1
170
The Essence of UI Design
kusamao
1
1.9k
Make good (better) form
kusamao
0
260
Making mock-up in web application
kusamao
0
98
Using Heroku on entrusted development
kusamao
0
1.1k
Other Decks in Programming
See All in Programming
AWS re:Invent 2025参加 直前 Seattle-Tacoma Airport(SEA)におけるハードウェア紛失インシデントLT
tetutetu214
2
110
例外処理とどう使い分ける?Result型を使ったエラー設計 #burikaigi
kajitack
16
6.1k
AI Schema Enrichment for your Oracle AI Database
thatjeffsmith
0
280
【卒業研究】会話ログ分析によるユーザーごとの関心に応じた話題提案手法
momok47
0
200
IFSによる形状設計/デモシーンの魅力 @ 慶應大学SFC
gam0022
1
300
Implementation Patterns
denyspoltorak
0
290
Basic Architectures
denyspoltorak
0
670
OCaml 5でモダンな並列プログラミングを Enjoyしよう!
haochenx
0
140
16年目のピクシブ百科事典を支える最新の技術基盤 / The Modern Tech Stack Powering Pixiv Encyclopedia in its 16th Year
ahuglajbclajep
5
1k
Honoを使ったリモートMCPサーバでAIツールとの連携を加速させる!
tosuri13
1
180
AIエージェントのキホンから学ぶ「エージェンティックコーディング」実践入門
masahiro_nishimi
5
460
Automatic Grammar Agreementと Markdown Extended Attributes について
kishikawakatsumi
0
190
Featured
See All Featured
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
117
110k
Google's AI Overviews - The New Search
badams
0
910
svc-hook: hooking system calls on ARM64 by binary rewriting
retrage
1
100
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
marketingsoph
0
75
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1.2k
Between Models and Reality
mayunak
1
190
The Language of Interfaces
destraynor
162
26k
Context Engineering - Making Every Token Count
addyosmani
9
660
Making Projects Easy
brettharned
120
6.6k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
60
42k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.4k
Are puppies a ranking factor?
jonoalderson
1
2.7k
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