Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React初学者が知らない
 コンポーネント分割テクニック

Avatar for Tetsuya Negishi Tetsuya Negishi
February 21, 2019
Programming
1
490

React初学者が知らない
 コンポーネント分割テクニック

We Are JavaScripters! @29th【初心者歓迎LT大会】

https://wajs.connpass.com/event/119722/
Avatar for Tetsuya Negishi

Tetsuya Negishi

February 21, 2019
Tweet

More Decks by Tetsuya Negishi

See All by Tetsuya Negishi
SOLIDから考える良いコンポーネントの設計原則
Avatar for Tetsuya Negishi tetsuyanegishi
1
1.4k
React Hooksで美しいコードを書く / Writing beautiful code using React Hooks
Avatar for Tetsuya Negishi tetsuyanegishi
0
180
TypeScriptの型定義が JavaScriptのバグを駆逐する
Avatar for Tetsuya Negishi tetsuyanegishi
3
920
AWS Amplifyで作るサーバーレスバックエンド
Avatar for Tetsuya Negishi tetsuyanegishi
3
1.9k
リアルタイムデータベース
Cloud Firestore入門
Avatar for Tetsuya Negishi tetsuyanegishi
10
8.7k
ブロックチェーンのマイニングとはなにか
Avatar for Tetsuya Negishi tetsuyanegishi
1
93
スクラム開発の手法と実例
Avatar for Tetsuya Negishi tetsuyanegishi
0
240

Other Decks in Programming

See All in Programming
ドメインモデリングにおける抽象の役割、tagless-finalによるDSL構築、そして型安全な最適化
Avatar for Kenichi SUZUKI knih
11
1.9k
Go1.25からのGOMAXPROCS
Avatar for kuro kuro_kurorrr
1
740
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
Avatar for Koichi NAKAGAWA knakagawa
1
110
実践ArchUnit ～実例による検証パターンの紹介～
Avatar for 荻原利雄 ogiwarat
2
270
Practical Tips and Tricks
for Working with 
Compose Multiplatform Previews (mDevCamp 2025)
Avatar for István Juhos stewemetal
0
120
無関心の谷
Avatar for kanayannet kanayannet
0
170
Datadog RUM 本番導入までの道
Avatar for Shintaro Matsumoto shinter61
1
290
AIコーディング道場勉強会#2 君（エンジニア）たちはどう生きるか
Avatar for misaki.otb misakiotb
1
230
AIエージェントによるテストフレームワーク Arbigent
Avatar for takahirom takahirom
0
380
Cline指示通りに動かない？ AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
Avatar for 葦沢かもめ kamomeashizawa
1
520
A2A プロトコルを試してみる
Avatar for azukiazusa azukiazusa1
1
290
Select API from Kotlin Coroutine
Avatar for Matsuda Jumpei jmatsu
1
170

Featured

See All Featured
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
81
9k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.5k
Designing for Performance
Avatar for Lara Hogan lara
609
69k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
31
1.2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
29
9.5k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.6k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
31
8.6k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
42
7.5k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
329
24k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
43
2.4k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
188
11k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
159
23k

Transcript

  1. Reactॳֶऀ͕஌Βͳ͍
 ίϯϙʔωϯτ෼ׂςΫχοΫ ࠜ؛ప໵

  2. ࣗݾ঺հ • ࠜ؛ప໵ • ϥϯαʔζגࣜձࣾ • ৽نࣄۀ • ओʹϑϩϯτ·ΘΓ୲౰ •

    ڵຯؔ৺ • React, Vue.js, TypeScript • αʔόʔϨε

  3. Reactίϯϙʔωϯτͱ͸

  4. Reactίϯϙʔωϯτͱ͸ • HTMLͷಠࣗλάͷΑ͏ʹ࢖͑Δύʔπ • σβΠϯ΍ಈ࡞ΛΧϓηϧԽ

  5. ͚ͩͲഁ୼΋͠΍͍͢

  6. ഁ୼ͨ͠ίϯϙʔωϯτ

  7. ഁ୼ͨ͠ίϯϙʔωϯτ

  8. ഁ୼ͨ͠ίϯϙʔωϯτ

  9. ഁ୼ͨ͠ίϯϙʔωϯτ  

  10. ͋ͬͱ͍͏ؒʹഁ୼

  11. ίϯϙʔωϯτΛ࡞Δͱ͖ʹҙ͍ࣝͯ͠Δ͜ͱ • ڞ௨ԽͰ͖Δͱ͜ΖΛݟམͱ͞ͳ͍ • ͨͱ͑͹ϨΠΞ΢τɼϚ΢εϗόʔ࣌ͷಈ࡞, ΫϦοΫ࣌ͷಈ࡞ • ίϯϙʔωϯτʹ֊૚Λ΋ͨͤΔ • ෼ׂෆՄೳͳ࠷খݶͷ୯Ґ(Atom)

    • ࠶ར༻ՄೳͰػೳ͕ݻఆԽ͠ͳ͍୯Ґ(Molecule) • ػೳ͕ݻఆԽ͞Εͨ୯Ґ(Organism) • ґଘੑΛແ࣮ͨ͘͠૷
  12. None

  13. ෼ׂෆՄೳͳ࠷খݶͷ୯Ґ(Atom)ʹ෼ׂ

  14. ෼ׂෆՄೳͳ࠷খݶͷ୯Ґ(Atom)ʹ෼ׂ

  15. ෼ׂෆՄೳͳ࠷খݶͷ୯Ґ(Atom)ʹ෼ׂ

  16. ػೳ͕ݻఆԽ͠ͳ͍୯Ґ(Molecule)ʹ෼ׂ

  17. Moleculeʹ෼ׂͰ͖Δͱ͜Ζߟ͑Δ

  18. ػೳ͕ݻఆԽ͠ͳ͍୯Ґ(Molecule)ʹ෼ׂ

  19. ػೳ͕ݻఆԽ͠ͳ͍୯Ґ(Molecule)ʹ෼ׂ

  20. ػೳ͕ݻఆԽ͞Εͨ୯Ґ(Organism)ʹ෼ׂ

  21. ίϯϙʔωϯτΛ࡞Δͱ͖ʹҙ͍ࣝͯ͠Δ͜ͱ • ڞ௨ԽͰ͖Δͱ͜ΖΛݟམͱ͞ͳ͍ • ͨͱ͑͹ϨΠΞ΢τɼϚ΢εϗόʔ࣌ͷಈ࡞, ΫϦοΫ࣌ͷಈ࡞ • ίϯϙʔωϯτʹ֊૚Λ΋ͨͤΔ • ෼ׂෆՄೳͳ࠷খݶͷ୯Ґ

    • ࠶ར༻ՄೳͰػೳ͕ݻఆԽ͠ͳ͍୯Ґ • ػೳ͕ݻఆԽ͞Εͨ୯Ґ • ґଘੑΛແ࣮ͨ͘͠૷

  22. Thank you!

  23. ࢀߟॻ੶ • Atomic Design ݎ࿚Ͱ࢖͍΍͍͢UIΛޮ཰ྑ͘ઃܭ͢Δ ޒ౻༎య(2018) ٕज़ධ࿦ࣾ