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
A Philosophy of Restraint
colly
203
16k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Done Done
chrislema
182
16k
Agile that works and the tools we love
rasmusluckow
328
21k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
560
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Making Projects Easy
brettharned
116
6k
Thoughts on Productivity
jonyablonski
69
4.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
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 ૢ࡞Ͱ ফͯ͠Δͷʁ