まだ DOM 操作で消耗してるの？ / ngineerxiv #3

(だいたい)新卒エンジニア向け技術交流会 vol.3
https://ngineerxiv.doorkeeper.jp/events/24857

Transcript

1. ·ͩ DOM ૢ࡞Ͱ ফ໣ͯ͠Δͷʁ 2015.06.06 (͍͍ͩͨ)৽ଔΤϯδχΞ޲͚ٕज़ަྲྀձ vol.3
3. 
4. ͜Μ͹Μ͸ hoge17296 Ͱ͢ʂʂʂʂʂ
5. hoto
 17296
6. ͱ͏ͱ͏ϓϩάϥϚྺ
 10 ೥໨ʹಥೖ
8. ͦΕͰ΋ 10 ೥Ͱ ͍Ζ͍Ζͳ΋ͷΛݟ͖ͯͨ
9. ΫϥΠΞϯταΠυ JS ۙ୅࢙
10. ʙ 2004 ೥ • JS ͸ʮ Web ʹͪΐͬͱಈ͖ΛՃ͑Δ΋ͷʯ • ʮJS͕ಈ͔ͳ͍؀ڥͷ͜ͱ΋
 ɹߟ͑ͳ͖ΌμϝͰ͠ΐʂʂʂʯ • Ϧονͳ͜ͱ͸ Flash Ͱ΍Ε
14. Flash ԫۚ࣌୅
15. ਓੜͷઈ௖
16. 2005 ೥
18. Ajax ͷ஀ੜ • ࣮͸ੲ͔Β͚͋ͬͨͲ஌ΒΕ͍ͯͳ͔ͬͨ
 XMLHttpRequest ͕ Google Maps ʹΑͬͯ
 ࠶ൃݟ͞ΕͯҰ༂༗໊ʹ • Ajax (Asynchronous JavaScript + XML) ͱ͍͏
 ݴ༿͕ੜ·ΕΔ • ͔͠͠·ͩ·ͩෑډ͕ߴ͍
19. 2006 ೥
21. jQuery ͷিܸ • ΫϥΠΞϯταΠυϓϩάϥϛϯάͷෑډΛ
 ѹ౗తʹԼ͛ͨ • DOM ૢ࡞ • Πϕϯτॲཧ • Ϋϩεϒϥ΢β • Ajax
22. $()
23. ͋·͍͋·͍ γϯλοΫε γϡΨʔ
24. jQuery ৬ਓ͕ࣾձ໰୊ʹ ʮ͜ΕάʔάϧΈ͍ͨʹ
 ɹΪϡΠʔϯͬͯײ͡Ͱ
 ɹͰ͖ΔΑͶʁʯ
26. ...ͱ͸ݴ͑ͳ͍ • ͳ·͡ jQuery ͕͋Ε͹ͦͦ͜͜ग़དྷͯ͠·͏ • ͪΐͬͱάάΕ͹ϓϥάΠϯ͕མͪͯΔ • ग़དྷΔΑ͏ͳؾ͕ͯ͠͠·͏ • ʮग़དྷͯ౰ͨΓલʯͱͯ͠ཁٻ͞ΕΔ
27. ͳʹ͕ͭΒ͍͔
28. ͢΂ͯͷ DOM ͷঢ়ଶ؅ཧ • Ͳͷ DOM ͕ࠓͲΜͳ஋Λ͍࣋ͬͯΔ͔ • Ͳͷ DOM ͔ΒԿͷΠϕϯτ͕ൃՐ͢Δ͔ • ͜ͷ஋͕มΘͬͨΒͲͷ DOM Λ
 ॻ͖׵͑ͳ͍ͱ͍͚ͳ͍͔
29. ίϯϙʔωϯτ͕૿͑Δͨͼ ߟ͑Δ΂͖͜ͱ͕ ࢦ਺ؔ਺తʹ૿͍͑ͯ͘ ϓϩάϥϛϯά
30. Ұ෦ͷ༏Εͨ৬ਓʹ͔͠ ੒͠ಘͳ͍௒ઈٕ޼
31. ͦͯ͠ 2010 ೥
32. Single Page Application
33. Single Page Application • HTML5 ͷ history.pushState ʹΑͬͯ
 URL ͷಈతॻ͖׵͕͑Մೳʹ • ϖʔδભҠͱ͍͏֓೦Λ௒ӽͨ͠
 ΫϥΠΞϯταΠυϓϩάϥϛϯάͷۃ஍
34. ྫ ʮSPAͰ࡞ͬͯͶʂʂʂʯ ʮͰ΋ history.back ͯ͠΋લͷϏϡʔͷ
 ɹεΫϩʔϧҐஔอ࣋ͯ͠Δͷ౰વͩ͠
 ɹ৘ใ΋ߋ৽͞ΕͯΔΑͶʂʂʂʯ
35. ΋͸΍ ਓؒۀͰ͸ͳ͍
36. ͜Μͳ΋ͷ͕ ”౰ͨΓલ”ͱͯ͠ ཁٻ͞ΕΔੈͷத͸ ઈରʹؒҧ͍ͬͯΔ
37. Զ͸ ΋͏
38. 2014 ೥
40. React • Facebook ੡ͷ UI ϥΠϒϥϦ • ϑϨʔϜϫʔΫ͡Όͳ͍ • ಛ௃ • ϦΞΫςΟϒϓϩάϥϛϯά • Virtual DOM
41. ΋͏ DOM ૢ࡞͠ͳ͍͍ͯ͘ • มߋ͕͋ͬͨΒ HTML શମΛॻ͖׵͑Δ • ৗʹ࠷৽ͷঢ়ଶͷ DOM Λ
 ϨϯμϦϯά͠ଓ͚Ε͹͍͍͚ͩ • React ͕಺෦Ͱ diff / patch ͯ͘͠ΕΔ͔Β
 ஗͘ͳ͍
42. DEMO http://bit.ly/mtg_timer
43. ʮࣄ͋Δຖʹ࠷৽ͷ HTML Λ
 ϨϯμϦϯά͢Δʯ ʁʁʁ
44. ͜ΕͬͯੲϖʔδભҠͰ ΍͍ͬͯͨ͜ͱ͡Όͳ͍͔
45. γϯϓϧͰݹ͍ ͜ͷ֓೦ͦ͜ ਖ਼͔ͬͨ͠
46. ΅ͨͪ͘͸ ͪΐͬͱ࿪ΜͰ͍ͨ ͚ͩͩͬͨΜͩ
47. ·ͱΊ • ΅ͨͪ͘͸ DOM ૢ࡞ͱ͍͏
 ۤ௧Λڧ͍ΒΕ͍ͯΔ • ຑༀ (jQuery) ʹΑΔର঱ྍ๏΋ݶք͕དྷ͍ͯΔ • React ʹΑͬͯ΅ͨͪ͘͸ղ์͞ΕΔ
48. ָ͔ͬͨ͋͠ͷࠒʹ໭Ζ͏
50. ·ͩ DOM ૢ࡞Ͱ ফ໣ͯ͠Δͷʁ