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
AWS CDKでデータリストアの運用、どのように設計する?~Aurora・EFSの実践事例を紹介~/aws-cdk-data-restore-aurora-efs
mhrtech
4
640
LeSSに潜む「隠れWF病」とその処方箋
lycorptech_jp
PRO
2
120
新卒1年目が向き合う生成AI事業の開発を加速させる技術選定 / ai-web-launcher
cyberagentdevelopers
PRO
7
1.5k
「最高のチューニング」をしないために / hack@delta 24.10
fujiwara3
21
3.4k
MAMを軸とした動画ハンドリングにおけるAI活用前提の整備と次世代ビジョン / abema-ai-mam
cyberagentdevelopers
PRO
1
110
プロダクト成長に対応するプラットフォーム戦略:Authleteによる共通認証基盤の移行事例 / Building an authentication platform using Authlete and AWS
kakehashi
1
150
Commitment vs Harrisonism - Keynote for Scrum Niseko 2024
miholovesq
6
1.1k
Oracle Cloud Infrastructureデータベース・クラウド:各バージョンのサポート期間
oracle4engineer
PRO
27
12k
「視座」の上げ方が成人発達理論にわかりやすくまとまってた / think_ perspective_hidden_dimensions
shuzon
2
130
신뢰할 수 있는 AI 검색 엔진을 만들기 위한 Liner의 여정
huffon
0
300
AIを駆使したゲーム開発戦略: 新設AI組織の取り組み / sge-ai-strategy
cyberagentdevelopers
PRO
1
130
Amazon_CloudWatch_ログ異常検出_導入ガイド
tsujiba
4
1.5k
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Six Lessons from altMBA
skipperchong
26
3.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
290
Become a Pro
speakerdeck
PRO
24
5k
Build The Right Thing And Hit Your Dates
maggiecrowley
32
2.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
RailsConf 2023
tenderlove
29
880
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
KATA
mclloyd
29
13k
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!