Keep a distance from jQuery

At jam plus #01
https://kfug.connpass.com/event/87799/

Transcript

1. jQueryͱͷ
 ͓෇͖߹͍ͷ࢓ํ 2018/06/07 jam plus #01 at tambourine commune
2. ࣗݾ঺հ גࣜձࣾλϯόϦϯ
   ςΫχΧϧσΟϨΫλʔ
   
   WebΤϯδχΞ ҆෦
   ૲ຑੜ
   
   Kusamao Abe
3. Έͳ͞Μ͕͸͡Ίͯ৮ͬͨ
 ϒϥ΢β͸ԿͰ͔ͨ͠
4. IUUQTXXXXPSH1FPQMFNJNBTBUFTUPCKFDU.BD*&
5. Internet Explorer 5.1
6. ౰࣌ͷMac OSͷ
 σϑΥϧτϒϥ΢βͰͨ͠
7. ࠓͰ͸ݏΘΕऀͷIEͪΌΜ w ౰࣌͸HTML4.0΍PNGରԠɺECMA४ڌͳͲɺ
 ඪ४ԽΛਐΊΔΠΠϠπ
   w Netscape͸ॏͯ͘࢖͍෺ʹͳΒͳ͔ͬͨͷͰɺ
 ࣮࣭Ұ୒
   w ˞Flash͕ݸ͋ΔͱϑϦʔζͨ͠Γ΋͚ͨ͠Ͳʜʜ
   w ˞Win IEͱ͸ผ෺ͩͬͨ
 ʢϨϯμϦϯάΤϯδϯ͕ҧͬͨʣ
8. ࣌୅͸มΘΔ
9. มԽʹ͍͍͚ͭͯͳ͘ͳͬͨͱ͖ɺ
 औΓ࢒͞Εͯ͠·͏ʜʜ
10. lϑϩϯτΤϯυͷٕज़ͷ਼੎͸ૣ͗͢Δz lͲ͏͙ͤ͢௠෗Խ͢Δ͠ർΕͨz
12. ʮ͑ͬɺjQuery࢖ͬͯΔ͚Ͳɺ
 React΍ͬͨ΄͏͕͍͍ͷ͔ͳ͋ʜʜʯ
13. ৽͍ٕ͠ज़Λ৮Δͷ͸
 ୯७ʹΠΠͷͰΦεεϝʂ
14. Ͱ΋ɺ͜͏͍͏ʮڧ͍ʯݴ༿Ͱ ෆ҆ʹͳΔͷ͸͠ΜͲ͘ͳ͍ʁ
15. jQuery͕ඞཁͩͬͨ࣌୅ w ϒϥ΢βؒࠩҟ͕൒ ୺ͳ͔ͬͨ
    w ඪ४ԽϚδཔΉΑʂ
16. ࣌୅͸ਐΈɺ
 Web͕Ͱ͖Δ͜ͱ͸ଟछଟ༷ʹ
17. Web͕ࠓͷΑ͏ʹ޿͘։͔Εɺ
 اۀ΍ݸਓ͕WebαΠτΛ࣋ͭͳΜͯ
 WWWͷ૑੒ظ͸΄ͱΜͲ୭΋৴͡ͳ͔ͬͨ
18. ಉ͡Α͏ʹɺWebͰ௨ൢͨ͠Γɺ
 ௨࿩͢ΔͳΜ͖ͯͬͱເ෺ޠͩͬͨ
19. ࠓ΍WebΞϓϦέʔγϣϯΛ
 ࢖Θͳ͍೔͸ͳ͍
20. Ͱ΋ɺ;ͭ͏ͷWebαΠτ੍࡞͸
 ʢ͍·ͩʹʣͳ͘ͳΒͳ͍
21. গ͚ͩ͠ɺ
 Θͨ͠ͷੲ࿩Λʜ
22. Θͨ͠ͱJavaScriptͱͷؔΘΓ ʙ೥ɹझຯͰ΍ͬͯͨࠒ
    ίϐϖϚϯ
    ೥ɹWebܥϕϯνϟʔͰΞϧόΠτ
    jQueryͱͷग़ձ͍
    ೥ɹWebܥϕϯνϟʔೖࣾ
    w ϚʔΫΞοϓۀ຿͔ΒϑϩϯτΤϯυΤϯδχΞʹ
    w Express
    
    Browserify
    
    Backbone.jsͰͷ
 αʔόαΠυϨϯμϦϯά
    
    SPA
23. Backbone.js w jQueryΛ͏·͍͜ͱΫϥΠΞϯταΠυMVCʹدͤͨΑ͏ͳϑϨʔϜ ϫʔΫ
    w ຖճrenderͰॻ͖׵͑ΒΕΕ͹͍͍͚Ͳ݁ߏDOMΛ͍ͬͯ͡ঢ়ଶΛ ؅ཧ͢ΔͷͰ͍ͨ΁Μ
    w ϦΞϧλΠϜόϦσʔγϣϯͷͨΊʹ.on͠·͘ΔΈ͍ͨͳͷ͕͋Δ
24. ࠓͷձࣾʹೖͬͯ w SPAҊ݅ͰAngular1.xܥ
    w vue.js͸࣮Ҋ݅Ͱ͸΍ͬͯͳ͍͕ษڧձग़ͨΓΠϯλʔϯͱҰॹʹ ࢖ͬͨΓ
    w LaravelɾWordPress w ;ͭ͏ͷϚʔΫΞοϓۀ຿
25. Angular.js 1.x w ϦΞϧλΠϜόϦσʔγϣϯͷѹ౗తָ͞
    w SFOEFSࣗ෼Ͱॻ͔ͳ͍͍ͯ͘ͷʂʁ
    w ͱʹ͔͘σΧ͍4DPQFʢ7JFX.PEFMʣΛྔ࢈ɺ݁ہσʔλͷঢ়ଶΛ೺ Ѳ͠ͳ͍ͱಡΊͳ͍Έ͍ͨʹͳΓ͕ͪͩͬͨ
26. ݸਓɾαʔΫϧͷαΠτ αʔόαΠυ
 WebΞϓϦέʔγϣϯ γϯάϧϖʔδ
 ΞϓϦέʔγϣϯ
27. ϚʔΫΞοϓ
 ˣ
 ϑϩϯτΤϯυ ˠ8FCΤϯδχΞ
 ˠςΫχΧϧσΟϨΫλʔ
28. WebΞϓϦέʔγϣϯ੡࡞ऀͱɺ
 WebαΠτ੡࡞ऀͷؒʹ͸͕ࠩ͋Δ
29. IUUQTXXXMJHIUOJOHEFTJHOTZTUFNDPN ελΠϧΨΠυ BEM FLOCSS OOCSS CSSઃܭ Ξχϝʔγϣϯɾ
 ΠϯλϥΫγϣϯઃܭ WAI-ARIA ΞΫηγϏϦςΟ ϚʔΫΞοϓدΓͷઃܭ
30. ϑϩϯτΤϯυΤϯδχΞͰ
 ͜͜ʹ৮Βͳ͍ͻͱ΋͍Δʢଟ෼ʣ
31. Reactͱ͔vue.jsͱ͔ݴ͏͚Ͳ͋͞ w ͦΒ৽͍͜͠ͱΛ΍Δͷ͸͍͍͜ͱ
    w ͕ͩɺશ෦ͷਓ͕͍·͙͢jQueryΛ΍Ίͨ΄͏͕͍͍Έ͍ͨͳ࿩͡Ό ͳ͍
    w ϑΥʔϜ͕͋ΔίʔϙϨʔταΠτͰͪΐͬͱָʹ࡞Δͷʹ͋ͬͨΒ ศར͚ͩͲjQueryͰ΋ΪϦ͍͚ΔΜͩΑͳʙ
    w ͨͩɺن໛ͷൺֱతେ͖͍WebΞϓϦέʔγϣϯ੍࡞ͰjQueryͰؤு Δͷ͸͙͢ʹࢮ͕଴͍ͬͯΔ
32. Ͱ΋ɺ࣌୅͸มΘΔ
 ʢ࠶ܝʣ
33. ͪΐͬͱͨ͠αΠτ੍࡞ͳΒjQueryͰ͍͍
 ˣ
 ͦ΋ͦ΋jQuery͢Β͍Βͳ͍࣌୅͕དྷͦ͏ʂ
34. ຊ୊Ͱ͢ɻ
35. “You don’t need jQuery.”
 ˠඞཁͳ͍ɺͳͯ͘΋Ͱ͖Δ
 ʢ͜ͱ͕͋Δʣ
36. “write less, do more”
37. هड़ྔ͸૿͑·͢
38. ଟ෼͍͚Δ w άϩʔόϧϝχϡʔͷυϩοϓμ΢ϯϦετ։ด
    w ϞʔμϧμΠΞϩά
    w εϜʔζεΫϩʔϧʢΞϯΧʔϦϯΫͷ΍ͭʣ
39. .on(event, handler()) w ΊͬͪΌΑ͘ॻ͘ͷͰ͸
    w .clickͱ͔.loadͱ͔.resize΋݁ہ͜Εͱಉ͜͡ͱ
    w Ұճ͚ͩͳΒ.oneͱ͔֎͢ͳΒ.offͱ͔
40. eventTarget.addEventListener(type, listener[, option])
41. ௕͍
42. .addEventListener() w Window΍Elementɺ΄͔ʹ΋XMLHttpRequestͱ͔ʹੜ͑ͯΔ
    w ୈҰҾ਺ͷtype͸jQueryͷ.onͱಉ͡ͰΠϕϯτͷ໊લ
    w ୈೋҾ਺ͷlister͕jQueryͷhandlerͱಉ͡ίʔϧόοΫ
    w ୈࡾҾ਺ͷΦϓγϣϯͰonce: trueΛ౉͢ͱճಈ͍ͨΒফ͑Δ
43. .addEventListener() w listnerΛؔ਺ʹͨ͠৔߹ɺҾ਺͸EventͷΠϯλʔϑΣʔεΛ࣋ͭ ΦϒδΣΫτ
    w jQueryͷhandlerͰ౉ͬͯ͘Δeventͱ͸ࣅͯඇͳΔ΋ͷ
 ˞isinstanceofͰݟΔͱjQueryͷevent͸EventΛܧঝ͍ͯ͠ͳ͍
    w Ͱ΋͋Β͔ͨ࢖͏΋ͷ͸ಉ͡ɻ
 preventDefault()΍currentTarget͸͋Γ·͢
44. $( selector ) w Կؾͳ͘࢖ͬͯΔDOMͷऔಘ
    w ηϨΫλʹ߹க͢Δ΋ͷΛʮ͢΂ͯʯऔಘ͢Δ
    w .each͢Δ͜ͱ΋͋Ε͹ҰׅͰॲཧͰ͖Δ͜ͱ΋
    w ෳ਺͔Ͳ͏͔ҙࣝͯ͠ͳ͘ͳ͍Ͱ͔͢
45. • getElementById() • getElementsByClassName() • getElementsByTagName()
46. ͍͑͑·ͩΔ͍ͬ͜͠
47. document.querySelector() document.querySelectorAll()
48. document.querySelector() w ηϨΫλʹ߹க͢Δʮ࠷ॳͷʯDOMʢElementʣΛฦ͢
    w ηϨΫλ͕͓͔͍͠ͱྫ֎Λు͘
    w Ұக͠ͳ͍৔߹nullฦ٫
49. document.querySelectorAll() w ηϨΫλʹ߹க͢Δʮ͢΂ͯͷʯDOMʢNodeListʣΛฦ͢
    w ηϨΫλ͕͓͔͍͠ͱྫ֎Λు͘
50. NodeList Array͡Όͳ͍͚Ͳfor ofΛ࢖͏ͱElement͝ͱͷॲཧ͕Ͱ͖Δ
    Arrayʹม׵͔ͨͬͨ͠Β͜Ε
51. ࢠଙཁૉʹ͝஫ҙ ͜ͷHTMLʹରͯ͠
    ͜͏͢ΔͱinnerEmphasisͷLength͸ʜʜ0ʁ
52. Ͱ͢ IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC"1*%PDVNFOURVFSZ4FMFDUPS"MM
53. K2VFSZʹൺ΂ͨΒهड़ྔ΋ଟ͍͠
 ࡉ͔͍ҧ͍΋ଟ͍͠
 ϝιου΋ͨ͘͞Μ஌Δඞཁ͋ͬͯ
 ͩΔ͘ͳ͍ʁ
54. Θ͔Δ
55. Ͱ͸ͳͥࢲ͕͜Μͳ͜ͱΛ
 ஻͍ͬͯΔͷ͔
56.  jQueryΛ࢖ͬͯͯ΋͜ͷهड़Λॻ͚Δ
     jQueryΛॻ͍͔ͯΒಉ͜͡ͱΛ͢ΔίʔυΛॻ͍ͯΈΔͷ͸
 ݁ߏϥΫ
     ೔ʑͷWebαΠτ੍࡞Ͱ΋औΓೖΕΔϋʔυϧ͕௿͍
     ͏·͍͔͘ͳ͔ͬͨΒjQueryॻ͚͹͍͍͠ɺ
 jQueryͳ͠Ͱॻ͚Ε͹సૹྔ͕࡟ݮͰ͖Δ
57. WebαΠτ੍࡞ͰReactೖΕΔͬͯ
 ϋʔυϧߴ͘ͳ͍Ͱ͔͢
58. jQueryͷ໘ӨΛॏͶͭͭ
 ڑ཭Λஔ͍ͨΓ཭ΕͨΓ͢Δ΄͏͕
 ݱ࣮త͡Όͳ͍Ͱ͔͢
59. jQueryΛ཭ΕͯΈΔͱ
 ྑ͞΍ѱ͕͞Θ͔ͬͯ͘Δͱࢥ͏
60. ʮ͜ΕjQueryͰಉ͡Α͏ͳͷ࡞ͬͯʂʯ
    ʮࢮʹ·͢ʯ
61. ͦ͏͍͏ͱ͖ʹɺ3FBDUͱ͔WVFKTΛ
 ৮Γ࢝ΊΔϋʔυϧ͕Լ͕Ε͹͍͍ͳ
62. +".΍͍͖ͬͯ·͠ΐ͏
63. ࢀߟ w :PV
    %POU
    /FFE
    K2VFSZ
 IUUQTRJJUBDPNUBUFTVLFJUFNTCEECCC
    w ΠϚυΩͷ+BWB4DSJQUͷॻ͖ํ
 IUUQTRJJUBDPNTIJCVLBXBJUFNTBCDCCCFEE
    w 3FBDUΛ࢖͏ͱͳͥK2VFSZ͕ཁΒͳ͘ͳΔͷ͔
 IUUQTRJJUBDPNOBSVUPJUFNTGECCDGEGBG
    w ೥·Ͱʹ8FCͷϑϩϯτΤϯυ͕ḷ͖ͬͯͨಓ
 IUUQTRJJUBDPNKPFSFJUFNTCFCECFCG