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

A61adad507d7bc0ee5b52ebe333abed7?s=47 Yuki Ishikawa
June 06, 2015
25

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

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

A61adad507d7bc0ee5b52ebe333abed7?s=128

Yuki Ishikawa

June 06, 2015
Tweet

Transcript

  1. ·ͩ DOM ૢ࡞Ͱ ফ໣ͯ͠Δͷʁ 2015.06.06 (͍͍ͩͨ)৽ଔΤϯδχΞ޲͚ٕज़ަྲྀձ vol.3

  2. None
  3. 

  4. ͜Μ͹Μ͸ hoge17296 Ͱ͢ʂʂʂʂʂ

  5. hoto
 17296

  6. ͱ͏ͱ͏ϓϩάϥϚྺ
 10 ೥໨ʹಥೖ

  7. None
  8. ͦΕͰ΋ 10 ೥Ͱ ͍Ζ͍Ζͳ΋ͷΛݟ͖ͯͨ

  9. ΫϥΠΞϯταΠυ JS ۙ୅࢙

  10. ʙ 2004 ೥ • JS ͸ʮ Web ʹͪΐͬͱಈ͖ΛՃ͑Δ΋ͷʯ • ʮJS͕ಈ͔ͳ͍؀ڥͷ͜ͱ΋


    ɹߟ͑ͳ͖ΌμϝͰ͠ΐʂʂʂʯ • Ϧονͳ͜ͱ͸ Flash Ͱ΍Ε
  11. None
  12. None
  13. None
  14. Flash ԫۚ࣌୅

  15. ਓੜͷઈ௖

  16. 2005 ೥

  17. None
  18. Ajax ͷ஀ੜ • ࣮͸ੲ͔Β͚͋ͬͨͲ஌ΒΕ͍ͯͳ͔ͬͨ
 XMLHttpRequest ͕ Google Maps ʹΑͬͯ
 ࠶ൃݟ͞ΕͯҰ༂༗໊ʹ

    • Ajax (Asynchronous JavaScript + XML) ͱ͍͏
 ݴ༿͕ੜ·ΕΔ • ͔͠͠·ͩ·ͩෑډ͕ߴ͍
  19. 2006 ೥

  20. None
  21. jQuery ͷিܸ • ΫϥΠΞϯταΠυϓϩάϥϛϯάͷෑډΛ
 ѹ౗తʹԼ͛ͨ • DOM ૢ࡞ • Πϕϯτॲཧ

    • Ϋϩεϒϥ΢β • Ajax
  22. $()

  23. ͋·͍͋·͍ γϯλοΫε γϡΨʔ

  24. jQuery ৬ਓ͕ࣾձ໰୊ʹ ʮ͜ΕάʔάϧΈ͍ͨʹ
 ɹΪϡΠʔϯͬͯײ͡Ͱ
 ɹͰ͖ΔΑͶʁʯ

  25. None
  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 ೥

  39. None
  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. ָ͔ͬͨ͋͠ͷࠒʹ໭Ζ͏

  49. None
  50. ·ͩ DOM ૢ࡞Ͱ ফ໣ͯ͠Δͷʁ