Why React and not jQuery?

社内LT大会用のスライドです。

Transcript

1. Why React? 
 and not jQuery? ίϯϙʔωϯτࢦ޲ͳUI։ൃ͕ ͳͥྲྀߦ͍ͬͯΔͷ͔ʁ @maechabin
2. jQueryਖ਼௚͠ΜͲ͘ͳ͍Ͱ͔͢ʁ
3. ྫ͑͹͜Μͳέʔε
4. ඇಉظͰݕࡧ݁Ռ͕දࣔ͞ΕΔը໘ ݕࡧ ৚݅A ৚݅B ৚݅C ೖྗʮΩʔϫʔυʯͱબ ୒ͨ͠ʮ৚݅ʯʹΑͬͯ ݕࡧ݁Ռ͕දࣔ͞ΕΔ
5. ༧૝͞ΕΔ࣮૷ґཔ • Ωʔϫʔυ͕ೖྗ͞Ε͍ͯͳ͍࣌͸ɺݕࡧϘλϯΛԡͤͳ͍Α͏ʹͨ͠ ͍ɻ·ͨೖྗͨ͠Ωʔϫʔυ͸ݕࡧϘλϯΛԡͨ͠ޙ΋ɺอ͍࣋ͨ͠ɻ • ৚݅Aͱ৚݅BΛબ୒ͨ࣌͠͸ಉ͡ϑΥʔϚοτͷݕࡧ݁ՌΛදࣔ͢Δ ͕ɺ৚݅CΛબ୒ͨ࣌͠͸ɺҟͳͬͨϑΥʔϚοτͷݕࡧ݁ՌΛදࣔ͞ ͍ͤͨɻ • ৚݅CΛબ୒͚ͨ࣌ͩ͠ɺݕࡧ݁Ռ͔Βͦͷ಺༰ΛฤूͰ͖ΔΑ͏ʹ ͠ɺฤूͨ͠Βͦͷ෦෼͚ͩഎܠ৭Λม͑ɺ͞Βʹݕࡧ݁ՌͷҰ൪্ʹ ද͍ࣔͤͨ͞ɻ • ݕࡧϘλϯΛͳͯ͘͠ɺΩʔϫʔυ΍৚݅Λมߋ͢Δ౓ʹɺݕࡧ݁Ռ͕ දࣔ͞ΕΔΑ͏ʹ͍ͨ͠ɻ Etc…
6. jQueryΛ࢖ͬͯͲ͏࣮૷ํ͢Δ͔ ॠ࣌ʹΠϝʔδͰ͖·͔͢ʁ
7. jQuery͠ΜͲ͍Ͱ͢ΑͶ…
8. React͕͍͍Αͱ͍͏࿩Λ લஔ͖͸͜Ε͘Β͍ʹͯ͠ ͜Ε͔Β͍͖ͯ͠·͢ ͱ͍͏͜ͱͰ
9. ͯ͞ɺReactͬͯԿʁ
10. Reactͱ͸ • 2013೥͔ΒFacebook͕த৺ͱͳͬͯ։ൃ͍ͯ͠ΔUI ߏஙͷͨΊͷJavaScriptϥΠϒϥϦ • AngularͳͲͷϑϨʔϜϫʔΫͱಉ౳ʹѻΘΕͨΓ͠ ͍ͯΔ͕ɺ͋͘·Ͱ΋ViewΛߏங͢ΔͨΊͷ΋ͷ • େखͷWebαʔϏεถYahoo!ɺAirBnBɺNetflixͳͲ͕ ੵۃతʹ࠾༻ • ಺෦Ͱঢ়ଶΛ؅ཧ͠ɺঢ়ଶʹมߋ͕͋ΔͨͼʹView શମΛϨϯμϦϯά͢Δ෋߽తͳΞϓϩʔν • SPAΛ࣮૷͢Δࡍʹ໾ཱͭ
11. Reactͷಛ௃ 1. ίϯϙʔωϯτࢦ޲ 2. VirtualDOM 3. σʔλͷྲྀΕ͸Ұํ޲ͷΈ https://facebook.github.io/react/
12. ίϯϙʔωϯτࢦ޲ • ReactͰ͸ɺViewͷ֤ύʔπΛίϯϙʔωϯτ୯ ҐͰ࡞ΓɺίϯϙʔωϯτΛ૊Έ߹ΘͤͯView Λ࣮૷͢Δ ݕࡧ ৚݅A ৚݅B ৚݅C
13. ίϯϙʔωϯτࢦ޲ʹΑΓ • React͕಺෦ʹอ͍࣋ͯ͠Δʮঢ়ଶʯʹ߹Θͤͯ ίϯϙʔωϯτΛ૊Έ߹ΘͤΔ͜ͱͰɺʮঢ়ଶʯ ʹ߹ΘͤͨViewͷߏங͕͠΍͘͢ͳΔ • ෦඼୯ҐͰॻ͘ͷͰɺ୭Ͱ΋؆୯ʹॻ͚Δ • ΧϓηϧԽʹΑΔอकੑ͕ߴ·Δ • ·ͨɺෳ਺ਓͰͷ։ൃ΍ςετ͕͠΍͘͢ͳΔ ͱ͍ͬͨϝϦοτ΋͋Δ
14. VirtualDOM • Reactͷίϯϙʔωϯτ͸ɺVirtualDOMͱ͍͏Ծ ૝తͳDOMΛ࢖࣮ͬͯ૷͠ɺ࠷ऴతʹϒϥ΢β ʹϨϯμϦϯά͢Δ࣌ʹຊ෺ͷDOMʹม׵͢Δ ঢ়ଶAͷ࣌ͷ ίϯϙʔωϯτ ʢVirtualDOMʣ ঢ়ଶBͷ࣌ͷ ίϯϙʔωϯτ ʢVirtualDOMʣ ঢ়ଶAͷ࣌ͷ View ʢ࣮DOMʣ React ϒϥ΢β ঢ়ଶAͷ࣌ͷDOMΛ ϨϯμϦϯά ʢVirtualDOMΛ࣮DOMʹม׵ʣ
15. VirtualDOM͸଎͍ ঢ়ଶAͷ࣌ͷ ίϯϙʔωϯτ ʢVirtualDOMʣ ঢ়ଶBͷ࣌ͷ ίϯϙʔωϯτ ʢVirtualDOMʣ ঢ়ଶBͷ࣌ͷ View ʢ࣮DOMʣ • DOMͷશͯΛϨϯμϦϯά͍ͯ͠ΔΑ͏ʹৼ෣ͬ ͍ͯΔ͕ɺ࣮ࡍ͸ίϯϙʔωϯτΛ࣮DOMʹϨϯ μϦϯά͢Δࡍʹɺલޙͷঢ়ଶΛൺֱ͠ɺࠩ෼ ͷΈߋ৽͍ͯ͠ΔͷͰɺ͔ͳΓߴ଎ɻ ঢ়ଶAͷ࣌ͷ View ʢ࣮DOMʣ ϒϥ΢β ϒϥ΢β React લޙͷVirtualDOMΛൺֱ ࠩ෼ͷΈ ߋ৽
16. Ұํ޲ੑͷσʔλϑϩʔ • ReactͷVirtualDOM͸ɺrootίϯϙʔωϯτΛ௖ ఺ͱͨ͠πϦʔߏ଄ʹͳ͓ͬͯΓɺσʔλ͸਌ ͔Βࢠʹ͔͠ྲྀΕͳ͍ɻࢠ͔Β਌ʹ͸ྲྀΕͳ ͍ɻʮঢ়ଶʯ͸ඞͣrooίϯϙʔωϯτ͕࣋ͭɻ × Rootίϯϙʔωϯτʢঢ়ଶΛ࣋ͭʣ ίϯϙʔωϯτ ʢঢ়ଶΛ࣋ͨͳ͍ʣ ίϯϙʔωϯτ ʢঢ়ଶΛ࣋ͨͳ͍ʣ Rootίϯϙʔωϯτ ͷอ࣋͢Δʮঢ়ଶʯ ʹΑͬͯͦͷԼʹඥ ෇͘ίϯϙʔωϯτ ͕͞ΕΔ VirtualDOM
17. Ұํ޲ੑσʔλϑϩʔͷϝϦοτ • σʔλ͸ඞͣ਌͔Βࢠʹ͔͠ྲྀΕͳ͍ͷͰɺσʔ λͷྲྀΕ͕೺Ѳ͠΍͘͢ɺݟ௨͠ͷྑ͍ઃܭͱ ͳΔ • Rootͷঢ়ଶͷΈͰίϯϙʔωϯτશମ ʢVirtualDOMʣͷߋ৽͕Ͱ͖ΔͷͰɺViewͷঢ় ଶ؅ཧָ͕ʹͳΔ • ΞϓϦέʔγϣϯ͕௒ڊେʹͳͬͯ΋ɺഁ୼͠ ʹ͍͘
18. Reactɺ͜Μͳײ͡Ͱ͢
19. Α͘Α͘ݟͯΈΔͱ
20. ঢ়ଶʹదͨ͠HTMLΛు͖ग़͢
21. ·͞ʹ
 αʔόʔαΠυͰ΍͍ͬͯΔ͜ͱͱಉ͡
22. ͜Ε͕ࠓϑϩϯτΤϯυͰى͖͍ͯΔ
 ύϥμΠϜγϑτͰ͢
23. React
24. ͭͮ͘…
25. αϯϓϧͷ͝঺հ http://bit.ly/1Ua13pN Moba8.netͷηϧϑόοΫϒοΫϚʔΫػೳ ReactͱFacebook/FluxͰ࣮૷͍ͯ͠·͢ɻ
26. ͝ਗ਼ௌ
 ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ