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
980
技術選定を軸にユーザーファーストを考える
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.4k
続 Nuxt.js 移行プロジェクトの話
nicedchy
2
2.2k
Other Decks in Technology
See All in Technology
Google Cloud Next '24でブログを10本書いた方法と勉強会を沸かせた方法
yasumuusan
0
290
検証を通して見えてきたTiDBの性能特性
lycorptech_jp
PRO
6
3.7k
ServiceNow Knowledge Learning Rise up
manarobot
0
210
反実仮想機械学習とは何か
usaito
PRO
11
4.4k
データベース02: データベースの概念
trycycle
0
150
ServiceNow Knowledge 24の歩き方 EYストラテジー・アンド・コンサルティング
manarobot
0
190
リテール金融(キャッシュレス・ネット銀行・ネット証券)の競争環境と経済圏
8maki
0
820
Next'24 事例セッションの紹介とクラウド資格を活用したキャリア形成について語りMuscle
yasumuusan
1
440
Reducing Cross-Zone Egress at Spotify with Custom gRPC Load Balancing Recap
koh_naga
0
200
Java EE/Jakarta EEの現状と将来―クラウドネイティブ時代にJava EEは対応できるのか?―
takakiyo
1
150
プラットフォームってつくることより計測することが重要なんじゃないかという話 / Platform Engineering Meetup #8
taishin
1
350
長期間TiDBを使ってきた話 @ 私たちはなぜNewSQLを使うのかTiDB選定5社が語る選定理由と活用LT / Experiences with TiDB Over Time
chibiegg
2
890
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
2
3.4k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
Documentation Writing (for coders)
carmenintech
60
3.9k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Building an army of robots
kneath
300
41k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
14
1.6k
GitHub's CSS Performance
jonrohan
1025
450k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Raft: Consensus for Rubyists
vanstee
132
6.3k
YesSQL, Process and Tooling at Scale
rocio
164
13k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Adopting Sorbet at Scale
ufuk
68
8.6k
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!