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.5k
React Hooksで美しいコードを書く / Writing beautiful code using React Hooks
Avatar for Tetsuya Negishi tetsuyanegishi
0
190
TypeScriptの型定義が JavaScriptのバグを駆逐する
Avatar for Tetsuya Negishi tetsuyanegishi
3
930
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
NEWT Backend Evolution
Avatar for Rodrigo Ramirez xpromx
1
130
AIともっと楽するE2Eテスト
Avatar for Yohei Maeda myohei
8
3k
코딩 에이전트 체크리스트: Claude Code ver.
Avatar for nacyot nacyot
0
910
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
Avatar for Ahmed EBEN HASSINE ahmedbhs123
0
210
PicoRuby on Rails
Avatar for makicamel makicamel
2
140
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
Avatar for nrs nrslib
2
1.1k
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
Avatar for bash0C7 bash0c7
1
920
レトロゲームから学ぶ通信技術の歴史
Avatar for kimkim0106 kimkim0106
0
100
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
Avatar for uutan1108 ohmori_yusuke
1
130
ISUCON研修おかわり会 講義スライド
Avatar for Yuki Yata arfes0e2b3c
1
460
Android 16KBページサイズ対応をはじめからていねいに
Avatar for mine2424 mine2424
0
370
Goで作る、開発・CI環境
Avatar for Shinpei Mine sin392
0
260

Featured

See All Featured
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
Done Done
Avatar for chrislema chrislema
184
16k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
54
6.5k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.7k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
1.9k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
229
22k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
10
970
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k

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