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
390
コンポーネント指向による、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
250
UIコンポーネント指向と「協働」
axross
6
2.7k
安全なJavaScriptを書く
axross
22
8.4k
Introduction to Redux
axross
34
21k
作るのにデザイナーもエンジニアもない
axross
15
7.1k
なぜprottか
axross
4
2.7k
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
axross
2
1.4k
gulpを使うと彼女ができるよ - かんたんな紹介とハンズオン
axross
2
1k
Other Decks in Technology
See All in Technology
TanStack Start 技術選定の裏側 / Findy-Lunch-LT-TanStack-Start
iktakahiro
1
150
さくらのクラウド開発の裏側
metakoma
PRO
18
5.2k
分解し、導き、託す ログラスにおける“技術でリードする” 実践の記録
hryushm
0
340
SaaS公式MCPサーバーをリリースして得た学び
kawamataryo
5
1.3k
dbtとリバースETLでデータ連携の複雑さに立ち向かう
morookacube
0
890
"発信文化"をどうやって計測する?技術広報のKPI探索記/How do we measure communication culture?
bitkey
4
320
LLMの開発と社会実装の今と未来 / AI Builders' Community (ABC) vol.2
pfn
PRO
2
160
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
8
64k
Terraform にコントリビュートしていたら Azure のコストをやらかした話 / How I Messed Up Azure Costs While Contributing to Terraform
nnstt1
1
520
DynamoDB のデータを QuickSight で可視化する際につまづいたこと/stumbling-blocks-when-visualising-dynamodb-with-quicksight
emiki
0
160
転職したらMCPサーバーだった件
nwiizo
9
7.9k
Global Azure2025(GitHub Copilot ハンズオン)
tomokusaba
2
800
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.6k
Making Projects Easy
brettharned
116
6.2k
4 Signs Your Business is Dying
shpigford
183
22k
Code Review Best Practice
trishagee
68
18k
For a Future-Friendly Web
brad_frost
177
9.7k
GraphQLとの向き合い方2022年版
quramy
46
14k
Thoughts on Productivity
jonyablonski
69
4.6k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.7k
Docker and Python
trallard
44
3.4k
Balancing Empowerment & Direction
lara
0
17
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 :)