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
Daichi Ishikawa
July 01, 2019
Technology
1
1k
技術選定を軸にユーザーファーストを考える
v-sendai meetup #2 の登壇資料です。
https://v-sendai.connpass.com/event/132973/
Daichi Ishikawa
July 01, 2019
Tweet
Share
More Decks by Daichi Ishikawa
See All by Daichi Ishikawa
note カイゼンやっていき💪
nicedchy
1
3.6k
続 Nuxt.js 移行プロジェクトの話
nicedchy
2
2.3k
Other Decks in Technology
See All in Technology
隣接領域をBeyondするFinatextのエンジニア組織設計 / beyond-engineering-areas
stajima
1
270
Can We Measure Developer Productivity?
ewolff
1
150
インフラとバックエンドとフロントエンドをくまなく調べて遅いアプリを早くした件
tubone24
1
430
Evangelismo técnico: ¿qué, cómo y por qué?
trishagee
0
360
スクラム成熟度セルフチェックツールを作って得た学びとその活用法
coincheck_recruit
1
140
The Role of Developer Relations in AI Product Success.
giftojabu1
0
120
Taming you application's environments
salaboy
0
180
オープンソースAIとは何か? --「オープンソースAIの定義 v1.0」詳細解説
shujisado
7
800
The Rise of LLMOps
asei
7
1.4k
Terraform未経験の御様に対してどの ように導⼊を進めていったか
tkikuchi
2
430
New Relicを活用したSREの最初のステップ / NRUG OKINAWA VOL.3
isaoshimizu
2
590
TypeScriptの次なる大進化なるか!? 条件型を返り値とする関数の型推論
uhyo
2
1.6k
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
43
13k
A Tale of Four Properties
chriscoyier
156
23k
How GitHub (no longer) Works
holman
310
140k
Into the Great Unknown - MozCon
thekraken
32
1.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Bash Introduction
62gerente
608
210k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
16
2.1k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Designing for Performance
lara
604
68k
Become a Pro
speakerdeck
PRO
25
5k
Typedesign – Prime Four
hannesfritz
40
2.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
Transcript
Daichi Ishikawa 2019.07.01 v-sendai #2 ٕज़બఆΛ࣠ʹ ϢʔβʔϑΝʔετΛߟ͑Δ
Daichi Ishikawa / @nicedchy 2018/11 - Piece of Cake, Inc.
note ͷΤϯδχΞ ਪ͠ΫϦΤΠλʔ @toda_makoto Vue.js Japan User Group Staff Δਓ
Vue Fes Japan 2019
None
Mission ͩΕ͕࡞Λ͡Ίɺ ଓ͚ΒΕΔΑ͏ʹ͢Δɻ
ऴΘΓ͕ݟ͖͑ͯͨ Release note https://note.mu/noteeng/m/me7637ba82821
Nuxt ҠߦϓϩδΣΫτ શऴྃඪʂ
࠙ձͰΑ͘ฉ͔ΕΔ࣭ʹ ͍͑ͨͱࢥ͍·͢
ͳͥ AngularJS ͔Β Nuxt.js ʹͨ͠ΜͰ͔͢ʁ ऍ: AngularJS = ʙv1.x /
Angular = v2ʙ
͜ͷͷԆͰ͢ note https://note.mu/r82/n/ne217ba36d233
͜ͷεϥΠυͰ͍͑ͨ͜ͱ
ɾٕज़खஈͰ͔͠ͳ͍ɺϢʔβʔϑΝʔετΛߟ͑Δ ɾFEΛ࠷దͳঢ়ଶͰอͭͱվળͷຊ࣭͕ଊ͍͑͢ ɾNuxt.js ଞ FW ͱಉ༷ʹ࠷ྑͷબࢶͨΓಘΔ ͍͑ͨ͜ͱ
ɾͳͥ AngularJS ͔Β Nuxt.js ʹม͑ͨͷ͔ ɾAngularJS ͔Β Nuxt.js ʹม͑ͯͲ͏ͩͬͨͷ͔ ͓ॻ͖
ɾͳͥ AngularJS ͔Β Nuxt.js ʹม͑ͨͷ͔ ɾAngularJS ͔Β Nuxt.js ʹม͑ͯͲ͏ͩͬͨͷ͔ ͓ॻ͖
͜ͷͷཁΛ͠·͢ note https://note.mu/r82/n/ne217ba36d233
ɾAngularJS Λબͨ͠ཧ༝ ɾٕज़બఆཁ݅ ɾબࢶ ͳͥ AnuglarJS ͔Β Nuxt.js ʹม͑ͨͷ͔
ɾAngularJS Λબͨ͠ཧ༝ ɾٕज़બఆཁ݅ ɾબࢶ ͳͥ AnuglarJS ͔Β Nuxt.js ʹม͑ͨͷ͔
AngularJS Λબͨ͠ཧ༝ note ͷ։ൃ࣌ظ 2013/11 - 2014/04 ɾ࣌ backbone.js ͕ຊͰओྲྀ
ɾnote UI ͕ͦΕͳΓʹෳࡶ ɹɾAngularJS ͷ two-way binding ັྗత ɾαʔόʔαΠυ API ʹઐ೦ ɹɾωΠςΟϒΞϓϦͷߟྀ ɾΤϯδχΞ࠾༻త
AngularJS Λબͨ͠ཧ༝ Frontend ɾAngularJS v1.1.x ɾCoffeeScript ɾHAML Backend ɾRuby on
Rails v4.2 ɾCapistrano Infrastructure ɾAWS
AngularJS Λબͨ͠ཧ༝ Frontend ɾAngularJS v1.1.x ɾCoffeeScript ɾHAML Backend ɾRuby on
Rails v4.2 ɾCapistrano Infrastructure ɾAWS Client Side Rendering only Single Page Application
AngularJS Λબͨ͠ཧ༝ ՝ ɾॳظදࣔͷ͞ ɾٕज़త੍ ɹɾAngularJS v1.x Ͱ SSR Λαϙʔτ͍ͯ͠ͳ͍
ɾٕज़తෛ࠴ ɹɾίʔσΟϯάن ɹɹɾடং͕ͳ͍ ɹɾίϯϙʔωϯτઃܭ
طଘελοΫͷԆͰ Ϗδωεཁٻͷղܾࠔ
ٕज़બఆཁ݅ ɾServer Side Rendering ( SSR ) ɹɾSEO ɹɾඳը (
FMP ) ɾֶश / ӡ༻ίετ ɹɾσβΠφʔͷྀ ɹɾઐ FE ͕͍ͳͯ͘ϝϯςφϒϧ ɾ։ൃ / ίϛϡχςΟͷ׆ൃ͞ ɹɾௐͨΒใ͕ग़ͯ͘Δɺฉ͘͜ͱ͕Ͱ͖Δڥ
બࢶ 2018/03 ࣌Ͱͷީิ ɾExpress / VanillaJS ɹɾܦ͞ΜͷࣄྫΛࢀߟ ɹɹɾϑϩϯτΤϯυͷॲཧ͕ଟ͍ ɹɹɾnote ΠϯλϥΫςΟϒͳ
UI ͕ଟ͍ ɹɹɾ։ൃޮ্͕͕Βͣஅ೦ ɾReact.js ɾAngular (v2Ҏ߱) ɾVue.js ɹɾपΓͷڥʹཔΕΔਓ͕ͨͪͨ͘͞Μ͍ͨ ɹɾ@kitak san ͋Γ͕ͱ͏͍͟͝·ͨ͠
note ͕ײͨ͡ Vue.js / Nuxt.js ͷϝϦοτ ɾSFC / Scoped CSS
ɹɾաڈͷ CSS ϦϑΝΫλͨࠟ͠ ɹɹͳͲ͋ΓΧΦε ɹɾDX ͷ্͕ݟࠐΊΔ
note ͕ײͨ͡ Vue.js / Nuxt.js ͷϝϦοτ ɾಈ͔͢·Ͱͷֶशίετͷ͞ͱ͠Έқ͞ ɹɾTemplate ͕ HTML
Ͱهड़Ͱ͖Δ ɹɾ σβΠφʔʹ͠Έқ͍ ɹɾߏจ͕ AngularJS ʹ͍ۙ ɹɹɾVue.js ( exp: v-for, v-if ) ɹɹɾAngularJS ( exp: ng-repeat, ng-if )
note ͕ײͨ͡ Vue.js / Nuxt.js ͷϝϦοτ ɾϞμϯͳϑϩϯτΤϯυڥ ɹɾVue.js ΤίγεςϜͷϏϧτΠϯ ɹɹɾVue
Router, Vuex, Vue Server Render etc. ɹɾWebPack ڥΛΑ͠ͳʹͬͯ͘ΕΔ ɹɹɾNuxt ͷ Version ্͕͕Δͨͼʹ DX ্͕ ɹɾDynamic Imports ɹɾCode Spiliting ɹɾmeta tag optimization ɹɾSmart Prefetch
ϢʔβʔʹՁΛಧ͚ΔͨΊͷ ຊ࣭తͳ։ൃʹूதͰ͖Δ
ɾͳͥ AngularJS ͔Β Nuxt.js ʹม͑ͨͷ͔ ɾAngularJS ͔Β Nuxt.js ʹม͑ͯͲ͏ͩͬͨͷ͔ ͓ॻ͖
ύϑΥʔϚϯε
Nuxt.js (production demo)
վળ
note ։ൃݱͷ
ɾDog fooding ɾStorybook ɾAtomic Design ɾInfrastructure ɾTypeScript Migration AngularJS ͔Β
Nuxt.js ʹม͑ͯͲ͏ͩͬͨͷ͔
৽ͷํ ɾطଘͷ Rails αʔό API ༻్ͱͯ͠௨ৗՔಇ ɾView Λ Nuxt.js (ϨϯμϦϯάαʔό)Ҡ
ɹɾElastic Load Balancing Λ༻ ɹɾϧʔςΟϯά୯ҐͰ͚ࣾςετϦϦʔε ɹɹɾࣾϢʔβʔʹόάΛϦϙʔτͯ͠Β͏ ɾ͜ͷ࣌ AngularJS ͰՔಇ͍ͯ͠Δϖʔδ͋Δ ɹˠೋॏϝϯς Dog fooding
GOOD ɾNuxt.js ࣮ॳͷΓग़͠࠷ߴͩͬͨ ɾStorybook Λ Build & Hosting ͢ΔڥΛ࡞Δͱ࠷ߴ BAD
ɾΤϯδχΞ / σβΠφʔ͕׳Εͯ͘Δͱϝϯς͞Εͳ͍ ɹˠํͳ͍ɺׂΓΔ͔͠ͳ͍ ɾϫʔΫϑϩʔʹΈࠐ·Εͳ͍ͱϝϯςφ͕ݱΕͳ͍ νʔϜͷχʔζʹ߹Θͤͯऔࣺબͨ͠ํ͕ྑ͍ Storybook
ҰఆͷடংΛอͭͷʹޮՌత ɾΰϦΰϦͷϧʔϧԽ͢Δͱ͠ΜͲ͍ ɾ࠷ॳ͔ΒؤுΓ͗͢ͳ͍ ɾ࣮ऀͰίϯςΫετ͕ҧ͏͕࣌͋ΔͷͰҙ͕ඞཁ ɾงғؾͰ͡ΊͯɺνʔϜͱϓϩμΫτͷίϯςΫε τΛ߹Θ͍ͤͯ͘ͷ͕ॏཁ ɾnote Ͱ src/components/templates ͕Ͱ͖·ͨ͠
Atomic Design
ز͔ͷߏΓସ͑Λͨ͠ วྺ: EC2 → Lambda → Elastic Beanstalk EC2 ฤ
ॳ EC2 node.js pm2 Ͱӡ༻͍ͯͨ͠ɻ ɾnode.js ӡ༻ܦݧ0 ɾԿ͔ಥવ pm2 ͕མͪͨΓෆ҆Λ๊͍͑ͯͨ AWS Lambda ͷؾӡͰɾɾɾʁ Infrastructure
ز͔ͷߏΓସ͑Λͨ͠ วྺ: EC2 → Lambda → Elastic Beanstalk Lambda ฤ
ɾຊ൪ Lambda ڥ͕ࢭ·͕ͬͨ͋ͬͨ ɹɾaws-serverless-express ͷґଘϞδϡʔϧ͕ݪҼʁ ɹɾະͩϦϙʔτ͞Εͣ ɾຊ൪ެ։લͩͬͨͷͰɺϐϘοτޭ ɹɾBFF ͲΜͳΠϯϑϥߏʹରԠͰ͖࠷ߴ ɹɾLambda Functions ॻ͍ͯͳͯ͘ࢮʹҰੜ Infrastructure
ز͔ͷߏΓସ͑Λͨ͠ วྺ: EC2 → Lambda → Elastic Beanstalk Elastic Beanstalk
ฤ ɾ҆ॅͷɺɺɺ͔ͱࢥ͍͖ ɾӡ༻ॳ࠷దͳΠϯελϯε͕͔Βͣۤઓ ɹɾSRE ͕ Auto Scale ͷ࠷దԽ ɾB/G Deploy ߦͳ͍ͬͯΔ ɹɾ͍ΘΏΔΠϯελϯεΨνϟճආ༻ ɹɾσϓϩΠͷ͕͔͔͍࣌ؒͬͯΔͷͰཁվળ Infrastructure
͕ΜͬͯΔ ɾ։ൃ༏ઌ͋ΔͷͰઈࢍ WIP ɾগͣͭ͠Ҡߦத ɹɾstore, middleware, plugins ͕த৺ ɾVuex ɹɾܕΛ͚͍ͭͯ͘ͷύζϧΛղ͘Έ͍ͨͳײ͡
ɹɾSwagger ͱ͔ openapi-generator తͳͷ͕ͳ͍ͱ ɹɹAPI Ϩεϙϯεͷܕ͚ͭΔͷͭΒ͍ Vue 3.0 ͬͯΔ͔Βͳ... TypeScript Migration
టषͬͯ͘·͢
ҎલͷελοΫʹൺ DX֨ஈʹ্͠࠷ߴ✨
·ͱΊ
ɾٕज़खஈͰ͔͠ͳ͍ɺϢʔβʔϑΝʔετΛߟ͑Δ ɾFEΛ࠷దͳঢ়ଶͰอͭͱվળͷຊ࣭͕ଊ͍͑͢ ɾNuxt.js ଞ FW ͱಉ༷ʹ࠷ྑͷબࢶͨΓಘΔ ͍͑ͨ͜ͱ
͍͑ͨ͜ͱΛ͚͢Δͱ
ٕज़खஈͰ͔͠ͳ͍ɺϢʔβʔϑΝʔετΛߟ͑Δ ɾ·ͣग़ͯ͠ϢʔβʔʹͬͯΒ͏͜ͱ͕େࣄ ɹɾ࠷ߴͷମݧΛಧ͚͍ͨ ɹɾͦͷʹ͑Δج൫Λ࣋ͭ FW Λબ͢Δ FEΛ࠷దͳঢ়ଶͰอͭͱվળͷຊ࣭͕ଊ͍͑͢ ɾimage ৴ͷ࠷దԽ ɾεϩΫΤϦରࡦ
Nuxt.js ଞ FW ͱಉ༷ʹ࠷ྑͷબࢶͨΓಘΔ ɾϑϩϯτΤϯυബࣺͯ͘Δ͜ͱΛલఏʹΉͱ࠷ߴ ͍͑ͨ͜ͱ
We are hiring શํҐͰΤϯδχΞืूதͰ͢ʂ https://www.wantedly.com/projects/208206
Thanks!