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
360
コンポーネント指向による、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
7.1k
なぜprottか
axross
4
2.6k
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
axross
2
1.3k
gulpを使うと彼女ができるよ - かんたんな紹介とハンズオン
axross
2
990
Other Decks in Technology
See All in Technology
IBC 2024 動画技術関連レポート / IBC 2024 Report
cyberagentdevelopers
PRO
1
110
なぜ今 AI Agent なのか _近藤憲児
kenjikondobai
4
1.4k
Application Development WG Intro at AppDeveloperCon
salaboy
0
190
CDCL による厳密解法を採用した MILP ソルバー
imai448
3
140
複雑なState管理からの脱却
sansantech
PRO
1
150
EventHub Startup CTO of the year 2024 ピッチ資料
eventhub
0
120
Introduction to Works of ML Engineer in LY Corporation
lycorp_recruit_jp
0
140
ドメインの本質を掴む / Get the essence of the domain
sinsoku
2
160
Engineer Career Talk
lycorp_recruit_jp
0
190
VideoMamba: State Space Model for Efficient Video Understanding
chou500
0
190
ISUCONに強くなるかもしれない日々の過ごしかた/Findy ISUCON 2024-11-14
fujiwara3
8
870
個人でもIAM Identity Centerを使おう!(アクセス管理編)
ryder472
4
230
Featured
See All Featured
KATA
mclloyd
29
14k
The Language of Interfaces
destraynor
154
24k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
900
Building a Scalable Design System with Sketch
lauravandoore
459
33k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
RailsConf 2023
tenderlove
29
900
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
[RailsConf 2023] Rails as a piece of cake
palkan
52
4.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
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 :)