jQuery -> React -> Vue と仕事で触った(予定込み)ので特徴を比較してみた

社内勉強会資料

Transcript

1. jQuery -> React -> Vue ͱ ࢓ࣄͰ৮ͬͨ(༧ఆࠐΈ)ͷͰ ಛ௃Λൺֱͯ͠Έͨ
3. Vue ΍ React Λ࢖͏ཧ༝͸ʁ jQuery ͱԿ͕ҧ͏ͷʁ Vue ͱ React ͬͯԿ͕ҧ͏ͷʁ ࠓ೔࿩͢͜ͱ
4. ࡞ͬͯΈͨαϯϓϧΞϓϦ શͯಉ͡ػೳͷ γϯϓϧͳTodoΞϓϦ
5. ؆୯ͳσϞ
6. jQuery: ൒೥͘Β͍(ͨ·ʔʹ৮Δఔ౓) React: 1೥ఔ౓(΄΅ຖ೔) Vue: 3, 4೔(ಠֶɻͨͩ͠1िؒޙʹ࢖͏৺ͮ΋Γ) ֤ٕज़ʹର͢Δࢲͷशख़౓
7. ࠓ೔࿩͞ͳ͍͜ͱ ɾjQueryपΓͷॻ͖ํ ɾReact/VueͷίΞػೳҎ֎ (Redux/Vuex/TypeScript/υΩϡϝϯτͷ ॆ࣮౓ etc…) ɾ֤ٕज़ͷਂ͍࿩
8. ͦͷଞ஫ҙ఺ ɾjQuery =ʮJSΛ༻͍ͨ௚઀తͳDOM؅ཧʯ ͱ͍͏ҙຯͰ࢖͍ͬͯ·͢ ɾݸਓͷײ૝ΛؚΈ·͢
9. Q. Vue ΍ React Λ࢖͏ཧ༝͸ʁ jQuery ͱͦΜͳʹҧ͏ͷʁ
10. A1. ಈతͳUIΛ࡞Δͷʹָ͔ͩΒ A2. ΘΓͱࠜຊతʹҧ͏
11. jQuery(on Rails) Ͱ࡞ͬͨTodoΞϓϦ slim(html)
12. jQuery(on Rails) Ͱ࡞ͬͨTodoΞϓϦ .slim(html) 5PEP-JTUͷத਎͸+4ͰՃ͑ͯ ͍ͨ͘ΊTMJN্͸ۭ
    4+3͸࢖Θͳ͍
13. ΍ͬͯΔ͜ͱ submit͞Εͨࡍʹ… 1. Formೖྗ༗ແͷνΣοΫ 2. todoࣝผͷͨΊͷidΛࢉग़ 3. todoͷHTMLཁૉΛ࡞੒ 4. deleteϘλϯʹΠϕϯτ௥Ճ 5. ࡞੒ͨ͠HTMLΛDOMʹ൓ө .js     
14. .js ͭΒΈϙΠϯτ ࠷ऴతʹͲΜͳݟͨ໨ʹͳ Δ͔෼͔Γʹ͍͘ .slim(html)
15. ͜ΕΛղܾ͢Δͷ͕͍ͭ͜Β
16. ղܾखஈ ɾએݴతUI ɾԾ૝DOM
17. VueͰ࡞ͬͨTodoΞϓϦ Todo.vue TodoList.vue TodoForm.vue
18. Todo.vue ݟͨ໨ ঢ়ଶ ϩδοΫ
19. TodoList.vue 5PEPWVF͔Βɺ
    UPEPTΛड͚औΔ ࠷ऴతͳ5PEP-JTU ͷ׬੒ܗͷݟͨ໨Λ એݴ͢Δ
20. એݴతUI ࠷ऴతͳݟͨ໨Λએݴ͢Δ
21. ৗʹݟͨ໨ͷ࠷ऴܗΛએݴ͢Δ… -> Ϣʔβͷૢ࡞ͰͲ͕͜มΘͬͨͷ͔͸ؔ஌͠ͳ͍ -> ຖճHTMLશͯΛ࠶ඳը͢Δͬͯ͜ͱʁ -> ύϑΥʔϚϯεେৎ෉ʁ
22. ͦ͜Ͱొ৔͢Δͷ͕ Ծ૝DOM
23. Ծ૝%0.
    %0.ͱରԠ෇͍ͨ৘ใΛ࣋ͭ
    +BWB4DSJQUͷΦϒδΣΫτ ࣮%0.
    ࣮ࡍʹ)5.-Ͱϒϥ΢β্ʹ ඳը͞ΕΔ৘ใ 7VF΍ 3FBDUͷ ίʔυ React΋Vue΋ಉ͡
24. ৽͍͠
    ࣮%0. ৽͍͠
    Ծ૝%0. ❌ Ϣʔβૢ࡞Λ௚઀࣮DOMʹ ద༻͢ΔΘ͚Ͱ͸ͳ͍
25. ৽͍͠
    ࣮%0. ৽͍͠
    Ծ૝%0. ݹ͍
    Ծ૝%0. ྆ऀͷ
    ࠩ෼Λݕग़ ࠩ෼ͷΈΛ࣮%0.ʹద༻
    
    ύϑΥʔϚϯε☺
26. Q1. Vue ΍ React Λ࢖͏ཧ༝͸ʁ -> ಈతͳUIΛએݴతʹॻָ͚͔ͯͩΒ (ύϑΥʔϚϯε΋อূʂ) Q2. jQuery ͱͦΜͳʹҧ͏ͷʁ -> એݴతUI/Ծ૝DOM౳ɺ ࠜຊతʹҟͳΔ
27. Vue ΍ React Λ࢖͏ཧ༝͸ʁ jQuery ͱԿ͕ҧ͏ͷʁ Vue ͱ React ͬͯԿ͕ҧ͏ͷʁ ࠓ೔࿩͢͜ͱ
28. Q. Vue ͱ React ͬͯԿ͕ҧ͏ͷʁ
29. A. ͦΜͳݴ͏΄ͲมΘΒͳ͍Α͏ͳʁ (Vueʹ৮Εͯ1िؒະຬͷײ૝)
30. A(ଓ͖).Կʹॏ͖Λஔ͍͍ͯΔ͔͸ ҧ͏͔΋
31. Todo.tsx React Ͱ࡞ͬͨTodoΞϓϦ TodoList.tsx TodoForm.tsx
32. ݟͨ໨ (એݴత) ঢ়ଶ ϩδοΫ Todo.tsx
33. Todo.vue ݟͨ໨ ঢ়ଶ ϩδοΫ ݟͨ໨ ঢ়ଶ ϩδοΫ Todo.tsx
34. ਖ਼௚গ͠ॻ͚ͩ͘ͳΒ React΋Vue΋ ͦΜͳʹมΘΒͳ͍ (վΊͯVueʹ৮Εͯ1िؒະຬͷײ૝)
35. Ծ૝%0.
    %0.ͱରԠ෇͍ͨ৘ใΛ࣋ͭ
    +BWB4DSJQUͷΦϒδΣΫτ ࣮%0.
    ࣮ࡍʹ)5.-Ͱϒϥ΢β্ʹ ඳը͞ΕΔ৘ใ 7VF΍ 3FBDUͷ ίʔυ
    એݴత6* React΋Vue΋એݴతͳUI & Ծ૝DOMɻ ͞Βʹݴ͑͹ίϯϙʔωϯτࢦ޲, σʔλϑϩʔ΋(΄΅)୯ํ޲ɻɻɻ
36. Ͱ΋΍ͬͺΓҧ͏఺΋͋Δ
37. 1. JavaScriptͱͷڑ཭ײ 2. ʮݟͨ໨ʯͷදݱʹର͢Δࢥ૝
38. JavaScriptͱͷڑ཭ײ React͸ͱʹ͔͘ JSϑϨϯυϦʔ Vue͸গ͠JS͔Β ڑ཭Λऔ͍ͬͯΔ
39. TodoForm.vue VueͰ͸σΟϨΫ ςΟϒΛ࢖͏͜ͱ ͰɺJavaScriptͷ هड़ྔ͕গͳΊͰ ॲཧΛ࣮ݱͰ͖Δ WNPEFMΛ࢖͏ͱ ͜ͷ৔߹͸ ϑΥʔ Ϝʹೖྗͨ͠಺༰͕ ࣗಈͰ൓ө͞ΕΔ
40. TodoForm.tsx ReactͰ͸ ಛผͳॻ͖ํΛ ֮͑ͳͯ͘΋ JavaScript Ͱ େମ޷͖ʹ Ͱ͖Δ ϑΥʔϜͷೖྗΠϕϯτ͕ى ͖ͨΒঢ়ଶΛߋ৽͢Δॲཧ
41. ʮݟͨ໨ʯͷදݱʹର͢Δࢥ૝ Vue͸UIΛ HTML+ॲཧͷຒΊࠐΈ Ͱදݱ͍ͯ͠Δ React͸UIΛ ؔ਺Ͱදݱ͍ͯ͠Δ
42. Template(HTML)Λ ॻ͚͹ͻͱ·ͣಈ͘ Vueͷ࠷খ୯Ґ
43. React͸͋͘·Ͱ ؔ਺Λهड़͢Δ Reactͷ࠷খ୯Ґ
44. Ծ૝%0.
    %0.ͱରԠ෇͍ͨ৘ใΛ࣋ͭ
    +BWB4DSJQUͷΦϒδΣΫτ ࣮%0.
    ࣮ࡍʹ)5.-Ͱϒϥ΢β্ʹ ඳը͞ΕΔ৘ใ 7VF΍ 3FBDUͷ ίʔυ
    એݴత6* Vue΋React΋࠷ऴతʹԾ૝DOM(JavaScriptͷΦϒδΣΫτ) Λ࡞Δͱ͍͏؍఺Ͱ͸มΘΒͳ͍͕ɻɻɻ
45. Ծ૝%0.
    %0.ͱରԠ෇͍ͨ৘ใΛ࣋ͭ
    +BWB4DSJQUͷΦϒδΣΫτ TemplateΛ࡞ΔͱԾ૝DOM(JSͷΦϒδΣΫτ)ʹ ม׵ͯ͘͠ΕΔΠϝʔδͷVue ม׵
46. Ծ૝%0.
    %0.ͱରԠ෇͍ͨ৘ใΛ࣋ͭ
    +BWB4DSJQUͷΦϒδΣΫτ JSͷؔ਺ͰԾ૝DOM(JSͷΦϒδΣΫτ)Λ ੜ੒͢ΔΠϝʔδͷReact ੜ੒
47. ςϯϓϨʔτ(HTML) ॏࢹͷVue JavaScript & ؔ਺ ॏࢹͷReact
48. ςϯϓϨʔτ(HTML) ॏࢹ͔ͩΒͦ͜ɻɻɻ ɾEasy ɾΘ͔Γ΍͍͢ ɾσβΠφʔ͞Μͱڠۀ͠қ͍ ɾֶशۂઢ͕؇΍͔ ɾ࠷ॳ͔ΒCSSͷαϙʔτ͕ް͍
49. JavaScript & ؔ਺ ॏࢹ͔ͩΒͦ͜ɻɻɻ ɾSimple ɾ֮͑Δ͜ͱ͕গͳ͍ ɾTypeScriptͱ૬ੑ͕ྑ͍ ɾςελϒϧ ɾεέʔϥϏϦςΟ͕ߴ͍
50. ͳΔ΄Ͳʂ ͡Ό͋Ͳ͕͍͍ͬͪ ͷʁʁʁ
51. …ϊʔίϝϯτ
52. Q. Vue ͱ React ͬͯԿ͕ҧ͏ͷʁ A. গ͠࢖͏͚ͩͳΒͦΕ΄ͲมΘΒ ͳ͍͔΋ A. ॏࢹ͍ͯ͠Δ΋ͷͷҧ͍͸ҙࣝ͠ ͨํ͕ྑ͍
53. Vue ΍ React Λ࢖͏ཧ༝͸ʁ jQuery ͱԿ͕ҧ͏ͷʁ Vue ͱ React ͬͯԿ͕ҧ͏ͷʁ ࠓ೔࿩͢͜ͱ
54. ·ͱΊ
55. ·ͱΊ )5.-
    ͍͖ͩ͢ +BWB4DSJQU
    ໋
56. Ҏ্Ͱ͢ɻ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠