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
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
170
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
460
旅行プランAIエージェント開発の裏側
ippo012
2
930
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
1から理解するWeb Push
dora1998
7
1.9k
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
480
Kiroで始めるAI-DLC
kaonash
2
630
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
570
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
22
5.9k
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
260
より安全で効率的な Go コードへ: Protocol Buffers Opaque API の導入
shwatanap
2
790
Featured
See All Featured
Being A Developer After 40
akosma
90
590k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
The Language of Interfaces
destraynor
161
25k
Agile that works and the tools we love
rasmusluckow
330
21k
GitHub's CSS Performance
jonrohan
1032
460k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Optimizing for Happiness
mojombo
379
70k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Into the Great Unknown - MozCon
thekraken
40
2k
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