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
20190122_vdom.pdf
Search
ozaki25
January 22, 2019
Technology
0
69
20190122_vdom.pdf
ozaki25
January 22, 2019
Tweet
Share
More Decks by ozaki25
See All by ozaki25
20210526_a11y.pdf
ozaki25
0
170
20210525_react_next.pdf
ozaki25
0
120
Webフロントエンドはなぜ複雑なのか
ozaki25
1
120
utility first css
ozaki25
0
89
20201225_how_to_learn_technology.pdf
ozaki25
0
150
20201124_blitz.pdf
ozaki25
0
83
20200727_liff_app.pdf
ozaki25
1
630
20200721_web_vitals.pdf
ozaki25
0
97
20200624_web_otp_api.pdf
ozaki25
1
120
Other Decks in Technology
See All in Technology
PO初心者が考えた ”POらしさ”
nb_rady
0
210
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
270
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
7
5.2k
Lazy application authentication with Tailscale
bluehatbrit
0
210
怖くない!はじめてのClaude Code
shinya337
0
390
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
380
Core Audio tapを使ったリアルタイム音声処理のお話
yuta0306
0
190
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
310
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
2
7k
品質と速度の両立:生成AI時代の品質保証アプローチ
odasho
1
340
United airlines®️ USA Contact Numbers: Complete 2025 Support Guide
unitedflyhelp
0
310
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
27k
Featured
See All Featured
Docker and Python
trallard
44
3.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Six Lessons from altMBA
skipperchong
28
3.9k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
Speed Design
sergeychernyshev
32
1k
Building Adaptive Systems
keathley
43
2.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Fireside Chat
paigeccino
37
3.5k
How to train your dragon (web standard)
notwaldorf
95
6.1k
Transcript
Ծ%0.ֵ໋
࣍ ࠓճ͢༰ Ծ%0.͕ඞཁͱ͞ΕΔഎܠͱྺ࢙ Ծ%0.ͷΈ ·ͱΊ
ࠓճ͢༰
ࠓճ͢༰ w 8&# %#13&447PMͷʮԾ%0. ֵ໋ʯͱ͍͏ίϥϜ͕ݩωλͰ͢ w ϕʔε্هίϥϜͰ͕͢ݴٴ͞Εͯͳ͍෦ ʹؔͯ͠ಠࣗͷݟղଟؚ͘Έ·͢ w ΦϦδφϧ͕ಡΈ͚ͨΕିͤΔͷͰֻ
͚͍ͯͩ͘͞ https://gihyo.jp/magazine/wdpress/archive/2018/vol106
Ծ%0.͕ඞཁͱ͞ΕΔഎܠͱྺ࢙
%0.ͷྺ࢙ᶃ ).5-ͷੜ ࠒ w ͱͱݚڀऀ͚ͷจΛॻͨ͘ΊʹΘΕ͍ͯͨ w λΠτϧ͕͋Γ UJUMF ɺݟग़͕͋͠Γ
I I ɺύϥά ϥϑ͕͋Γ Q w Πϯλʔωοτͷൃలʹͬͯ༻్͕͕͍ͬͯ͘
%0.ͷྺ࢙ᶄ %0. %PDVNFOU0CKFDU.PEFM ͷੜ w %0.ͱ w )5.-Λಈతʹ੍ޚ͢Δ"1*ͷ༷
w ඪ४Խஂମ8$ʹΑͬͯࡦఆ͞ΕΔ
%0.ͷྺ࢙ᶄ %0. %PDVNFOU0CKFDU.PEFM ͷੜ w %0.ͱ w )5.-Λಈతʹ੍ޚ͢Δ"1*ͷ༷
w ඪ४Խஂମ8$ʹΑͬͯࡦఆ͞ΕΔ +BWB4DSJQUʹΑͬͯ)5.-Λಈతʹ੍ޚͰ͖ΔΑ͏ʹͳΔ ಈతʹ੍ޚͰ͖ΔΑ͏ʹͳΔ ϖʔδભҠͤͣʹ)5.-Λॻ͑ΒΕΔ
Ծ%0.ొલᶃ "KBYֵ໋ ࠒ w (PPHMF.BQTͷֵ৽ੑ w ΞΫγϣϯʹԠͯ͡ಈతʹαʔόΞΫηε ͦͷϨεϙϯεʹԠͯ͡ϖʔδΛॻ͖͑Δ w
K2VFSZͷ࣌ w ϒϥβؒͷඇޓΛٵऩͯ͘͠ΕΔ w ࣌ϒϥβؒͷޓੑ͕͔ͬͨ͠
Ծ%0.ొલᶄ 8FCٕज़ͷधཁͷߴ·Γ w J1IPOFͷ'MBTIඇࡌܾఆ ˞ w ϦονϝσΟΞͷ࣮धཁ͕+BWB4DSJQUʹूத w /PEFKTOQNΤίγεςϜͷख़
ࠒʙ w +BWB4DSJQUͷݴޠతͳශऑ͞ΛΧόʔ w $P⒎FF4DSJQU #SPXTFSJGZ ※ https://www.apple.com/hotnews/thoughts-on-flash/
·ͱΊ w %0.ʹΑͬͯ)5.-ಈతͳͷʹ w 'MBTIͷସͱͯ͠+BWB4DSJQUͷཁٻ͕ෳࡶԽ w /PEFKTOQNʹΑΔΤίγεςϜͷख़ͱෳࡶԽ
Ծ%0.ԿΛղܾ͢Δͷ͔
ΫϥΠΞϯταΠυٕज़ͷ՝ w K2VFSZͷΑ͏ͳԾ%0.Ͱͳ͍ैདྷͷٕज़ͷ՝ w ن͕େ͖͘ෳࡶԽ͢ΔͱϝϯςࠔͰٕज़తෛ࠴ͱͳΔ ෳࡶͳཁٻʹ͑͏ΔΞʔΩςΫνϟ͕ඞཁ
ೖग़ྗͷΞτϛοΫੑ αʔόαΠυͷ߹ w ΞτϛοΫੑ͕͋Δ w ϦΫΤετϨεϙϯε㲈8FCϖʔδ w ಉ͡63-ʹΞΫηε͢Ε ಉ͡ϖʔδ͕දࣔ͞ΕΔ
αʔό Ϸμεφϕ(URL) ϹφϪЀφ(HTML) ϒϥβ ϹЀύϷЀν WebϧЄυ
ೖग़ྗͷΞτϛοΫੑ ΫϥΠΞϯταΠυͷ߹ w ΞτϛοΫੑ͕ͳ͍ w ϦΫΤετϨεϙϯε㱠8FCϖʔδ w αʔόαΠυͰੜͨ͠)5.-ॳظঢ় ଶʹ͗͢ͳ͍ w
%0.ૢ࡞ʹΑΓ͋ΒΏΔঢ়ଶॻ͖ ͑ΒΕಘΔ αʔό Ϸμεφϕ(URL) ϹφϪЀφ(HTML) ϒϥβ ϹЀύϷЀν WebϧЄυ DOM 䨗䟵͞ DOM 䨗䟵͞ WebϧЄυ WebϧЄυ
ΫϥΠΞϯταΠυʹΞτϛοΫੑΛ "TJT w ΫϥΠΞϯταΠυ༷ʑͳཁ ҼͰঢ়ଶ͕มΘΔ w ϘλϯΛΫϦοΫͨ͠Βʙɺ "KBYͰσʔλΛऔಘͨ͠Βʙ w ঢ়ଶ͕มΘΔʹ%0.ͷ্ॻ
͖͕ܧ͗͞Ε͍ͯ͘ 5PCF w ঢ়ଶ͕ߋ৽͞ΕΔʹঢ়ଶʹଈ ͨ͠Ұҙͳ7JFXΛग़ྗ͍ͨ͠ w ʮೖྗʹج͍ͮͨঢ়ଶܾఆͷΞ τϛοΫੑʯΛखʹೖΕ͍ͨ
ΫϥΠΞϯταΠυͷΞτϛοΫੑ༗ແͷྫ ϘλϯΛΫϦοΫ͢Δͱཁૉ͕૿͑Δαϯϓϧ Ճ Hello Ճ Hello Hello ΫϦοΫ
μϷϐμͫ͵ͩ;Ψ䭥ᎣͭͼᥝᔰΨ᭄ےͯΡ ίϕϬϐμ͚͢ ίϕϬϐμ͘͢Ρ Ճ Hello Ճ Hello Hello ΫϦοΫ \DPVOU^ ˣ \DPVOU^ μϷϐμͫ͵Οᇫ䙪ΨๅෛͯΡ ᇫ䙪ΨزኮᶎΨ䯤塈ͭൈኮͯΡ ᇫ䙪
ΫϥΠΞϯταΠυͷΞτϛοΫੑ༗ແͷྫ ϘλϯΛΫϦοΫ͢Δͱཁૉ͕૿͑Δαϯϓϧ Ճ Hello Ճ Hello Hello ΫϦοΫ
μϷϐμͫ͵ͩ;Ψ䭥ᎣͭͼᥝᔰΨ᭄ےͯΡ ίϕϬϐμ͚͢ ίϕϬϐμ͘͢Ρ Ճ Hello Ճ Hello Hello ΫϦοΫ \DPVOU^ ˣ \DPVOU^ μϷϐμͫ͵Οᇫ䙪ΨๅෛͯΡ ᇫ䙪ΨزኮᶎΨ䯤塈ͭൈኮͯΡ ᇫ䙪 ඳը༰ͷܧ͗͠Ͱͳ͘ ঢ়ଶΛݩʹશମΛ࠶ߏங͢Δ
ΫϥΠΞϯταΠυͷΞτϛοΫੑ༗ແͷྫ ϘλϯΛΫϦοΫ͢Δͱཁૉ͕૿͑Δαϯϓϧ Ճ Hello Ճ Hello Hello ΫϦοΫ
μϷϐμͫ͵ΟᥝᔰΨ᭄ےͯΡ ίϕϬϐμ͚͢ ίϕϬϐμ͘͢Ρ Ճ Hello Ճ Hello Hello ΫϦοΫ \DPVOU^ ˣ \DPVOU^ μϷϐμͫ͵Οᇫ䙪ΨๅෛͯΡ ᇫ䙪ΨزኮᶎΨ䯤塈ͭൈኮͯΡ ঢ়ଶΛ֬ఆ͢Δεςοϓͱ )5.-Λߋ৽͢Δεςοϓ͕ ໌֬ʹ͞ΕΔ ඳը༰ͷܧ͗͠Ͱͳ͘ ঢ়ଶΛݩʹશମΛ࠶ߏங͢Δ
ΫϥΠΞϯταΠυͷΞτϛοΫੑ༗ແͷྫ ϘλϯΛΫϦοΫ͢Δͱཁૉ͕૿͑Δαϯϓϧ Ճ Hello Ճ Hello Hello ΫϦοΫ
μϷϐμͫ͵ΟᥝᔰΨ᭄ےͯΡ ίϕϬϐμ͚͢ ίϕϬϐμ͘͢Ρ Ճ Hello Ճ Hello Hello ΫϦοΫ \DPVOU^ ˣ \DPVOU^ μϷϐμͫ͵Οᇫ䙪ΨๅෛͯΡ ᇫ䙪ΨزኮᶎΨ䯤塈ͭൈኮͯΡ ͜ΕΛ࣮ݱ͢ΔͨΊʹ ͔ܽͤͳ͍ͳٕज़͕Ծ%0.
ΞτϛοΫੑ͕͋ΔͱԿ͕͍͍ͷ͔ ۀͰ͖Δ w ϓϩάϥϚʔͷؔ৺ঢ়ଶཧ w σβΠφʔͷؔ৺ೖྗΛݩʹͨ͠ग़ྗ ϝϯςφϏϦςΟ্ w 7JFXͷ࠶ݱੑ͕୲อ͞ΕΔͷͰཧ͍͢͠ w
7JFX͕Γ͞ΕΔͷͰঢ়ଶཧͷςετ͕͍͢͠
Ծ%0.ͷΈ
ͳͥԾ%0.͕ඞཁ͔ w ΞτϛοΫੑ͕͋ΔΞʔΩςΫνϟ w ঢ়ଶΛͱʹը໘શମΛ࠶ߏங͢Δ w ը໘શମͷॻ͖͑ίετ͕ߴ͘ϢʔβϏϦςΟଛͳ͏ Ծ%0.Λ͏͜ͱͰ͜ͷ͕ղফ͞ΕΔ
Ծ%0.ͱ3FBM%0. 3FBM%0. w ը໘ʹඳը͞Ε͍ͯΔ%0.π Ϧʔͷ͜ͱ Ծ%0. ڱٛ
w 3FBM%0.ͱͰରԠ͢Δߏ ମͰϝϞϦ্ʹอ͍࣋ͯ͠Δ 9 : ; 9 : ;
Ծ%0.ͷΞϧΰϦζϜ RealDOM 㫪మDOM \DPVOU^ w ϘλϯΛΫϦοΫ͢Δͱཁૉ͕૿͑Δαϯϓϧ CVUUPO )FMMP EJW CVUUPO
)FMMP EJW
Ծ%0.ͷΞϧΰϦζϜ RealDOM 㫪మDOM \DPVOU^ w ϘλϯΛΫϦοΫ͢Δͱཁૉ͕૿͑Δαϯϓϧ CVUUPO )FMMP EJW CVUUPO
)FMMP EJW ΫϦοΫ
Ծ%0.ͷΞϧΰϦζϜ RealDOM 㫪మDOM \DPVOU^ ˣ \DPVOU^ w ϘλϯΛΫϦοΫ͢Δͱཁૉ͕૿͑Δαϯϓϧ CVUUPO )FMMP
EJW CVUUPO )FMMP EJW ΫϦοΫ ঢ়ଶΛߋ৽
Ծ%0.ͷΞϧΰϦζϜ RealDOM 㫪మDOM \DPVOU^ w ϘλϯΛΫϦοΫ͢Δͱཁૉ͕૿͑Δαϯϓϧ CVUUPO )FMMP EJW CVUUPO
)FMMP EJW before CVUUPO )FMMP EJW )FMMP ߋ৽ޙͷঢ়ଶΛݩʹ Ծ%0.Λ࠶ߏங after
Ծ%0.ͷΞϧΰϦζϜ RealDOM 㫪మDOM \DPVOU^ w ϘλϯΛΫϦοΫ͢Δͱཁૉ͕૿͑Δαϯϓϧ CVUUPO )FMMP EJW CVUUPO
)FMMP EJW before CVUUPO )FMMP EJW )FMMP after ࠩΛൺֱ͢Δ
Ծ%0.ͷΞϧΰϦζϜ RealDOM 㫪మDOM \DPVOU^ w ϘλϯΛΫϦοΫ͢Δͱཁૉ͕૿͑Δαϯϓϧ CVUUPO )FMMP EJW before
CVUUPO )FMMP EJW )FMMP after ࠩΛ3FBM%0.ʹ өͤ͞Δ CVUUPO )FMMP EJW )FMMP
Ծ%0.ͷΞϧΰϦζϜ RealDOM 㫪మDOM \DPVOU^ w ϘλϯΛΫϦοΫ͢Δͱཁૉ͕૿͑Δαϯϓϧ CVUUPO )FMMP EJW )FMMP
CVUUPO )FMMP EJW )FMMP ߋ৽ྃ
Ծ%0.ͷΞϧΰϦζϜ RealDOM 㫪మDOM \DPVOU^ w ϘλϯΛΫϦοΫ͢Δͱཁૉ͕૿͑Δαϯϓϧ CVUUPO )FMMP EJW )FMMP
CVUUPO )FMMP EJW )FMMP 3FBM%0.ͷߋ৽࠷খݶͳͷͰॻ͑ͷίετ࠷খݶ
Ծ%0.Λ༻͍ͨϑϨʔϜϫʔΫ w 3FBDU͕ઌۦ͚తͳϑϨʔϜϫʔΫͰ͋Δ w ࠷ۙͷ41"ϑϨʔϜϫʔΫͲΕԾ%0.Λ࠾༻͍ͯ͠Δ w ˞Ծ%0.ͷΞϧΰϦζϜͷ͜ͱΛ୯ʹԾ%0. ٛ
ͱ͍͏ ͜ͱ͋Δ
·ͱΊ
·ͱΊ w ΫϥΠΞϯταΠυͷཁٻෳࡶԽ͖͍ͯͯ͠Δ w 'MBTIͷସͱͯ͠ͷ+BWB4DSJQU w ෳࡶͳཁٻΛܧଓతʹຬ͍ͨͯ͘͠ඞཁ͕͋Δ w ΞτϛοΫੑͷ͋ΔΞʔΩςΫνϟ͕ඞཁ w
Ծ%0.Λ༻͍Δ͜ͱͰ͜ΕΒͷཁٻΛຬͨ͢͜ͱ͕Ͱ͖Δ
ิ w ίϥϜશষͰ͕ͨ͠ࠓճͨ͠ͷষʙষͰ͢ w ষʹΫϥΠΞϯταΠυ.7$͔Β'MVYͷมભͷ w ষʹ8FCҎ֎ͷԾ%0.ͷద༻ͷ͕ॻ͍ͯ͋Γ·͢
͋Γ͕ͱ͏͍͟͝·ͨ͠