Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Abcc7adc019dba66982e30d58ef6d3a0?s=47 yukinm7
November 30, 2018

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

Abcc7adc019dba66982e30d58ef6d3a0?s=128

yukinm7

November 30, 2018
Tweet

More Decks by yukinm7

Other Decks in Programming

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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠