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
410
コンポーネント指向による、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
270
UIコンポーネント指向と「協働」
axross
6
2.8k
安全なJavaScriptを書く
axross
22
8.5k
Introduction to Redux
axross
34
22k
作るのにデザイナーもエンジニアもない
axross
14
7.2k
なぜprottか
axross
4
2.7k
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
axross
2
1.4k
gulpを使うと彼女ができるよ - かんたんな紹介とハンズオン
axross
2
1k
Other Decks in Technology
See All in Technology
「Verify with Wallet API」を アプリに導入するために
hinakko
1
250
いま注目しているデータエンジニアリングの論点
ikkimiyazaki
0
610
Function calling機能をPLaMo2に実装するには / PFN LLMセミナー
pfn
PRO
0
970
VCC 2025 Write-up
bata_24
0
180
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
takaking22
7
3.7k
Adminaで実現するISMS/SOC2運用の効率化 〜 アカウント管理編 〜
shonansurvivors
2
340
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
sansan_randd
0
110
綺麗なデータマートをつくろう_データ整備を前向きに考える会 / Let's create clean data mart
brainpadpr
2
260
Optuna DashboardにおけるPLaMo2連携機能の紹介 / PFN LLM セミナー
pfn
PRO
2
900
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
nishiuma
2
140
pprof vs runtime/trace (FlightRecorder)
task4233
0
170
成長自己責任時代のあるきかた/How to navigate the era of personal responsibility for growth
kwappa
3
290
Featured
See All Featured
A better future with KSS
kneath
239
17k
BBQ
matthewcrist
89
9.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Thoughts on Productivity
jonyablonski
70
4.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Fireside Chat
paigeccino
40
3.7k
Become a Pro
speakerdeck
PRO
29
5.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
960
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 :)