Front-end Beer Bash Vue.js LT

Angular vs React vs Vue.js と名を冠したイベントにて、
他のフレームワークと比べた場合のVue.jsの魅力についてお話しました。

お喋りがほとんどだったのでスライドで伝わりづらいですが、
部分的に型安全にしたい場合やstate管理をしたい場合の方法などにも触れています。

Transcript

2. ࣗݾ঺հ w ϏζϦʔνࣄۀͰ"OHVMBSɺࣾ಺༻ϓϩμΫτͰ7VFKT ʹ௅ઓத
   w ϏζϦʔνࣄۀͰ͸"OHVMBSಋೖʹ͋ͨͬͯΞʔΩς Ϋνϟͷߏஙɺ࣮૷ɺࣾһʹରͯ͠ͷ஌ࣝͷܒ໤׆ಈ Λߦ͏
   w ͳΜͰ΋ίϯϙʔωϯτԽ͕ͨ͠Δ
   w ͳΜͰ΋ܕ҆શʹ͕ͨ͠Δ
   w ࠷ۙকعʹϋϚͬͯΔʢ౻Ҫ࢛ஈޮՌʣ
   w िʹ࠷௿ճ͸ࣾһͱҿΜͰΔ
   w ҿΉ༑ୡ͸͋·Γ͍ͳ͍ͷͰ༑ୡʹͳ͍ͬͯͩ͘͞ খࢬ
   ༏ॣʢ͑ͩ͜
   ·͞ͱ͠ʣ
   ࡀ
   ಠ਎
   
3. ΞδΣϯμ  7VFKTΛར༻͍ͯ͠ΔࢲͷνʔϜߏ੒
    νʔϜن໛ʹ߹Θͤͨखܰ͞
    41"ͷTUBUF؅ཧͱɺ੩తܕ෇͚
4. ΞδΣϯμ  7VFKTΛར༻͍ͯ͠ΔࢲͷνʔϜߏ੒
    νʔϜن໛ʹ߹Θͤͨखܰ͞
    41"ͷTUBUF؅ཧͱɺ੩తܕ෇͚
5. 7VFKTΛར༻͍ͯ͠ΔࢲͷνʔϜߏ੒ $ σβΠφʔ 1. ΤϯδχΞ໊
6. αʔόʔαΠυΤϯδχΞ΋ϑϩϯτΤϯυͷ
   7VFKTΛར༻͢Δਓ͸࣍ͷΑ͏ͳߏ੒ 7VFKTΛར༻͍ͯ͠ΔࢲͷνʔϜߏ੒
7. $ ΤϯδχΞ໊ 7VFKTΛར༻͍ͯ͠ΔࢲͷνʔϜߏ੒
8. গͳ͍ਓ਺͚ͩͲ݁ߏͰ͔͍͜ͱ΍ͬͯ·͢
   ʢࣾ಺ϓϩμΫτͳͷͰ಺༰͸ݴ͑·ͤΜ☺ʣ 7VFKTΛར༻͍ͯ͠ΔࢲͷνʔϜߏ੒
9. ͦΜͳνʔϜΛࢧ͍͑ͯΔͷ͸ʜ 7VFKTΛར༻͍ͯ͠ΔࢲͷνʔϜߏ੒
10. 7VFKTΛར༻͍ͯ͠ΔࢲͷνʔϜߏ੒
11. ·͋ଞʹ΋৭ʑ͋Γ·͚͢Ͳʜ 7VFKTΛར༻͍ͯ͠ΔࢲͷνʔϜߏ੒
12. ΞδΣϯμ  7VFKTΛར༻͍ͯ͠ΔࢲͷνʔϜߏ੒
     νʔϜن໛ʹ߹Θͤͨखܰ͞
     41"ͷTUBUF؅ཧͱɺ੩తܕ෇͚
13. νʔϜن໛ʹ߹Θͤͨखܰ͞ νʔϜن໛͕খ͍͞৔߹ɺ
    ͲΜͳϑϩϯτΤϯυͷߏ੒͕࠷దͳͷ͔ʁ
14. νʔϜن໛ʹ߹Θͤͨखܰ͞ ֶशίετ͕ߴ͘ͳ͘ "OHVMBS͸5ZQF4DSJQUͷֶश͕΄΅ඞਢɻ
    7VFKT͸೔ຊޠυΩϡϝϯτ͕ॆ࣮͍ͯͯ͠ɺ࢝Ί΍͍͢ʂ
15. νʔϜن໛ʹ߹Θͤͨखܰ͞ ެࣜͷ$-*ʹΑΔελʔλʔΩοτ͕༏लͰ ίϚϯυҰൃͰෳࡶͳ؀ڥ΋ग़དྷ্͕Γʂ
    ॳΊͯ͜͏͍ͬͨ؀ڥΛ࡞Δํʹ΋༏͍͠Ͱ͢ʂʢ͜Ε͸"OHVMBS΋3FBDU΋Ұॹʣ
16. νʔϜن໛ʹ߹Θͤͨखܰ͞ ίϯϙʔωϯτࢦ޲Ͱ࣮૷͕Ͱ͖ͯ ͜͜΋"OHVMBSɺ3FBDUͱҰॹ͚ͩͲɺ7VFKT͸ঘߋʹ؆୯ʹίϯϙʔωϯτ࣮૷͕Ͱ͖Δҹ৅
17. νʔϜن໛ʹ߹Θͤͨखܰ͞ 3FEVYɺ'MVYʹෛ͚ͳ͍TUBUF؅ཧɺ
    WVFY͕͋Δ
18. νʔϜن໛ʹ߹Θͤͨखܰ͞ ϩΰ͕͔͍͍ͬ͜ʂʂʂͦΜͳϥΠϒϥϦ͸ɺͦ͏ʜ
19. 7VFKT·͡࠷ߴ ʢ"OHVMBS೿͚ͩͲʣ
20. ΞδΣϯμ  7VFKTΛར༻͍ͯ͠ΔࢲͷνʔϜߏ੒
     νʔϜن໛ʹ߹Θͤͨखܰ͞
     41"ͷTUBUF؅ཧͱɺ੩తܕ෇͚
21. 41"ͷTUBUF؅ཧͱ੩తܕ෇͚ 41"Λ࡞Δ࣌Ұ൪ࠔΔͷ͸TUBUF؅ཧʜ
22. Ͱ΋େৎ෉ɻ 41"ͷTUBUF؅ཧͱ੩తܕ෇͚
23. WVFY͕͋Δ΋ͷʂʂʂʂʂ 41"ͷTUBUF؅ཧͱ੩తܕ෇͚
24. WVFY͸3FEVY΍'MVYͷྲྀΕΛ͘Μͩ
    TUBUF؅ཧͷ࢓૊ΈͳͷͰɺ
    աڈʹ࢖༻ܦݧͷ͋Δํʹ͸਌͠Έ΍͍͢Ͱ͢ɻ 41"ͷTUBUF؅ཧͱ੩తܕ෇͚
25. ͔͠͠ɺ7VFKT͸5ZQF4DSJQU͕લఏͰ͸
    ͳ͍ͷͰɺTUBUF؅ཧ΋ܕ҆શͰͳ͍ʜෆ҆ɻ 41"ͷTUBUF؅ཧͱ੩తܕ෇͚
26. Ͱ΋େৎ෉ɻ 41"ͷTUBUF؅ཧͱ੩తܕ෇͚
27. ͕͋Δ΋ͷʂʂʂʂʂ 41"ͷTUBUF؅ཧͱ੩తܕ෇͚
28. qPX͸+BWB4DSJQUͰ੩తܕ෇͚Λ෦෼తʹͰ΋
    ࠾༻Ͱ͖ΔνΣοΧʔ 41"ͷTUBUF؅ཧͱ੩తܕ෇͚
29. ͦΕ͚ͩἧͬͯΔͳΒ 41"ͷTUBUF؅ཧͱ੩తܕ෇͚
30. 7VFKT΍ͬͺ࠷ߴ͡ΌΜʂ ʢ"OHVMBS೿͚ͩͲʣ