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
レガシーなフロントエンドをリプレイスする
Search
jiko21
November 02, 2019
Technology
5
1.4k
レガシーなフロントエンドをリプレイスする
Frontend Conference 2019 #kfug2019
の登壇資料です
jiko21
November 02, 2019
Tweet
Share
More Decks by jiko21
See All by jiko21
Array Grouping will soon be arriving at TypeScript
jiko21
0
29
Copying Array Methods arrived at TypeScript
jiko21
1
380
SSRで動的に OGP画像を生成したい! 〜Cloudflare Workersから@vercel/og移行編〜
jiko21
0
89
node:test will replace Jest?
jiko21
0
51
どこでも動かすために… TypeScriptでライブラリ開発の すゝめ
jiko21
2
250
NestJS a progressive web framework
jiko21
3
1.8k
Deep Dive Into Vue Composition API
jiko21
0
3.2k
Composition API TypeScriptはVue.jsの夢を見るか?
jiko21
1
960
VueでPWAするときに 気をつけておきたいTips
jiko21
2
490
Other Decks in Technology
See All in Technology
障害対応をちょっとずつよくしていくための 演習の作りかた
heleeen
0
210
Google Cloud Next '24でブログを10本書いた方法と勉強会を沸かせた方法
yasumuusan
0
300
AOAI をきっかけに 社内の Azure 管理を見直した話
recruitengineers
PRO
1
290
いつか使うかも貯金してたらめちゃめちゃ機能が増えてた話
riyaamemiya
0
140
開発パフォーマンスを最大化するための開発体制
ham0215
2
410
サーバー間 GraphQL と webmock-graphql の話 / server-to-server graphql and webmock-graphql
qsona
2
190
web-application-security
matsuihidetoshi
0
170
エンジニア候補者向け資料2024.04.24.pdf
macloud
0
3.3k
LayerXにおけるLLMプロダクト開発の今までとこれから
layerx
PRO
1
260
Azureの基本的な権限管理の勉強会
yhana
0
460
データベース02: データベースの概念
trycycle
0
160
プロトタイピングによる不確実性の低減 / Reducing Uncertainty through Prototyping
ohbarye
5
380
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
456
32k
In The Pink: A Labor of Love
frogandcode
138
21k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Product Roadmaps are Hard
iamctodd
44
9.7k
Making Projects Easy
brettharned
108
5.5k
Rebuilding a faster, lazier Slack
samanthasiow
73
8.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
40
4.4k
Clear Off the Table
cherdarchuk
84
310k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Producing Creativity
orderedlist
PRO
337
39k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
19
1.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
260
12k
Transcript
ϨΨγʔͳϑϩϯτΤϯυΛ ϦϓϨΠε͢Δ Frontend Conference 2019 #kfug2019 @Daikids2
খౡ େج / Daiki Kojima @Daikids2 @jiko21 ژେֶେֶӃใֶݚڀՊM2 (ଟ) ϑϩϯτΤϯυΤϯδχΞ
͓ͳ͢͠Δ͜ͱ • ϨΨγʔͳϑϩϯτΤϯυΛϦϓϨΠεͨ͠ • ϨΨγʔͬͯͲΜͳঢ়ଶͩͬͨͷ? • ٕज़બఆ? ઃܭ? • Ͳ͏ͬͯ͢͢Ί͍ͯͬͨͷ?
ͦͦ
ϨΨγʔͬͯ?
Wikipediaͩͱ… https://ja.wikipedia.org/wiki/%E3%83%AC%E3%82%AC%E3%82%B7%E3%83%BC%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0
ཁ͢Δʹ… • ݹ͍!! • ෛ࠴ • ѻ͍ͮΒ͍…
ϑϩϯτͬͯ ΘΓ͔͠৽͍͠…
ϨΨγʔͱؔͳ͍?
NO!
ϑϩϯτϨΨγʔʹͳΔΘ͚ • ৽͍ٕ͠ज़͕͙͢ʹೖͬͯ͘Δ • TypeScript, es6… • ഁյతͳมߋɾUpdate͕ଟ͍ • Angular
1.x/2.xͰͷҧ͍
None
࣌ͷٕज़ελοΫ • Angular.js (1ܥ) • Vue.js (2ܥ) + TypeScript •
Pug + Sass • Gulp
࣌ͷٕज़ελοΫ • Angular.js (1ܥ) • ։ൃॳظʹಋೖ (Angular (2ܥ)͕ొͨ͜͠Ζ) • JavaScriptͰهड़
࣌ͷٕज़ελοΫ • Vue.js (2ܥ) • ʮAngular.js͕ͭΒ͍ΑͶʯͱ͍͏͜ͱͰ৽نը໘Ͱ ಋೖ • TypeScript +
Pug + SassͰهड़
Ϗϧυ·ΘΓ?
࣌ͷٕज़ελοΫ Vue.js Angular.js Gulp html, css, js "OHVMBSͱ7VFKTΛ (VMQͰϏϧυ
࣌ͷٕज़ελοΫ Vue.js Angular.js Gulp html, css, js "OHVMBSͱ7VFKTΛ (VMQͰϏϧυ
ϨΨγʔɾ·͍ͣ
ͬ͟ͱ(Ұྫ) • Angular.jsͱVue.js͕ڞଘ • Angular.jsଆςετ͕Ұͳ͠!! • i18nରԠ͕ͻͲ͍ (ຊޠɾӳޠΛผʑͷϑΝΠϧͰද ݱ)
ͬ͟ͱ • Angular.jsͱVue.js͕ڞଘ • Ұ෦Service͕Angularʹґଘ • VueͷComponentͰXHRͯ͠Δ • Angular.jsଆςετ͕Ұͳ͠!! •
i18nରԠ͕ͻͲ͍ (ຊޠɾӳޠΛผʑͷϑΝΠϧͰදݱ) ͕ଟ͍
Angular.jsͱVue.js ͕ڞଘ
Angular.jsͱVue.js͕ڞଘ • 2ͭͷFWΛ๊͑Δ͜ͱʹ… • Angular.jses5ɺVue.jsTypeScript(es6 base) • FWͲ͜Ζ͔ɺݴޠ(͍ͩͿ)ҧ͏ • Ұ෦Service͕Angularʹґଘ
• ࠶ར༻ੑ͕͍ ➡ VueͷComponentͰXHRͤ͟ΔΛಘͳ͍߹
Angular.jsଆςετ͕ Ұͳ͠!!
ςετͬͯ? ιʔείʔυ ࣦഊ ޭ ίʔυ͕ςετέʔεΛύε͢Δ͔ ࣮ߦͯ֬͠ೝ ςετπʔϧ ςετ࣮ߦ
ςετΛॻ͘ར • ڍಈ͕ਖ਼͍͜͠ͱΛอূͰ͖Δ • ͷΓ͚͕Ͱ͖Δ • ςετέʔε͕༷ʹͳͬͯ͘ΕΔ • etc…
ͱ͜Ζ͕… • ςετͷݱঢ় • Vue: ίϯϙʔωϯτͷςετ͋Δ • Angular.js: ςετ͕Ұͳ͠(Ϟδϡʔϧ!!)
i18nରԠ͕ͻͲ͍
i18nͬͯ • ࠃࡍԽରԠͷ͜ͱ • ༷ʑͳҬɾݴޠʹ߹ΘͤΔ͜ͱ ຊޠͰ ݟ͍ͨ ӳޠͰ ݟ͍ͨ ຊޠ൛
ӳޠ൛
ຊདྷͳΒ… • ઃఆϑΝΠϧͰݴޠΛཧ͓ͯ͘͠ • ϒϥβͷใΛ༻͍ͯද͖ࣔ͢ݴޠͰදࣔ • i18nαϙʔταʔόʔɾϑϩϯτΘͣ ༷ʑͳϥΠϒϥϦͰ࣮ݱͰ͖Δ
ݱঢ় • ଟݴޠରԠ͕ඞཁͳϖʔδӳޠ൛ɾຊޠ൛ͱ ςϯϓϨʔτ(html)Λ͚ͯɺϦϯΫผʑʹ… ➡ ίʔυͷมߋྔ͕ݴޠͷ͚ͩ૿͑Δ! hogehoge-ja.html(ຊޠ) hogehoge-en.html(ӳޠ)
ϨΨγʔΛվળ͢ΔͨΊʹ ϦϓϨΠεΛߦ͏͜ͱʹ!!
ٕज़બఆɾઃܭ
Δ͜ͱ • ٕज़ΛબͿ • FWɺUI Architectureɺςετ • σΟϨΫτϦͷઃܭ
ٕज़બఆ • FW: Vue.js • ίϨࣗମܾఆࣄ߲ • @vue/cliͰϘΠϥʔϓϨʔτΛੜ
ٕज़બఆ • ͦͷଞ • TypeScript: ࣾͰͲΜͲΜTSԽ͕… ܕ͋Δͱ͏Ε͍͠ • class-style-api: ܕָ͕ɻͰ…(ޙड़)
• Vuex: ෳࡶͳঢ়ଶཧ͕ඞཁͳ߹
Class-style api Class-style api @Component export default class Count extends
Vue { @Prop() msg!: string; private count: number = 0; private add(): void { this.count += 1; } private minus(): void { this.count -= 1; } get isEven(): boolean { return this.count % 2 === 0; } } export default Vue.extend({ name: "Count", props: { msg: { type: String, required: true, }, }, data() { return { count: 0, }; }, computed: { isEven(): boolean { return this.count % 2 === 0; }, }, methods: { add(): void { this.count += 1; }, minus(): void { this.count -= 1; }, }, }); Class-style api Ұൠతͳॻ͖ํ
σΟϨΫτϦઃܭɹ • QiitaͳͲΛௐͯσΟϨΫτϦߏΛத৺ʹใूΊ • React + ReduxΛܦݧ͔ͯ͠ΒͷstatelessͳVue + Vuexߏʹ͍ͭͯ (https://qiita.com/_masakitm_/items/ff5df4da0247baeede35)
• vuexެࣜ (https://github.com/vuejs/vuex/tree/dev/examples/chat)
Ͱ͖͕͋ͬͨͷ 6*·ΘΓ ϩδοΫ ·ΘΓ
UI·ΘΓ 1BHFT 1BHFT 1BHFT /home /about /help DPOUBJOFS DPOUBJOFS DPNQPOFOU
DPNQPOFOU DPNQPOFOU ʔ͡͝ͱʹ 1BHFͷ3PPU$PNQPOFOU 7VFY4UPSFΛ࣋ͯΔ DPOUBJOFSDPNQPOFOU جຊతʹ TUBUFMFTTͳ $PNQPOFOU 7VFY
ϩδοΫपΓ • جຊతʹserviceɺutilͳͲͷܗͰϞδϡʔϧΛ۠Δ • service: APIͳͲΛୟ͘ • utils: ࣌ؒɺจࣈྻͳͲͷศརͳؔ •
͜ΕΒΛVue͔ΒҾ͖ണ͕͠ɺ UIϑϨʔϜϫʔΫʹґଘ͠ͳ͍ɺ࠶ར༻Մೳͳͷʹ
VuexपΓ • جຊతʹϖʔδ͝ͱʹmoduled store • άϩʔόϧͰڞ༗͢Δඞཁ͋·Γͳ͍ • ͨͩ͠moduleͳ͍Ͱঢ়ଶ͕૿͑Δ߹… • ؔ৺͝ͱϕʔεͰmoduleΛ۠Δ
(re-ducksύλʔϯ?)
ҙࣝͨ͜͠ͱ • ࣾͰReactΛಋೖͨ͠ͱ͖ͷলΛ׆͔͢ • ComponentͳΔ͘Statelessʹ • XHR͠ͳ͍ • ԿΑΓɺίʔυΛࣺͯΒΕΔΑ͏ʹ͢Δ •
Vueʹґଘ͠ͳ͍ॲཧmoduleʹ
ςετपΓ • ީิʹ্͕ͬͨπʔϧ • Jest • Mocha+Chai ͲͪΒ!WVFDMJͰબՄೳ
ͦΕͧΕͷҧ͍… • Jest vs Mocha: Which Should You Choose?[1]ʹΑΔͱ… •
Jest: ؆୯ʹ͔͚ͯฒߦ࣮ߦɻεφοϓγϣοτɹ • Mocha: ΧελϜ͕Ͱ͖Δ… [1] https://blog.usejournal.com/jest-vs-mocha-whats-the-difference-235df75ffdf3 ॻ͖͢͞͞Ͱ+FTU
ςετํ • ϞδϡʔϧɾVuex • ΧόϨοδ100%Λࢦ͢ • ίϯϙʔωϯτ • εφοϓγϣοτςετΛଟ༻ •
ΠϕϯτͰ͖ΔݶΓνΣοΫ
Snapshotςετͱ? ඳը <template> <div class="count"> <h1>{{ count }}</h1> <div class="buttons">
<button class="add" @click="increment">+</button> <button class="minus" @click="decrement">-</button> </div> </div> </template> ίϯϙʔωϯτ exports[`Count.vue correctly renders html 1`] = ` <div class="count"> <h1>0</h1> <div class="buttons"><button class="add">+</button> <button class="minus">-</button></div> εφοϓγϣοτ ϑΝΠϧʹ ॻ͖ࠐΉ ॳճ
Snapshotςετͱ? ඳը <template> <div class="count"> <h1>{{ count }}</h1> <div class="buttons">
<button class="add" @click="increment">+</button> <button class="minus" @click="decrement">-</button> </div> </div> </template> ίϯϙʔωϯτ EJ⒎Λͱͬͯ ֬ೝ ͦΕҎ߱ is equal to ඳը͞ΕͨComponent ? SnapshotϑΝΠϧ
εφοϓγϣοτςετͷॴɾॴ ϝϦοτ σϝϦοτ ɾมߋ͕Θ͔Γ͍͢ ɾมߋʹऑ͍ ɾ6*ϥΠϒϥϦʹґଘ ɾ࣮ߦڥʹґଘ
ଞʹ… • ίʔυͷελΠϧ໘ͰͷࢦఠΛRVͰݮΒ͢ • ESLint • SnapshotςετͷมߋΛ༻ҙʹ • watch(ࢹ)ϞʔυͷςετΛ༰қ
࣮ࡍͷ։ൃʹ͍ͭͯ
։ൃͷྲྀΕ • ֤ϖʔδ͝ͱͷissue • ୲ऀΛAssigneeʹ • ը໘ɾϩδοΫ·ΘΓ(+Vuex)͝ͱʹPR • جຊϦϓϨΠεݩͷը໘ΛͳΔ͘࠶ݱ
ϓϩδΣΫτͷਐΊํ ҰਓͰ ։ൃΛਐΊΔ ࣍ୈʹଞͷਓ ։ൃʹࢀՃ νʔϜશମͰ ϦϓϨΠεΛ ऴ͍ྃͤͯ͘͞ 5݄ 9݄
7݄ ϦϓϨΠε ྃ ϦϓϨΠε 4UBSU Ұ൪Ή͍ͣͭ Angular.jsϦϓϨΠε։࢝ طଘͷVue͔Β
։ൃͷྲྀΕ • ֤ϖʔδ͝ͱͷissue • ୲ऀΛAssigneeʹ • ը໘ɾϩδοΫ·ΘΓ(+Vuex)͝ͱʹPR • جຊϦϓϨΠεݩͷը໘ΛͳΔ͘࠶ݱ
։ൃॱௐ͔ͩͬͨ?
NO
ͳͥ͏·͍͔͘ͳ͍͔ • ϑϨʔϜϫʔΫϥΠϒϥϦৗʹมԽ͍ͯ͠Δ • ಛʹRFCʹ্͕ΔΑ͏ͳٕज़࠾༻͞Εͳ͜ͱ • npm͕rc൛ͷϥΠϒϥϦΛinstall͢Δ͜ͱ͋Δ
࣮ࡍʹ͋ͬͨ͜ͱ • ϦϓϨΠεલͷίʔυͰಈ͍͍ͯͨςετ͕ ಈ͔ͳ͍ • @vue/cli͕͏Α͏ʹΞϐʔϧͯͨ͠class-style-api͕ ඇਪʹ
ϦϓϨΠεલͷίʔυͰ ಈ͍͍ͯͨςετ͕ಈ͔ͳ͍
ϦϓϨΠεલͷίʔυͰ ಈ͍͍ͯͨςετ͕ಈ͔ͳ͍ • ݪҼ => Bootstrap-Vueͷόʔδϣϯ • Ҡߦલ: 1.5ܥ •
Ҡߦઌ: 2.0.x-rc • ͦͦComponentͷmount͕͏·͍ͬͯ͘ͳ͍…
ରॲ๏ • ςετΛॻ͘͜ͱ͕తͰͳ͍ͷͰҰ୴Skip • ۩ମతʹ… • ςετίʔυΛ͠ͳ͕Β࣮ߦΛඈͤΔ it.skip('correctly
renders html', () => { const wrapper = shallowMount(Count); expect(wrapper.html()).toMatchSnapshot(); });
@vue/cli͕͏Α͏ʹ Ξϐʔϧͯͨ͠class-style-api͕ ඇਪʹ
@vue/cli͕͏Α͏ʹΞϐʔϧͯͨ͠ class-style-api͕ඇਪʹ • ઃܭஈ֊ͰTypeScriptΛ͏લఏͷͨΊར༻ • Vue.extendsΑΓܕ·ΘΓ͕ྑ͔ͬͨ… • class style apiͷར༻Λܾఆͨ࣌͠ظ
• 20191݄ • ͜ΕΛͬͯ։ൃΛਐΊ͍ͯͨ…
͋Δ… https://github.com/vuejs/rfcs/pull/17#issuecomment-494242121
͜ΕΛ౿·͑ͯɹ • ৽نͰ։ൃ͢ΔComponentʹؔͯ͠ • class style apiΛར༻ͤͣʹ࣮ • ͢Ͱʹ։ൃͨ͠Componentʹ͍ͭͯ •
Ұ୴อཹ (͙͢͞·αϙʔτ͞Εͳ͘ͳΒͳ͍ͨΊ) • ͨͩ͠issueͱͯ͠ഉআܭըΛ͓ͯ͘͠ (ϦϑΝΫλϦϯά)
࠷ޙʹ
ϦϓϨΠεΛऴ͑ͯ • VueࣗମͰͷϦϓϨΠεϦϦʔεྃ • ྑ͔ͬͨ͜ͱ • ࠓ·Ͱٕ͋ͬͨज़తෛ࠴ҰͰ͖ͨɻ • ϞμϯͳϑϩϯτΤϯυͷݟ •
ѱ͔ͬͨ͜ͱ • ٕज़બͷϛεʹΑΔ৽ͨͳ՝ • ଞʹࠓ͔ΒݟΔͱGoodͰͳ͍ίʔυ
ϦϓϨΠεΛऴ͑ͯ • VueࣗମͰͷϦϓϨΠεϦϦʔεྃ • ྑ͔ͬͨ͜ͱ • ࠓ·Ͱٕ͋ͬͨज़తෛ࠴ҰͰ͖ͨɻ • ϞμϯͳϑϩϯτΤϯυͷݟ •
ѱ͔ͬͨ͜ͱ • ٕज़બͷϛεʹΑΔ৽ͨͳ՝ • ଞʹࠓ͔ΒݟΔͱGoodͰͳ͍ίʔυ ࠓޙϦϑΝΫλϦϯάͰ ղফ
࠷ޙʹ
·ͱΊ • ϑϩϯτΤϯυ࣌ͱͱʹϨΨγʔͳίʔυ͕ݱΕΔ • Λղܾ͠ɺ։ൃͷ͢͠͞Λ֬อ͢ΔͨΊʹ ϦϓϨΠεେࣄɻ • ϦϓϨΠεޙͷΞϓϦʹඞͣ͋Γɺ ϦϑΝΫλϦϯά͍ͯ͘͜͠ͱ͕ॏཁɻ
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·͢