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

by yukinm7

Slide 1

Slide 1 text

ϞμϯJavaScriptϑϨʔϜϫʔΫͰ ٕज़తෛ࠴Λ࡞Βͳ͍ͨΊʹ גࣜձࣾϠϓϦ َ໦༔و

Slide 2

Slide 2 text

َ໦༔و ▸ 2017೥2݄ʹϠϓϦʹೖࣾ ▸ ೖࣾޙ͸ΠϯϑϥɺόοΫΤϯυɺϑϩϯτΤϯυΛܦݧ ▸ AWSɺAnsibleɺPHPɺLaravelɺRubyɺRuby on RailsɺJavaScriptɺ TypeScriptɺReact.jsɺVue.jsɺGolang ▸ ݱࡏ͸৽CMSͷαʔόʔαΠυʢGolangʣ࣮૷ɺϑϩϯτΤϯυ ʢVue.jsɺNuxt.jsʣ࣮૷ɺઃܭ ࣗݾ঺հ

Slide 3

Slide 3 text

ݱࡏ΍͍ͬͯΔ͜ͱ CMS2 CMS3 ৽CMS ʢ࣮૷தʣ Replace

Slide 4

Slide 4 text

ϞμϯJavaScriptϑϨʔϜϫʔΫͰ ೉͍͠ͱײ͍ͯͨ͡ͱ͜Ζ

Slide 5

Slide 5 text

ϞμϯJavaScriptϑϨʔϜϫʔΫͰ೉͍͠ͱײ͍ͯͨ͡ͱ͜Ζ ▸ ॻ͖ํͷࣗ༝౓͕ߴ͘ɺઃܭɾνʔϜͰ౷Ұ͢Δͷ͕೉͍͠ ▸ ίϯϙʔωϯτࢦ޲Ώ͑ʹɺ͓͓΋ͱͷσʔλ΍ؔ਺ͷ೺ Ѳ͕೉͍͠ ▸ σβΠφʔͱͷྖҬ͕ᐆດ

Slide 6

Slide 6 text

ίϯϙʔωϯτࢦ޲Ώ͑ʹɺ͓͓΋ͱͷσʔλ΍ؔ਺ͷ೺Ѳ͕೉͍͠

Slide 7

Slide 7 text

Slide 8

Slide 8 text

ϑϩϯτΤϯυͱαʔόʔαΠυͷνʔϜମ੍ ϑϩϯτΤϯυ ΤϯδχΞ αʔόʔΤϯυ ΤϯδχΞ ໊̎ʢʴ໊̎ʣ ໊̓ HTMLɺCSSͳͲ σβΠϯҎ֎ͷ ෦෼Λ࣮૷͢Δ

Slide 9

Slide 9 text

σβΠφʔͱͷྖҬ͕ᐆດ ▸ (αʔόʔαΠυΤϯδχΞ໨ઢͰ)࣮ࡍʹॲཧ͕ಈ͘ͱ͜Ζ ·Ͱ΍Ζ͏ͱ͢Δͱɺίϯϙʔωϯτ͕ͳ͍ͱ࣮૷Ͱ͖ͳ ͍ ▸ ্هͷΑ͏ͳ෦෼͕ઌߦޙଓؔ܎ʹͳΔ ▸ ྆νʔϜͰ࢖༻͢ΔϥΠϒϥϦ΍ن໿౳Λॊೈʹ෼͚ΒΕͳ ͍

Slide 10

Slide 10 text

ରॲ͢ΔͨΊʹߦͬͨ͜ͱ

Slide 11

Slide 11 text

ը໘্Ϣʔεέʔεͷू໿

Slide 12

Slide 12 text

ը໘্Ϣʔεέʔεͷू໿ Vue.js σʔλ ؔ਺ ίϯϙʔωϯτ

Slide 13

Slide 13 text

ը໘্Ϣʔεέʔεͷू໿ Vue.js Vuex ίϯϙʔωϯτ σʔλ ΞΫγϣϯ

Slide 14

Slide 14 text

changeFieldTitle changeFieldTitle changeFieldTitle changeFieldTitle changeFieldTitle changeFieldTitle changeFieldTitle changeFieldBody addField changeFavicon changeField LinkTitle changeField LinkIcon onFocus outFocus save Vuex

Slide 15

Slide 15 text

ը໘্Ϣʔεέʔεͷू໿ Vue.js Vuex Golang ϑϩϯτΤϯυ ΤϯδχΞ αʔόʔαΠυ ΤϯδχΞ

Slide 16

Slide 16 text

Ϣʔεέʔεू໿ʹΑͬͯड͚ͨԸܙ ▸ ϑϩϯτ։ൃΛߦ͏αʔόʔαΠυΤϯδχΞ͕࣮૷͢Δ෦ ෼͕Vuexʹू໿͞ΕΔ͜ͱͰɺVue.jsͷࣄલ஌͕ࣝগͳͯ͘ ΋։ൃʹೖΔ͜ͱ͕Ͱ͖Δ ▸ σβΠφʔ͸ίϯϙʔωϯτ࡞੒ʹूதͰ͖Δ ▸ ֓ཁॻͱVuexͷactionsʢϢʔεέʔεʣΛݟΕ͹ɺը໘্ ͷϢʔεέʔεͱͦͷॲཧΛ೺ѲͰ͖Δ ▸ ڥք͕໌֬ͳͷͰద੾ͳείʔϓͰن໿ܾΊͳͲΛߦ͑Δ

Slide 17

Slide 17 text

ϓϩμΫτΛ࡞ΔνʔϜϕʔεͰ ઃܭ͢Δ͜ͱ ઃܭΛ௨ͯ͠େࣄͩͱࢥͬͨ͜ͱ

Slide 18

Slide 18 text

ϓϩμΫτΛ࡞ΔνʔϜϕʔεͰઃܭ͢Δ͜ͱ ▸ ن໿ΛܾΊΔ͜ͱ ▸ ڞ௨ݴޠΛܾΊΔ͜ͱ ▸ είʔϓΛܾΊΔ͜ͱ ▸ ্هΛ΍Γ΍͍͢Α͏ͳ࢓૊ΈΛ࡞Δ͜ͱ

Slide 19

Slide 19 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠