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

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

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

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.5k
React Hooksで美しいコードを書く / Writing beautiful code using React Hooks
Avatar for Tetsuya Negishi tetsuyanegishi
0
190
TypeScriptの型定義が JavaScriptのバグを駆逐する
Avatar for Tetsuya Negishi tetsuyanegishi
3
940
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
96
スクラム開発の手法と実例
Avatar for Tetsuya Negishi tetsuyanegishi
0
240

Other Decks in Programming

See All in Programming
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
Avatar for Daichi Takeya taked137
0
190
AI時代のUIはどこへ行く？
Avatar for Yusuke Wada yusukebe
18
9.1k
🔨 小さなビルドシステムを作る
Avatar for Mutsuha Asada momeemt
4
690
ProxyによるWindow間RPC機構の構築
Avatar for syumai syumai
3
1.2k
Navigation 2 を 3 に移行する（予定）ためにやったこと
Avatar for yokomii yokomii
0
340
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
Avatar for cc4966 cc4966
2
270
楽して成果を出すためのセルフリソース管理
Avatar for clipnote clipnote
0
190
MCPでVibe Working。そして、結局はContext Eng（略）/ Working with Vibe on MCP And Context Eng
Avatar for r-kagaya rkaga
5
2.3k
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
Avatar for dafujii dafujii
1
640
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
Avatar for azukiazusa azukiazusa1
24
12k
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
Avatar for mazrean mazrean
1
290
そのAPI、誰のため？ Androidライブラリ設計における利用者目線の実践テクニック
Avatar for mkeeda mkeeda
2
1.8k

Featured

See All Featured
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.7k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
45
7.7k
KATA
Avatar for Megan Lloyd mclloyd
32
14k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.5k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
64
7.9k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
44
2.5k
Making Projects Easy
Avatar for Brett Harned brettharned
117
6.4k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
26
1.9k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.8k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k

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) ٕज़ධ࿦ࣾ