Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
モダンJavaScriptフレームワークで技術的負債を作らないために
Search
yukinm7
November 30, 2018
Programming
0
1.5k
モダンJavaScriptフレームワークで技術的負債を作らないために
yukinm7
November 30, 2018
Tweet
Share
More Decks by yukinm7
See All by yukinm7
Flux層の責務について考える
yukinm7
3
2.3k
Other Decks in Programming
See All in Programming
Workers を定期実行する方法は一つじゃない
rokuosan
0
130
QA x AIエコシステム段階構築作戦
osu
0
210
AIともっと楽するE2Eテスト
myohei
9
3.2k
React 使いじゃなくても知っておきたい教養としての React
oukayuka
13
1.9k
新しいモバイルアプリ勉強会(仮)について
uetyo
1
190
MCPで実現できる、Webサービス利用体験について
syumai
7
2.2k
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
860
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
3
290
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
2
220
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
3
1.7k
AIのメモリー
watany
11
1.1k
CDK引数設計道場100本ノック
badmintoncryer
2
590
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
4 Signs Your Business is Dying
shpigford
184
22k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Building an army of robots
kneath
306
45k
Unsuck your backbone
ammeep
671
58k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
RailsConf 2023
tenderlove
30
1.2k
Transcript
ϞμϯJavaScriptϑϨʔϜϫʔΫͰ ٕज़తෛ࠴Λ࡞Βͳ͍ͨΊʹ גࣜձࣾϠϓϦ َ༔و
َ༔و ▸ 20172݄ʹϠϓϦʹೖࣾ ▸ ೖࣾޙΠϯϑϥɺόοΫΤϯυɺϑϩϯτΤϯυΛܦݧ ▸ AWSɺAnsibleɺPHPɺLaravelɺRubyɺRuby on RailsɺJavaScriptɺ TypeScriptɺReact.jsɺVue.jsɺGolang
▸ ݱࡏ৽CMSͷαʔόʔαΠυʢGolangʣ࣮ɺϑϩϯτΤϯυ ʢVue.jsɺNuxt.jsʣ࣮ɺઃܭ ࣗݾհ
ݱࡏ͍ͬͯΔ͜ͱ CMS2 CMS3 ৽CMS ʢ࣮தʣ Replace
ϞμϯJavaScriptϑϨʔϜϫʔΫͰ ͍͠ͱײ͍ͯͨ͡ͱ͜Ζ
ϞμϯJavaScriptϑϨʔϜϫʔΫͰ͍͠ͱײ͍ͯͨ͡ͱ͜Ζ ▸ ॻ͖ํͷࣗ༝͕ߴ͘ɺઃܭɾνʔϜͰ౷Ұ͢Δͷ͕͍͠ ▸ ίϯϙʔωϯτࢦΏ͑ʹɺ͓͓ͱͷσʔλؔͷ Ѳ͕͍͠ ▸ σβΠφʔͱͷྖҬ͕ᐆດ
ίϯϙʔωϯτࢦΏ͑ʹɺ͓͓ͱͷσʔλؔͷѲ͕͍͠
ϞμϯJavaScriptϑϨʔϜϫʔΫͰ͍͠ͱײ͍ͯͨ͡ͱ͜Ζ ▸ ॻ͖ํͷࣗ༝͕ߴ͘ɺઃܭɾνʔϜͰ౷Ұ͢Δͷ͕͍͠ ▸ ίϯϙʔωϯτࢦΏ͑ʹɺ͓͓ͱͷσʔλؔͷ Ѳ͕͍͠ ▸ σβΠφʔͱͷྖҬ͕ᐆດ
ϑϩϯτΤϯυͱαʔόʔαΠυͷνʔϜମ੍ ϑϩϯτΤϯυ ΤϯδχΞ αʔόʔΤϯυ ΤϯδχΞ ໊̎ʢʴ໊̎ʣ ໊̓ HTMLɺCSSͳͲ σβΠϯҎ֎ͷ ෦Λ࣮͢Δ
σβΠφʔͱͷྖҬ͕ᐆດ ▸ (αʔόʔαΠυΤϯδχΞઢͰ)࣮ࡍʹॲཧ͕ಈ͘ͱ͜Ζ ·ͰΖ͏ͱ͢Δͱɺίϯϙʔωϯτ͕ͳ͍ͱ࣮Ͱ͖ͳ ͍ ▸ ্هͷΑ͏ͳ෦͕ઌߦޙଓؔʹͳΔ ▸ ྆νʔϜͰ༻͢ΔϥΠϒϥϦنΛॊೈʹ͚ΒΕͳ ͍
ରॲ͢ΔͨΊʹߦͬͨ͜ͱ
ը໘্Ϣʔεέʔεͷू
ը໘্Ϣʔεέʔεͷू Vue.js σʔλ ؔ ίϯϙʔωϯτ
ը໘্Ϣʔεέʔεͷू Vue.js Vuex ίϯϙʔωϯτ σʔλ ΞΫγϣϯ
changeFieldTitle changeFieldTitle changeFieldTitle changeFieldTitle changeFieldTitle changeFieldTitle changeFieldTitle changeFieldBody addField changeFavicon
changeField LinkTitle changeField LinkIcon onFocus outFocus save Vuex
ը໘্Ϣʔεέʔεͷू Vue.js Vuex Golang ϑϩϯτΤϯυ ΤϯδχΞ αʔόʔαΠυ ΤϯδχΞ
ϢʔεέʔεूʹΑͬͯड͚ͨԸܙ ▸ ϑϩϯτ։ൃΛߦ͏αʔόʔαΠυΤϯδχΞ͕࣮͢Δ෦ ͕Vuexʹू͞ΕΔ͜ͱͰɺVue.jsͷࣄલ͕ࣝগͳͯ͘ ։ൃʹೖΔ͜ͱ͕Ͱ͖Δ ▸ σβΠφʔίϯϙʔωϯτ࡞ʹूதͰ͖Δ ▸ ֓ཁॻͱVuexͷactionsʢϢʔεέʔεʣΛݟΕɺը໘্ ͷϢʔεέʔεͱͦͷॲཧΛѲͰ͖Δ
▸ ڥք͕໌֬ͳͷͰదͳείʔϓͰنܾΊͳͲΛߦ͑Δ
ϓϩμΫτΛ࡞ΔνʔϜϕʔεͰ ઃܭ͢Δ͜ͱ ઃܭΛ௨ͯ͠େࣄͩͱࢥͬͨ͜ͱ
ϓϩμΫτΛ࡞ΔνʔϜϕʔεͰઃܭ͢Δ͜ͱ ▸ نΛܾΊΔ͜ͱ ▸ ڞ௨ݴޠΛܾΊΔ͜ͱ ▸ είʔϓΛܾΊΔ͜ͱ ▸ ্هΛΓ͍͢Α͏ͳΈΛ࡞Δ͜ͱ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠