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
400
コンポーネント指向による、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
260
UIコンポーネント指向と「協働」
axross
6
2.8k
安全なJavaScriptを書く
axross
22
8.5k
Introduction to Redux
axross
34
22k
作るのにデザイナーもエンジニアもない
axross
15
7.2k
なぜprottか
axross
4
2.7k
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
axross
2
1.4k
gulpを使うと彼女ができるよ - かんたんな紹介とハンズオン
axross
2
1k
Other Decks in Technology
See All in Technology
形式手法特論:位相空間としての並行プログラミング #kernelvm / Kernel VM Study Tokyo 18th
ytaka23
3
150
S3 Glacier のデータを Athena からクエリしようとしたらどうなるのか/try-to-query-s3-glacier-from-athena
emiki
0
190
ビジネス文書に特化した基盤モデル開発 / SaaSxML_Session_2
sansan_randd
0
260
Foundation Model × VisionKit で実現するローカル OCR
sansantech
PRO
1
300
SRE新規立ち上げ! Hubbleインフラのこれまでと展望
katsuya0515
0
160
リリース2ヶ月で収益化した話
kent_code3
1
190
バクラクによるコーポレート業務の自動運転 #BetAIDay
layerx
PRO
1
850
マルチモーダル基盤モデルに基づく動画と音の解析技術
lycorptech_jp
PRO
4
530
Claude CodeでKiroの仕様駆動開発を実現させるには...
gotalab555
3
900
2025新卒研修・HTML/CSS #弁護士ドットコム
bengo4com
3
13k
AIに目を奪われすぎて、周りの困っている人間が見えなくなっていませんか?
cap120
1
430
2025-07-31: GitHub Copilot Agent mode at Vibe Coding Cafe (15min)
chomado
2
380
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Speed Design
sergeychernyshev
32
1.1k
A better future with KSS
kneath
238
17k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
4 Signs Your Business is Dying
shpigford
184
22k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
2.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Six Lessons from altMBA
skipperchong
28
3.9k
Automating Front-end Workflow
addyosmani
1370
200k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.7k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
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 :)