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

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

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

https://wajs.connpass.com/event/119722/

3d944ac176998af7e7b116993d06cdd1?s=128

Tetsuya Negishi

February 21, 2019
Tweet

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