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
Kohei Asai
May 27, 2015
Technology
0
350
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
2015-05-27にLINE社で行われた、Data Binding JS Nightでの発表内容です。
Kohei Asai
May 27, 2015
Tweet
Share
More Decks by Kohei Asai
See All by Kohei Asai
The State Transparented Web Application
axross
1
230
UIコンポーネント指向と「協働」
axross
6
2.7k
安全なJavaScriptを書く
axross
22
8.3k
Introduction to Redux
axross
34
21k
作るのにデザイナーもエンジニアもない
axross
15
7k
なぜprottか
axross
4
2.6k
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
axross
2
1.3k
gulpを使うと彼女ができるよ - かんたんな紹介とハンズオン
axross
2
990
Other Decks in Technology
See All in Technology
持続可能なソフトウェア開発を支える『GitHub CI/CD実践ガイド』
tmknom
8
1.4k
忙しい人のためのLangGraph概要まとめ
__ymgc__
1
190
DroidKaigi 2024 たすけて!ViewModel
mhidaka
5
950
Tricentisにおけるテスト自動化へのAI活用ご紹介/20240910Shunsuke Katakura
shift_evolve
0
200
eBPFのこれまでとこれから
yutarohayakawa
10
3.2k
ネットワークだけ隔離されたコンテナ作成デモ / Kichijoji.pm36
tenforward
1
230
Segment Anything Model 2
tenten0727
3
700
Swift Testingのconfirmationを コードリーディング/Dive into Swift Testing confirmation
laprasdrum
2
260
Creative UIs with Compose: DroidKaigi 2024
chrishorner
1
580
AIで変わるテスト自動化:最新ツールの多様なアプローチ/ 20240910 Takahiro Kaneyama
shift_evolve
0
240
Jetpack Compose Modifier 徹底解説 / Jetpack Compose Modifier
wiroha
0
200
Technical Writing Meetup vol.35
soracom
PRO
2
120
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.3k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.4k
RailsConf 2023
tenderlove
28
810
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
38
9.2k
Faster Mobile Websites
deanohume
304
30k
Ruby is Unlike a Banana
tanoku
96
11k
Optimising Largest Contentful Paint
csswizardry
31
2.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
What the flash - Photography Introduction
edds
67
11k
What's new in Ruby 2.0
geeforr
340
31k
Embracing the Ebb and Flow
colly
83
4.4k
Transcript
ίϯϙʔωϯτࢦ ʹΑΔɺReactͷ ϕετϓϥΫςΟεͱ όουϓϥΫςΟε @axross Data Binding JS Night
Hi :) • Kohei Asai • @axross • Software Engineer
• React.js, express.js
ίϯϙʔωϯτࢦ
ίϯϙʔωϯτࢦΛਪ
Reactͷʹ͓͚ΔComponent const SomeComponent = React.createClass({ render() { return ( <div>
<span>{this.state.valueA}</span> <span>{this.props.valueB}</span> </div> ); }, }); ෦ঢ়ଶ ֎͔Βͷ Component = DOMͱJSͷηοτɺUI෦
-> DOM มث • stateΛΘͣɺpropsΛ͏Α͏ʹ͢Εɺ Componentʮ -> DOM มثʯʹͳΔ
Component props DOM ( or Virtual DOM)
JS͕DOMΛࢧ͢Δੈք • XHRͱHistory APIͰSPA͕Մೳʹͳͬͨ • ͯ͢ͷঢ়ଶΛJavaScript͕ཧͰ͖Δ • JavaScript͕DOMΛࢧ͢Δੈք
Data-bindedͳʮDOMʯͱ • σʔλόΠϯυ͞Εͨͯ͢ͷDOMɺ JavaScriptͷʹΑͬͯు͖ग़͞ΕΔ • ͳΒɺDOMίϯύΠϧ݁Ռ • σʔλόΠϯσΟϯάͷخ͜͜͠͞ʹ͋Δ
Reactͷࢥ͔Βٯࢉ͢Δ ϕετϓϥΫςΟεͱ όουϓϥΫςΟε
ίϯϙʔωϯτࢦ 3ͭͷ๏ଇ • ΛDOMʹม͢ΔஔͰ͋Δ͜ͱΛప͢Δ • ࠶ར༻͞ΕΔ͜ͱΛલఏʹ͢Δ • ίϯϙʔωϯτͱͦ͏Ͱͳ͍ͷΛ໌֬ʹ ͚Δ
ΛDOMʹม͢Δஔ Ͱ͋Δ͜ͱΛప͢Δ
ႈੑΛकΔ • ௨ৗʮ -> DOM มثʯͰ͋Δͣ • ड͚ೖΕ͕ͨಉ͡Ͱ͋Εɺు͖ग़͞ΕΔ DOMৗʹಉͣ͡ •
ͭ·Γɺႈੑ͕͋Δͣ
༨ܭͳࣄͤ͞ͳ͍ • ͦΕҎ্ͷࣄΛͤ͞Δͱɺ٘ਜ਼ΛੜΉ • ඞཁҎ্ͳstateͷอ࣋ɾར༻ • ίϯϙʔωϯτͷதͰXHR • = ႈੑΛࣦ͏
• = ૄ݁߹Ͱͳ͘ͳΔ
ඞཁҎ্ʹঢ়ଶΛ࣋ͨͤͳ͍ • ඞཁҎ্ʹঢ়ଶΛ࣋ͨͤΔͱ • ಉ͡Λ֎͔Β༩͑ͨͱͯ͠ɺు͖ग़͞ ΕΔDOM͕ҧ͏ͷʹͳΔՄೳੑ͕͋Δ • = ςετ͕ࠔʹͳΔ
෭࡞༻ͷ͋ΔߦҝΛؚΊͳ͍ • ෭࡞༻ͷ͋Δߦҝίϯϙʔωϯτͷ֎Ͱ͖͢ • XHRɺWeb StorageͷΞΫηεͳͲ • FluxͷStoreΛsubscribe͢ΔͳͲ • =
݁Ռతʹঢ়ଶΛ࣋ͬͯ͠·͏ • = ґଘ͕૿͑ɺςετ͕ࠔʹͳΔ
ίϯϙʔωϯτ͕࠶ར༻ ͞ΕΔ͜ͱΛલఏʹ͢Δ
componentDidMountʹҙ • componentDidMountͰɺwriteͳ࡞༻ͷ͋Δ Flux ActionΛݺΜͰ͍Δ • ίϯϙʔωϯτΛmount͚ͨͩ͠Ͱɺ ଞͷίϯϙʔωϯτʹ࡞༻ͯ͠͠·͏ • =
ίϯϙʔωϯτͷ෭࡞༻
ʮͲ͏͏͔ʯʮ͏࣌ʯʹ • ίϯϙʔωϯτࣗମͷҐஔαΠζΛࢦఆ͢ ΔCSSΑΖ͘͠ͳ͍ • ͦΕʮίϯϙʔωϯτΛͲ͏͏͔ʯͱ ͍͏Ͱ͋ͬͯɺʮίϯϙʔωϯτͷఆٛʯ ͱίϯςΩετ͕ҟͳͬͯ͠·͏ • =
ผͷॴʹͦͷ··ஔ͚ͳ͍
ίϯϙʔωϯτͱ ͦ͏Ͱͳ͍ͷΛ ໌֬ʹ͚Δ
ʮͦ͏Ͱͳ͍ͷʯඞཁ • ႈੑͷ͋ΔίϯϙʔωϯτͷΈͰΫϥΠΞ ϯταΠυͷΞϓϦέʔγϣϯ࡞Εͳ͍ • ୭͔͕ঢ়ଶΛ࣋ͬͨΓɺXHR͢Δඞཁ͕͋Δ • ແཧͷͳ͍Α͏ʹઃܭ͢Δʹɺ ʮͦ͏Ͱͳ͍ͷʯඞཁ
ςετՄೳൣғΛ͛ΔͨΊʹ • ComponentͷͱͳΔఘΊΔ • ঢ়ଶΛ࣋ͪɺFlux StoreΛsubscribe͢Δ • ίϯϙʔωϯτʹpropsΛ͢ • Ϣχοτςετ͕ෆՄೳͳ།Ұͷଘࡏ
• = ΘΓʹଞͷͯ͢ͷςετ͕༰қʹͳΔ
CSSઃܭͷΞϯαʔ
୯ҐΛ߹ΘͤΔ • 1 ίϯϙʔωϯτ = 1 BEM Blockͱ͔ʹ͢Δ • ϑΝΠϧ໊ɺηϨΫλ໊߹ΘͤΔ
• ໊લͷڝ߹͕͕ΕΔ • ଞͷηϨΫλͷґଘӨڹ͕ͳ͘ͳΔ • = ΧδϡΞϧʹআͰ͖Δɾ࠶ར༻Ͱ͖Δ
·ͱΊ
Reactͱίϯϙʔωϯτ • Reactίϯϙʔωϯτࢦ • ίϯϙʔωϯτɺ -> DOM มث ͱͯ͠ ػೳ͢Δ
ίϯϙʔωϯτࢦ 3ͭͷ๏ଇ • -> DOM มث Ͱ͋Δ͜ͱΛప͢Δ • ࠶ར༻͞ΕΔ͜ͱΛલఏʹ͢Δ
• ίϯϙʔωϯτͱͦ͏Ͱͳ͍ͷΛ໌֬ʹ ͚Δ
ϝϦοτ • ςελϒϧ • ႈੑͱૄ݁߹Ͱ͋Δ͜ͱ͕୲อ͞ΕΔ • ΧδϡΞϧͳมߋɾআͱ࠶ར༻͕Մೳ • ߴͳPDCAαΠΫϧʹऑ͘ͳ͍ •
CSSઃܭॿ͚Δ
ΈΜͳReact͓͏ʂ
Thank you for listening :)