Reactは、はやい！

Transcript

1. React͸ɺ͸΍͍ʂ Aoki Risa 2017.3.25

2. Reactͱ͸ʁ

3. දࣔʹಛԽͨ͠JSϥΠϒϥϦ • webϖʔδͳͲͰࢲ͕࣮ͨͪࡍʹݟ͍ͯΔը ໘ͷදࣔʹಛԽ • ྫ͑͹Facebookͷը໘͸React͕࢖ΘΕ͍ͯ Δ୅දྫ

4. React͕͸΍͍ͱ͸ʁ

5. ։ൃεϐʔυ͕͸΍͍ʁ

6. ૸Δͷ͕͸΍͍ʁ

7. ද͕ࣔ͸΍͍ʂʂ

8. Ͳ͏ͯ͠͸΍͍ͷʁ

9. DOM • ϒϥ΢βͰϖʔδΛݟΔ࣌جຊతʹͭ͘ΒΕΔ • ͜ΕΛ΋ͱʹඳը • ͜ΕΛͭ͘Δ͜ͱͰJavaScript͔ΒHTMLͷλάΛ͍͡Δ͜ͱ͕ Ͱ͖Δ https://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/#DOM

10. ࠓ·Ͱ͸… • جຊతʹɺड͚औͬͨ৘ใΛݩʹຖճDOMΛ ͍͔ͪΒ࡞੒ͯ͠ϒϥ΢βʹඳըΛߦ͏͜ͱ ͕ଟ͔ͬͨ 表示させなきゃ DOM ৘ใ ͓͍ͦʂ DOM…ϖʔδΛݟΔ࣌ͭ͘ΒΕΔ

11. ReactͰ͸... • ৘ใΛड͚औͬͯ΋͍͖ͳΓDOMΛͭ͘Βͳ͍ • ·ͣԾ૝DOMΛ࡞੒
 ˠԾ૝DOMͷ಺༰ΛݩʹDOMΛ࡞੒
 ˠϒϥ΢βʹඳը 表示させなきゃ DOM ॳظ৘ใ

    Ծ૝ DOM DOM…ϖʔδΛݟΔ࣌ͭ͘ΒΕΔ

12. Ծ૝DOM • ࣮ࡍͷDOMͱରʹͳΔɺԾͷDOM • DOMΑΓ΋͸΍͘࡞Δ͜ͱ͕Ͱ͖ΔΑ͏ʹ
 w w w ઃܭ͞Ε͍ͯΔ •

    ͜Ε͸৽͍͠৘ใ͕ೖ͖ͬͯͨͱ͖ʹେ͖ͳ ໾ׂΛՌͨ͢ʂ

13. ৽͍͠৘ใ͕ೖ͖ͬͯͨͱ͖ • ৽͍͠৘ใΛ΋ͱʹ৽͍͠Ծ૝DOMΛ͍͔ͪΒ࡞Δ
 ˠҰݸલͷԾ૝DOMͱ৽͍͠΋ͷΛൺֱͯ͠มߋ෼ΛΈΔ
 ˠมߋ͞Εͨͱ͜Ζ͚ͩDOMΛ࠶ߏங͢Δɹ
 ৽͍͠ Ծ૝ DOM ݹ͍ Ծ૝

    DOM DOM DOM…ϖʔδΛݟΔ࣌ͭ͘ΒΕΔ ͸΍͍ʂ ͸΍͍ʂ

14. ൺ΂ͯΈΔͱ… DOM ৽͍͠ ৘ใ ैདྷ React ৽͍͠ ৘ใ ৽͍͠ Ծ૝

    DOM DOM ൺֱͯ͠ ࠩ෼͚ͩ ࠶ߏங

15. ·ͱΊ Ծ૝DOMͷ͓͔͛Ͱɺ ReactΛ͔ͭ͑͹ૣ͘දࣔͰ͖Δʂ

16. ࢀߟʹͨ͠จݙɾαΠτ https://www.to-r.net/media/react-tutorial01/ https://techacademy.jp/magazine/5638 https://app.codegrid.net/entry/react-1#toc-2 http://blog.livedoor.jp/yo_miz/archives/53540189.html https://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/ #DOM ʰWebσϕϩούʔͷͨΊͷReact։ൃೖ໳ JavaScript UIϥΠϒϥϦͷجຊͱ׆༻ʱ

    ࣲాจ඙ஶ

17. ͋Γ͕ͱ͏͍͟͝·ͨ͠