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
Reactは、はやい!
Search
Risa Aoki
March 25, 2017
Technology
0
1.7k
Reactは、はやい!
Reactの表示速度が早いことについてLTしたときの資料です
Risa Aoki
March 25, 2017
Tweet
Share
Other Decks in Technology
See All in Technology
20251029_Cursor Meetup Tokyo #02_MK_「あなたのAI、私のシェル」 - プロンプトインジェクションによるエージェントのハイジャック
mk0721
PRO
0
330
オブザーバビリティが育むシステム理解と好奇心
maruloop
2
1.3k
Retrospectiveを振り返ろう
nakasho
0
120
マルチエージェントのチームビルディング_2025-10-25
shinoyamada
0
190
.NET 10のBlazorの期待の新機能
htkym
0
110
生成AI時代のPythonセキュリティとガバナンス
abenben
0
140
Oracle Database@Google Cloud:サービス概要のご紹介
oracle4engineer
PRO
0
370
JSConf JPのwebsiteをGatsbyからNext.jsに移行した話 - Next.jsの多言語静的サイトと課題
leko
2
190
ソフトウェアエンジニアの生成AI活用と、これから
lycorptech_jp
PRO
0
910
プレイドのユニークな技術とインターンのリアル
plaidtech
PRO
1
390
NLPコロキウム20251022_超効率化への挑戦: LLM 1bit量子化のロードマップ
yumaichikawa
3
510
Azure Well-Architected Framework入門
tomokusaba
1
130
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
BBQ
matthewcrist
89
9.9k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Music & Morning Musume
bryan
46
6.9k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
What's in a price? How to price your products and services
michaelherold
246
12k
Embracing the Ebb and Flow
colly
88
4.9k
Build your cross-platform service in a week with App Engine
jlugia
233
18k
Docker and Python
trallard
46
3.6k
YesSQL, Process and Tooling at Scale
rocio
173
15k
Gamification - CAS2011
davidbonilla
81
5.5k
Fireside Chat
paigeccino
41
3.7k
Transcript
Reactɺ͍ʂ Aoki Risa 2017.3.25
Reactͱʁ
දࣔʹಛԽͨ͠JSϥΠϒϥϦ • webϖʔδͳͲͰࢲ͕࣮ͨͪࡍʹݟ͍ͯΔը ໘ͷදࣔʹಛԽ • ྫ͑Facebookͷը໘React͕ΘΕ͍ͯ Δදྫ
React͕͍ͱʁ
։ൃεϐʔυ͕͍ʁ
Δͷ͕͍ʁ
ද͕͍ࣔʂʂ
Ͳ͏͍ͯ͠ͷʁ
DOM • ϒϥβͰϖʔδΛݟΔ࣌جຊతʹͭ͘ΒΕΔ • ͜ΕΛͱʹඳը • ͜ΕΛͭ͘Δ͜ͱͰJavaScript͔ΒHTMLͷλάΛ͍͡Δ͜ͱ͕ Ͱ͖Δ https://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/#DOM
ࠓ·Ͱ… • جຊతʹɺड͚औͬͨใΛݩʹຖճDOMΛ ͍͔ͪΒ࡞ͯ͠ϒϥβʹඳըΛߦ͏͜ͱ ͕ଟ͔ͬͨ 表示させなきゃ DOM ใ ͓͍ͦʂ DOM…ϖʔδΛݟΔ࣌ͭ͘ΒΕΔ
ReactͰ... • ใΛड͚औ͍͖ͬͯͳΓDOMΛͭ͘Βͳ͍ • ·ͣԾDOMΛ࡞ ˠԾDOMͷ༰ΛݩʹDOMΛ࡞ ˠϒϥβʹඳը 表示させなきゃ DOM ॳظใ
Ծ DOM DOM…ϖʔδΛݟΔ࣌ͭ͘ΒΕΔ
ԾDOM • ࣮ࡍͷDOMͱରʹͳΔɺԾͷDOM • DOMΑΓ͘࡞Δ͜ͱ͕Ͱ͖ΔΑ͏ʹ w w w ઃܭ͞Ε͍ͯΔ •
͜Ε৽͍͠ใ͕ೖ͖ͬͯͨͱ͖ʹେ͖ͳ ׂΛՌͨ͢ʂ
৽͍͠ใ͕ೖ͖ͬͯͨͱ͖ • ৽͍͠ใΛͱʹ৽͍͠ԾDOMΛ͍͔ͪΒ࡞Δ ˠҰݸલͷԾDOMͱ৽͍͠ͷΛൺֱͯ͠มߋΛΈΔ ˠมߋ͞Εͨͱ͜Ζ͚ͩDOMΛ࠶ߏங͢Δɹ ৽͍͠ Ծ DOM ݹ͍ Ծ
DOM DOM DOM…ϖʔδΛݟΔ࣌ͭ͘ΒΕΔ ͍ʂ ͍ʂ
ൺͯΈΔͱ… DOM ৽͍͠ ใ ैདྷ React ৽͍͠ ใ ৽͍͠ Ծ
DOM DOM ൺֱͯ͠ ͚ࠩͩ ࠶ߏங
·ͱΊ ԾDOMͷ͓͔͛Ͱɺ ReactΛ͔ͭ͑ૣ͘දࣔͰ͖Δʂ
ࢀߟʹͨ͠จݙɾαΠτ https://www.to-r.net/media/react-tutorial01/ https://techacademy.jp/magazine/5638 https://app.codegrid.net/entry/react-1#toc-2 http://blog.livedoor.jp/yo_miz/archives/53540189.html https://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/ #DOM ʰWebσϕϩούʔͷͨΊͷReact։ൃೖ JavaScript UIϥΠϒϥϦͷجຊͱ׆༻ʱ
ࣲాจஶ
͋Γ͕ͱ͏͍͟͝·ͨ͠