$30 off During Our Annual Pro Sale. View Details »
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
110
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
450
Javascript in the past and now
kusamao
1
160
The Essence of UI Design
kusamao
1
1.9k
Make good (better) form
kusamao
0
230
Making mock-up in web application
kusamao
0
75
Using Heroku on entrusted development
kusamao
0
1.1k
Other Decks in Programming
See All in Programming
Cognitoが大型アップデート!Managed Loginとパスワードレスログインを実際に使ってみた@しむそくRadio Special Day1
tmhirai
2
150
N.E.X.T LEVEL
pluu
2
240
聞き手から登壇者へ: RubyKaigi2024 LTでの初挑戦が 教えてくれた、可能性の星
mikik0
1
140
Djangoの開発環境で工夫したこと - pre-commit / DevContainer
hiroki_yod
1
580
Thoughts and experiences on Rust and TypeScript
unvalley
2
200
flutterkaigi_2024.pdf
kyoheig3
0
430
イマのCSSでできる インタラクション最前線 + CSS最新情報
clockmaker
5
3.8k
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
0
2.9k
ペアーズにおけるAmazon Bedrockを⽤いた障害対応⽀援 ⽣成AIツールの導⼊事例 @ 20241115配信AWSウェビナー登壇
fukubaka0825
6
2.3k
競技プログラミングで 基礎体力を身につけよう / You can get basic skills through competitive programming
mdstoy
0
140
見せてあげますよ、「本物のLaravel批判」ってやつを。
77web
7
8k
MoQとか勉強会#2 発表資料
yuki_uchida
1
120
Featured
See All Featured
Music & Morning Musume
bryan
46
6.2k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
150
How To Stay Up To Date on Web Technology
chriscoyier
789
250k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
29
2k
Building Adaptive Systems
keathley
38
2.3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Designing Experiences People Love
moore
138
23k
A better future with KSS
kneath
238
17k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.2k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Designing for Performance
lara
604
68k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
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