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.5k
レガシーなフロントエンドをリプレイスする
Frontend Conference 2019 #kfug2019
の登壇資料です
jiko21
November 02, 2019
Tweet
Share
More Decks by jiko21
See All by jiko21
Creating a Next.js-style Framework with Bun and Hono
jiko21
0
110
Array Grouping will soon be arriving at TypeScript
jiko21
0
110
Copying Array Methods arrived at TypeScript
jiko21
1
600
SSRで動的に OGP画像を生成したい! 〜Cloudflare Workersから@vercel/og移行編〜
jiko21
0
120
node:test will replace Jest?
jiko21
0
79
どこでも動かすために… TypeScriptでライブラリ開発の すゝめ
jiko21
2
340
NestJS a progressive web framework
jiko21
3
2.1k
Deep Dive Into Vue Composition API
jiko21
0
3.2k
Composition API TypeScriptはVue.jsの夢を見るか?
jiko21
1
1.6k
Other Decks in Technology
See All in Technology
Bazel for Ruby (RubyKaigi 2025)
p0deje
0
120
3月のAWSアップデートを5分間でざっくりと!
kubomasataka
0
130
От ручной разметки к LLM: как мы создавали облако тегов в Lamoda. Анастасия Ангелова, Data Scientist, Lamoda Tech
lamodatech
0
800
白金鉱業Meetup_Vol.18_生成AIはデータサイエンティストを代替するのか?
brainpadpr
3
150
Running JavaScript within Ruby
hmsk
3
370
Terraform Cloudで始めるおひとりさまOrganizationsのすゝめ
handy
2
190
30代からでも遅くない! 内製開発の世界に飛び込み、最前線で戦うLLMアプリ開発エンジニアになろう
minorun365
PRO
13
4.4k
新卒エンジニアがCICDをモダナイズしてみた話
akashi_sn
2
260
サーバレス、コンテナ、データベース特化型機能をご紹介。CloudWatch をもっと使いこなそう!
o11yfes2023
0
190
JPOUG Tech Talk #12 UNDO Tablespace Reintroduction
nori_shinoda
2
150
Winning at PHP in Production in 2025
beberlei
1
150
Amazon CloudWatch を使って NW 監視を行うには
o11yfes2023
0
180
Featured
See All Featured
Side Projects
sachag
453
42k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.7k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k
Writing Fast Ruby
sferik
628
61k
Docker and Python
trallard
44
3.3k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.2k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
670
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Ͱͳ͍ίʔυ ࠓޙϦϑΝΫλϦϯάͰ ղফ
࠷ޙʹ
·ͱΊ • ϑϩϯτΤϯυ࣌ͱͱʹϨΨγʔͳίʔυ͕ݱΕΔ • Λղܾ͠ɺ։ൃͷ͢͠͞Λ֬อ͢ΔͨΊʹ ϦϓϨΠεେࣄɻ • ϦϓϨΠεޙͷΞϓϦʹඞͣ͋Γɺ ϦϑΝΫλϦϯά͍ͯ͘͜͠ͱ͕ॏཁɻ
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·͢