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
490
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.5k
React Hooksで美しいコードを書く / Writing beautiful code using React Hooks
tetsuyanegishi
0
190
TypeScriptの型定義が JavaScriptのバグを駆逐する
tetsuyanegishi
3
930
AWS Amplifyで作るサーバーレスバックエンド
tetsuyanegishi
3
1.9k
リアルタイムデータベース Cloud Firestore入門
tetsuyanegishi
10
8.7k
ブロックチェーンのマイニングとはなにか
tetsuyanegishi
1
93
スクラム開発の手法と実例
tetsuyanegishi
0
240
Other Decks in Programming
See All in Programming
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
kajitack
3
440
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
560
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
160
フロントエンドのパフォーマンスチューニング
koukimiura
6
2.3k
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
180
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
170
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
130
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
6.7k
Hack Claude Code with Claude Code
choplin
8
2.8k
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
4
600
QA x AIエコシステム段階構築作戦
osu
0
150
AI Ramen Fight
yusukebe
0
110
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
How to train your dragon (web standard)
notwaldorf
96
6.1k
How to Ace a Technical Interview
jacobian
278
23k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
RailsConf 2023
tenderlove
30
1.2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
For a Future-Friendly Web
brad_frost
179
9.8k
Rails Girls Zürich Keynote
gr2m
95
14k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
850
Become a Pro
speakerdeck
PRO
29
5.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
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) ٕज़ධࣾ