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
150
Array Grouping will soon be arriving at TypeScript
jiko21
0
130
Copying Array Methods arrived at TypeScript
jiko21
1
680
SSRで動的に OGP画像を生成したい! 〜Cloudflare Workersから@vercel/og移行編〜
jiko21
0
130
node:test will replace Jest?
jiko21
0
90
どこでも動かすために… TypeScriptでライブラリ開発の すゝめ
jiko21
2
390
NestJS a progressive web framework
jiko21
3
2.2k
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
Open Table Format (OTF) が必要になった背景とその機能 (2025.10.28)
simosako
2
300
クラウドとリアルの融合により、製造業はどう変わるのか?〜クラスメソッドの製造業への取組と共に〜
hamadakoji
0
430
ラスベガスの歩き方 2025年版(re:Invent 事前勉強会)
junjikoide
0
190
可観測性は開発環境から、開発環境にもオブザーバビリティ導入のススメ
layerx
PRO
1
550
生成AI時代のPythonセキュリティとガバナンス
abenben
0
140
webpack依存からの脱却!快適フロントエンド開発をViteで実現する #vuefes
bengo4com
4
3.4k
プロダクト開発と社内データ活用での、BI×AIの現在地 / Data_Findy
sansan_randd
0
170
GraphRAG グラフDBを使ったLLM生成(自作漫画DBを用いた具体例を用いて)
seaturt1e
1
150
ソフトウェアエンジニアの生成AI活用と、これから
lycorptech_jp
PRO
0
910
ゼロコード計装導入後のカスタム計装でさらに可観測性を高めよう
sansantech
PRO
1
460
AI-Readyを目指した非構造化データのメダリオンアーキテクチャ
r_miura
1
330
CREが作る自己解決サイクルSlackワークフローに組み込んだAIによる社内ヘルプデスク改革 #cre_meetup
bengo4com
0
340
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Music & Morning Musume
bryan
46
6.9k
BBQ
matthewcrist
89
9.9k
The Cult of Friendly URLs
andyhume
79
6.6k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
130k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
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Ͱͳ͍ίʔυ ࠓޙϦϑΝΫλϦϯάͰ ղফ
࠷ޙʹ
·ͱΊ • ϑϩϯτΤϯυ࣌ͱͱʹϨΨγʔͳίʔυ͕ݱΕΔ • Λղܾ͠ɺ։ൃͷ͢͠͞Λ֬อ͢ΔͨΊʹ ϦϓϨΠεେࣄɻ • ϦϓϨΠεޙͷΞϓϦʹඞͣ͋Γɺ ϦϑΝΫλϦϯά͍ͯ͘͜͠ͱ͕ॏཁɻ
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·͢