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
Tetsuya Negishi
February 21, 2019
Programming
1
470
React初学者が知らない コンポーネント分割テクニック
We Are JavaScripters! @29th【初心者歓迎LT大会】
https://wajs.connpass.com/event/119722/
Tetsuya Negishi
February 21, 2019
Tweet
Share
More Decks by Tetsuya Negishi
See All by Tetsuya Negishi
SOLIDから考える良いコンポーネントの設計原則
tetsuyanegishi
1
1.4k
React Hooksで美しいコードを書く / Writing beautiful code using React Hooks
tetsuyanegishi
0
180
TypeScriptの型定義が JavaScriptのバグを駆逐する
tetsuyanegishi
3
910
AWS Amplifyで作るサーバーレスバックエンド
tetsuyanegishi
3
1.8k
リアルタイムデータベース Cloud Firestore入門
tetsuyanegishi
10
8.6k
ブロックチェーンのマイニングとはなにか
tetsuyanegishi
1
84
スクラム開発の手法と実例
tetsuyanegishi
0
230
Other Decks in Programming
See All in Programming
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.7k
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
360
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
130
動作確認やテストで漏れがちな観点3選
starfish719
6
1k
Introduction to kotlinx.rpc
arawn
0
630
Formの複雑さに立ち向かう
bmthd
1
720
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
370
GAEログのコスト削減
mot_techtalk
0
110
【PHP】破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
120
AWS Lambda functions with C# 用の Dev Container Template を作ってみた件
mappie_kochi
0
240
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
730
Domain-Driven Transformation
hschwentner
2
1.9k
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Into the Great Unknown - MozCon
thekraken
35
1.6k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Six Lessons from altMBA
skipperchong
27
3.6k
Become a Pro
speakerdeck
PRO
26
5.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Transcript
Reactॳֶऀ͕Βͳ͍ ίϯϙʔωϯτׂςΫχοΫ ࠜ؛ప
ࣗݾհ • ࠜ؛ప • ϥϯαʔζגࣜձࣾ • ৽نࣄۀ • ओʹϑϩϯτ·ΘΓ୲ •
ڵຯؔ৺ • React, Vue.js, TypeScript • αʔόʔϨε
Reactίϯϙʔωϯτͱ
Reactίϯϙʔωϯτͱ • HTMLͷಠࣗλάͷΑ͏ʹ͑Δύʔπ • σβΠϯಈ࡞ΛΧϓηϧԽ
͚ͩͲഁ͍͢͠
ഁͨ͠ίϯϙʔωϯτ
ഁͨ͠ίϯϙʔωϯτ
ഁͨ͠ίϯϙʔωϯτ
ഁͨ͠ίϯϙʔωϯτ
͋ͬͱ͍͏ؒʹഁ
ίϯϙʔωϯτΛ࡞Δͱ͖ʹҙ͍ࣝͯ͠Δ͜ͱ • ڞ௨ԽͰ͖Δͱ͜ΖΛݟམͱ͞ͳ͍ • ͨͱ͑ϨΠΞτɼϚεϗόʔ࣌ͷಈ࡞, ΫϦοΫ࣌ͷಈ࡞ • ίϯϙʔωϯτʹ֊ΛͨͤΔ • ׂෆՄೳͳ࠷খݶͷ୯Ґ(Atom)
• ࠶ར༻ՄೳͰػೳ͕ݻఆԽ͠ͳ͍୯Ґ(Molecule) • ػೳ͕ݻఆԽ͞Εͨ୯Ґ(Organism) • ґଘੑΛແ࣮ͨ͘͠
None
ׂෆՄೳͳ࠷খݶͷ୯Ґ(Atom)ʹׂ
ׂෆՄೳͳ࠷খݶͷ୯Ґ(Atom)ʹׂ
ׂෆՄೳͳ࠷খݶͷ୯Ґ(Atom)ʹׂ
ػೳ͕ݻఆԽ͠ͳ͍୯Ґ(Molecule)ʹׂ
MoleculeʹׂͰ͖Δͱ͜Ζߟ͑Δ
ػೳ͕ݻఆԽ͠ͳ͍୯Ґ(Molecule)ʹׂ
ػೳ͕ݻఆԽ͠ͳ͍୯Ґ(Molecule)ʹׂ
ػೳ͕ݻఆԽ͞Εͨ୯Ґ(Organism)ʹׂ
ίϯϙʔωϯτΛ࡞Δͱ͖ʹҙ͍ࣝͯ͠Δ͜ͱ • ڞ௨ԽͰ͖Δͱ͜ΖΛݟམͱ͞ͳ͍ • ͨͱ͑ϨΠΞτɼϚεϗόʔ࣌ͷಈ࡞, ΫϦοΫ࣌ͷಈ࡞ • ίϯϙʔωϯτʹ֊ΛͨͤΔ • ׂෆՄೳͳ࠷খݶͷ୯Ґ
• ࠶ར༻ՄೳͰػೳ͕ݻఆԽ͠ͳ͍୯Ґ • ػೳ͕ݻఆԽ͞Εͨ୯Ґ • ґଘੑΛແ࣮ͨ͘͠
Thank you!
ࢀߟॻ੶ • Atomic Design ݎ࿚Ͱ͍͍͢UIΛޮྑ͘ઃܭ͢Δ ޒ౻༎య(2018) ٕज़ධࣾ