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
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.7k
続 Nuxt.js 移行プロジェクトの話
nicedchy
2
2.4k
Other Decks in Technology
See All in Technology
ローカルLLMでファインチューニング
knishioka
0
150
UIテスト自動化サポート- Testbed for XCUIAutomation practice
notoroid
0
130
地図も、未来も、オープンに。 〜OSGeo.JPとFOSS4Gのご紹介〜
wata909
0
110
Windows 11 で AWS Documentation MCP Server 接続実践/practical-aws-documentation-mcp-server-connection-on-windows-11
emiki
0
930
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
2
200
CSS、JSをHTMLテンプレートにまとめるフロントエンド戦略
d120145
0
280
監視のこれまでとこれから/sakura monitoring seminar 2025
fujiwara3
11
3.8k
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
2
1k
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
3
820
Wasm元年
askua
0
140
AIエージェント最前線! Amazon Bedrock、Amazon Q、そしてMCPを使いこなそう
minorun365
PRO
13
4.9k
登壇ネタの見つけ方 / How to find talk topics
pinkumohikan
3
350
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
It's Worth the Effort
3n
185
28k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
BBQ
matthewcrist
89
9.7k
Into the Great Unknown - MozCon
thekraken
39
1.9k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Code Reviewing Like a Champion
maltzj
524
40k
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!