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
490
Javascript in the past and now
kusamao
1
160
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
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
540
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
330
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
1
120
XP, Testing and ninja testing
m_seki
3
190
ニーリーにおけるプロダクトエンジニア
nealle
0
480
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
890
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
46
31k
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
250
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
800
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
180
VS Code Update for GitHub Copilot
74th
1
390
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
410
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
337
57k
For a Future-Friendly Web
brad_frost
179
9.8k
Optimizing for Happiness
mojombo
379
70k
Six Lessons from altMBA
skipperchong
28
3.8k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
The Language of Interfaces
destraynor
158
25k
How to Ace a Technical Interview
jacobian
277
23k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
790
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Visualization
eitanlees
146
16k
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