jQueryよりVue.jsを使おう

Transcript

1. jQueryよりVue.jsを使おう！ 鈴木孝之 2018/06/01
2. "HFOEB ࣗݾ঺հ
   K2VFSZͷਏΈ
   7VFKTͷϝϦοτ
   7VFKTͷಋೖํ๏
3. 0.ࣗݾ঺հ ◆໊લ ླ໦ ޹೭(Suzuki Takayuki) ◆ࣗݾ঺հ ɾ1990೥ɺਆಸ઒ݝੜ·Εɻ ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ ɾ2015೥ʹϑϧεϐʔυʹೖࣾ͠ɺ2017೥ʹ ϑϦʔϥϯεΛ΍ͬͨޙʹ2017೥11݄ʹԭೄͰىۀɻ ◆झຯ ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺ໺ٿ؍ઓ ◆εΩϧ ɾPHP, Symfony2,CakePHP3,Laravel5, ɾJavaScript, backbone.js,Angular4
4. 0.ձࣾ঺հ ◆ձ໊ࣾ גࣜձࣾRe:Build ◆ॅॴ ԭೄݝԭೄࢢதԝ̍ஸ໨̍̒−̕ ◆ࣄۀ಺༰ ɾ೶ۀʹ͓͍ͯͷϑʔυϩεΛແ͘͢ ࣗࣾWEBαʔϏεͷاըɾ։ൃɻ ɾडୗ։ൃ ◆ࣾһ 4໊ ◆ΤϯδχΞͷಇ͖ํ ϦϞʔτϫʔΫՄೳͳࣗ༝ͳಇ͖ํΛਪ঑ͯ͠·͢ʂ
5. 0.ࣗݾ঺հ ΪʔΫϋ΢εͱ͸ɺओʹΤϯδχΞ΍ϓϩάϥ ϚʔΛ৬छͱ͢Δਓ΍ɺWeb͕޷͖ͳਓͳͲ͕ ڞʹॅΉίϯηϓτܕγΣΞϋ΢εͰ͢ʂ ΤϯδχΞͳͲ͕ଟ͍͜ͱ͔Βॅຽಉ࢜Ͱϓϩ άϥϛϯάΛڭ͑߹ͬͨΓ΋͠·͢ʂ
6. K2VFSZͷਏΈ
   
7. jQuery͸ؤுΕ͹ؤுΔ΄Ͳਏ͘ͳΔ
8. jQuery͸ؤுΕ͹ؤுΔ΄Ͳਏ͘ͳΔ
9. jQuery͸ؤுΕ͹ؤுΔ΄Ͳਏ͘ͳΔ jQueryͰ͜ͷ෦෼Λऔಘ͢Δ ৔߹ɺΊͬͪΌɺ೉͍͠
10. jQuery͸ؤுΕ͹ؤுΔ΄Ͳਏ͘ͳΔ $(“#parent”) .children('child-class') .children(‘child-class') .children('child-class'); Ծͷྫɿ ΊͬͪΌϝιουνΣʔϯ͠·ͬͯ͘ औಘ͠ͳ͍ͱ͍͚ͳ͍
11. 7VFKTͷϝϦοτ
12. Vue.jsͱ͸ MVCͷ೿ੜछͰ͋ΔɺGUIϥΠϒϥϦʹదͨ͠MVVMΛઃܭج൫ͱ ͯ͠ ࠾༻͠ɺߏங͞Ε͍ͯ·͢ɻ MVVMΛ࠾༻͍ͯ͠Δ͜ͱ͕ߏจͷཧղ͠΍͢͞ʹܨ͕͍ͬͯ· ͢ɻ MVVMΛ࠾༻ͨ͠ϑϨʔϜϫʔΫͰ͸දࣔͦͷ΋ͷͰ͋ΔViewɺ දࣔ͢ΔσʔλٴͼσʔλΛૢ࡞͢Δखଓ͖Λͻͱ·ͱΊʹͨ͠ View Model ͕෣୆্ͷ໾ऀͰ͢ɺͦΕΒΛ؅ཧ͢Δίϯτϩʔϥ(Controller)͸ ଘࡏ͢Δ΋ͷͷࠇࢠͷΑ͏ͳଘࡏͰϢʔβ͔Β͸Ӆṭ͞Ε͍ͯΔͨ ΊίʔυΛॻ͘ࡍʹҙࣝ͢Δඞཁ͸͋Γ·ͤΜɻ
13. Vue.jsͱ͸
14. શϖʔδSPAʹ͠ͳͯ͘ ΋ɺҰ෦෼͚ͩͷಋೖ͕ Ͱ͖Δʂ େن໛ͳϑϨʔϜϫʔΫͰ͋ΔAngularJSͰ͸ɺ AngularJSಠࣗͷϧʔϧʹଇͬͯWEBΞϓϦΛߏ ங͍ͯ͘͠ඞཁ͕͋Γ·͢ɻ ϧʔϧʹଇͬͯ։ൃ͢Ε͹ɺ΋ͪΖΜAngularJS ͸ੌ͘ߴ͍ੜ࢈ੑΛൃش͠·͢ɻ ͨͩɺ͜Ε్͕தͰଞͷϑϨʔϜϫʔΫʹ੾Γସ ͕͑Ͱ͖ͳ͍ཧ༝ʹ΋ͳ͍ͬͯΔͷͰ͢ɻ ͔͠͠ɺVue.jsͰ͸ࣗ෼ͷ޷Έͷ΍ΓํͰWEBΞ ϓϦΛߏங͍ͯ͘͜͠ͱ͕Ͱ͖·͢ɻɻ ʮֶशޮ཰͸ඇৗʹߴ͍ʯͱݴ͍ ੾Ε·͢ɻ ߏ଄΋γϯϓϧͰ೔ຊޠͷυΩϡ ϝϯτ΋ॆ࣮͍ͯ͠ΔͷͰɺֶशί ετ΋௿͍Ͱ͢ɻ HTMLɺCSSͱJavaScriptͷجૅΛ ֶश͢Ε͹࢖͍࢝ΊΔ͜ͱ͕Ͱ͖ ·͢ɻ ಋೖ͕؆୯ʂ ֶशίετ͕௿͍ 2.ϝϦοτɾಛ௃ γϯϓϧͰࣗ༝౓͕ߴ ͍ 2 ʙϝϦοτʙ 1 3
15. -BSBWFMͰͷ7VFKTͷಋೖํ๏
    
16. ॳظԽॲཧ
17. ΤϯτϦʔϙΠϯτ
18. ΤϯτϦʔϙΠϯτ Ξϯόαμʔ Ϟδϡʔϧ αϓϥΠϠʔ Ϟδϡʔϧ
19. summary-component chart-component Ϟδϡʔϧ
20. summary-component Ϟδϡʔϧ