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
まだ DOM 操作で消耗してるの? / ngineerxiv #3
Search
Yuki Ishikawa
June 06, 2015
0
48
まだ DOM 操作で消耗してるの? / ngineerxiv #3
(だいたい)新卒エンジニア向け技術交流会 vol.3
https://ngineerxiv.doorkeeper.jp/events/24857
Yuki Ishikawa
June 06, 2015
Tweet
Share
More Decks by Yuki Ishikawa
See All by Yuki Ishikawa
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
380
ORM と向き合う
hoto17296
8
7.7k
明日業務で役立たない Web 開発 TIPS
hoto17296
0
130
Python をフル活用した工場への AI 導入 & データ活用基盤構築事例
hoto17296
0
2.7k
クソ bot 実装ライブコーディング
hoto17296
0
190
DeepGBM 論文の紹介
hoto17296
0
520
試行錯誤のための Docker 活用術
hoto17296
4
2.8k
Hive 集計テクニック
hoto17296
0
450
データ分析と Docker / Data Analysis with Docker
hoto17296
0
330
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
250
A Modern Web Designer's Workflow
chriscoyier
693
190k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
How to Ace a Technical Interview
jacobian
276
23k
A Philosophy of Restraint
colly
203
16k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Practical Orchestrator
shlominoach
186
10k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
Transcript
·ͩ DOM ૢ࡞Ͱ ফͯ͠Δͷʁ 2015.06.06 (͍͍ͩͨ)৽ଔΤϯδχΞ͚ٕज़ަྲྀձ vol.3
None
͜ΜΜ hoge17296 Ͱ͢ʂʂʂʂʂ
hoto 17296
ͱ͏ͱ͏ϓϩάϥϚྺ 10 ʹಥೖ
None
ͦΕͰ 10 Ͱ ͍Ζ͍ΖͳͷΛݟ͖ͯͨ
ΫϥΠΞϯταΠυ JS ࢙ۙ
ʙ 2004 • JS ʮ Web ʹͪΐͬͱಈ͖ΛՃ͑Δͷʯ • ʮJS͕ಈ͔ͳ͍ڥͷ͜ͱ
ɹߟ͑ͳ͖ΌμϝͰ͠ΐʂʂʂʯ • Ϧονͳ͜ͱ Flash ͰΕ
None
None
None
Flash ԫۚ࣌
ਓੜͷઈ
2005
None
Ajax ͷੜ • ࣮ੲ͔Β͚͋ͬͨͲΒΕ͍ͯͳ͔ͬͨ XMLHttpRequest ͕ Google Maps ʹΑͬͯ ࠶ൃݟ͞ΕͯҰ༂༗໊ʹ
• Ajax (Asynchronous JavaScript + XML) ͱ͍͏ ݴ༿͕ੜ·ΕΔ • ͔͠͠·ͩ·ͩෑډ͕ߴ͍
2006
None
jQuery ͷিܸ • ΫϥΠΞϯταΠυϓϩάϥϛϯάͷෑډΛ ѹతʹԼ͛ͨ • DOM ૢ࡞ • Πϕϯτॲཧ
• Ϋϩεϒϥβ • Ajax
$()
͋·͍͋·͍ γϯλοΫε γϡΨʔ
jQuery ৬ਓ͕ࣾձʹ ʮ͜ΕάʔάϧΈ͍ͨʹ ɹΪϡΠʔϯͬͯײ͡Ͱ ɹͰ͖ΔΑͶʁʯ
None
...ͱݴ͑ͳ͍ • ͳ·͡ jQuery ͕͋Εͦͦ͜͜ग़དྷͯ͠·͏ • ͪΐͬͱάάΕϓϥάΠϯ͕མͪͯΔ • ग़དྷΔΑ͏ͳؾ͕ͯ͠͠·͏ •
ʮग़དྷͯͨΓલʯͱͯ͠ཁٻ͞ΕΔ
ͳʹ͕ͭΒ͍͔
ͯ͢ͷ DOM ͷঢ়ଶཧ • Ͳͷ DOM ͕ࠓͲΜͳΛ͍࣋ͬͯΔ͔ • Ͳͷ DOM
͔ΒԿͷΠϕϯτ͕ൃՐ͢Δ͔ • ͜ͷ͕มΘͬͨΒͲͷ DOM Λ ॻ͖͑ͳ͍ͱ͍͚ͳ͍͔
ίϯϙʔωϯτ͕૿͑Δͨͼ ߟ͑Δ͖͜ͱ͕ ࢦؔతʹ૿͍͑ͯ͘ ϓϩάϥϛϯά
Ұ෦ͷ༏Εͨ৬ਓʹ͔͠ ͠ಘͳ͍ઈٕ
ͦͯ͠ 2010
Single Page Application
Single Page Application • HTML5 ͷ history.pushState ʹΑͬͯ URL ͷಈతॻ͖͕͑Մೳʹ
• ϖʔδભҠͱ͍͏֓೦Λӽͨ͠ ΫϥΠΞϯταΠυϓϩάϥϛϯάͷۃ
ྫ ʮSPAͰ࡞ͬͯͶʂʂʂʯ ʮͰ history.back ͯ͠લͷϏϡʔͷ ɹεΫϩʔϧҐஔอ࣋ͯ͠Δͷવͩ͠ ɹใߋ৽͞ΕͯΔΑͶʂʂʂʯ
ਓؒۀͰͳ͍
͜Μͳͷ͕ ”ͨΓલ”ͱͯ͠ ཁٻ͞ΕΔੈͷத ઈରʹؒҧ͍ͬͯΔ
Զ ͏
2014
None
React • Facebook ͷ UI ϥΠϒϥϦ • ϑϨʔϜϫʔΫ͡Όͳ͍ • ಛ
• ϦΞΫςΟϒϓϩάϥϛϯά • Virtual DOM
͏ DOM ૢ࡞͠ͳ͍͍ͯ͘ • มߋ͕͋ͬͨΒ HTML શମΛॻ͖͑Δ • ৗʹ࠷৽ͷঢ়ଶͷ DOM
Λ ϨϯμϦϯά͠ଓ͚Ε͍͍͚ͩ • React ͕෦Ͱ diff / patch ͯ͘͠ΕΔ͔Β ͘ͳ͍
DEMO http://bit.ly/mtg_timer
ʮࣄ͋Δຖʹ࠷৽ͷ HTML Λ ϨϯμϦϯά͢Δʯ ʁʁʁ
͜ΕͬͯੲϖʔδભҠͰ ͍ͬͯͨ͜ͱ͡Όͳ͍͔
γϯϓϧͰݹ͍ ͜ͷ֓೦ͦ͜ ਖ਼͔ͬͨ͠
΅ͨͪ͘ ͪΐͬͱΜͰ͍ͨ ͚ͩͩͬͨΜͩ
·ͱΊ • ΅ͨͪ͘ DOM ૢ࡞ͱ͍͏ ۤ௧Λڧ͍ΒΕ͍ͯΔ • ຑༀ (jQuery) ʹΑΔରྍ๏ݶք͕དྷ͍ͯΔ
• React ʹΑͬͯ΅ͨͪ͘ղ์͞ΕΔ
ָ͔ͬͨ͋͠ͷࠒʹΖ͏
None
·ͩ DOM ૢ࡞Ͱ ফͯ͠Δͷʁ