モダンJavaScriptフレームワークで技術的負債を作らないために

Transcript

1. ϞμϯJavaScriptϑϨʔϜϫʔΫͰ ٕज़తෛ࠴Λ࡞Βͳ͍ͨΊʹ גࣜձࣾϠϓϦ َ໦༔و
2. َ໦༔و ▸ 2017೥2݄ʹϠϓϦʹೖࣾ ▸ ೖࣾޙ͸ΠϯϑϥɺόοΫΤϯυɺϑϩϯτΤϯυΛܦݧ ▸ AWSɺAnsibleɺPHPɺLaravelɺRubyɺRuby on RailsɺJavaScriptɺ TypeScriptɺReact.jsɺVue.jsɺGolang ▸ ݱࡏ͸৽CMSͷαʔόʔαΠυʢGolangʣ࣮૷ɺϑϩϯτΤϯυ ʢVue.jsɺNuxt.jsʣ࣮૷ɺઃܭ ࣗݾ঺հ
3. ݱࡏ΍͍ͬͯΔ͜ͱ CMS2 CMS3 ৽CMS ʢ࣮૷தʣ Replace
4. ϞμϯJavaScriptϑϨʔϜϫʔΫͰ ೉͍͠ͱײ͍ͯͨ͡ͱ͜Ζ
5. ϞμϯJavaScriptϑϨʔϜϫʔΫͰ೉͍͠ͱײ͍ͯͨ͡ͱ͜Ζ ▸ ॻ͖ํͷࣗ༝౓͕ߴ͘ɺઃܭɾνʔϜͰ౷Ұ͢Δͷ͕೉͍͠ ▸ ίϯϙʔωϯτࢦ޲Ώ͑ʹɺ͓͓΋ͱͷσʔλ΍ؔ਺ͷ೺ Ѳ͕೉͍͠ ▸ σβΠφʔͱͷྖҬ͕ᐆດ
6. ίϯϙʔωϯτࢦ޲Ώ͑ʹɺ͓͓΋ͱͷσʔλ΍ؔ਺ͷ೺Ѳ͕೉͍͠
7. ϞμϯJavaScriptϑϨʔϜϫʔΫͰ೉͍͠ͱײ͍ͯͨ͡ͱ͜Ζ ▸ ॻ͖ํͷࣗ༝౓͕ߴ͘ɺઃܭɾνʔϜͰ౷Ұ͢Δͷ͕೉͍͠ ▸ ίϯϙʔωϯτࢦ޲Ώ͑ʹɺ͓͓΋ͱͷσʔλ΍ؔ਺ͷ೺ Ѳ͕೉͍͠ ▸ σβΠφʔͱͷྖҬ͕ᐆດ
8. ϑϩϯτΤϯυͱαʔόʔαΠυͷνʔϜମ੍ ϑϩϯτΤϯυ ΤϯδχΞ αʔόʔΤϯυ ΤϯδχΞ ໊̎ʢʴ໊̎ʣ ໊̓ HTMLɺCSSͳͲ σβΠϯҎ֎ͷ ෦෼Λ࣮૷͢Δ
9. σβΠφʔͱͷྖҬ͕ᐆດ ▸ (αʔόʔαΠυΤϯδχΞ໨ઢͰ)࣮ࡍʹॲཧ͕ಈ͘ͱ͜Ζ ·Ͱ΍Ζ͏ͱ͢Δͱɺίϯϙʔωϯτ͕ͳ͍ͱ࣮૷Ͱ͖ͳ ͍ ▸ ্هͷΑ͏ͳ෦෼͕ઌߦޙଓؔ܎ʹͳΔ ▸ ྆νʔϜͰ࢖༻͢ΔϥΠϒϥϦ΍ن໿౳Λॊೈʹ෼͚ΒΕͳ ͍
10. ରॲ͢ΔͨΊʹߦͬͨ͜ͱ
11. ը໘্Ϣʔεέʔεͷू໿
12. ը໘্Ϣʔεέʔεͷू໿ Vue.js σʔλ ؔ਺ ίϯϙʔωϯτ
13. ը໘্Ϣʔεέʔεͷू໿ Vue.js Vuex ίϯϙʔωϯτ σʔλ ΞΫγϣϯ
14. changeFieldTitle changeFieldTitle changeFieldTitle changeFieldTitle changeFieldTitle changeFieldTitle changeFieldTitle changeFieldBody addField changeFavicon changeField LinkTitle changeField LinkIcon onFocus outFocus save Vuex
15. ը໘্Ϣʔεέʔεͷू໿ Vue.js Vuex Golang ϑϩϯτΤϯυ ΤϯδχΞ αʔόʔαΠυ ΤϯδχΞ
16. Ϣʔεέʔεू໿ʹΑͬͯड͚ͨԸܙ ▸ ϑϩϯτ։ൃΛߦ͏αʔόʔαΠυΤϯδχΞ͕࣮૷͢Δ෦ ෼͕Vuexʹू໿͞ΕΔ͜ͱͰɺVue.jsͷࣄલ஌͕ࣝগͳͯ͘ ΋։ൃʹೖΔ͜ͱ͕Ͱ͖Δ ▸ σβΠφʔ͸ίϯϙʔωϯτ࡞੒ʹूதͰ͖Δ ▸ ֓ཁॻͱVuexͷactionsʢϢʔεέʔεʣΛݟΕ͹ɺը໘্ ͷϢʔεέʔεͱͦͷॲཧΛ೺ѲͰ͖Δ ▸ ڥք͕໌֬ͳͷͰద੾ͳείʔϓͰن໿ܾΊͳͲΛߦ͑Δ
17. ϓϩμΫτΛ࡞ΔνʔϜϕʔεͰ ઃܭ͢Δ͜ͱ ઃܭΛ௨ͯ͠େࣄͩͱࢥͬͨ͜ͱ
18. ϓϩμΫτΛ࡞ΔνʔϜϕʔεͰઃܭ͢Δ͜ͱ ▸ ن໿ΛܾΊΔ͜ͱ ▸ ڞ௨ݴޠΛܾΊΔ͜ͱ ▸ είʔϓΛܾΊΔ͜ͱ ▸ ্هΛ΍Γ΍͍͢Α͏ͳ࢓૊ΈΛ࡞Δ͜ͱ
19. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠