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
DMM GAMES VenturesをNuxtでリニューアルした話し
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
junjun
July 25, 2019
Technology
0
1.4k
DMM GAMES VenturesをNuxtでリニューアルした話し
junjun
July 25, 2019
Tweet
Share
Other Decks in Technology
See All in Technology
学生・新卒・ジュニアから目指すSRE
hiroyaonoe
2
650
20260208_第66回 コンピュータビジョン勉強会
keiichiito1978
0
180
We Built for Predictability; The Workloads Didn’t Care
stahnma
0
140
SREが向き合う大規模リアーキテクチャ 〜信頼性とアジリティの両立〜
zepprix
0
460
広告の効果検証を題材にした因果推論の精度検証について
zozotech
PRO
0
190
CDK対応したAWS DevOps Agentを試そう_20260201
masakiokuda
1
350
量子クラウドサービスの裏側 〜Deep Dive into OQTOPUS〜
oqtopus
0
130
StrandsとNeptuneを使ってナレッジグラフを構築する
yakumo
1
120
Digitization部 紹介資料
sansan33
PRO
1
6.8k
プロダクト成長を支える開発基盤とスケールに伴う課題
yuu26
4
1.3k
【Ubie】AIを活用した広告アセット「爆速」生成事例 | AI_Ops_Community_Vol.2
yoshiki_0316
1
110
30万人の同時アクセスに耐えたい!新サービスの盤石なリリースを支える負荷試験 / SRE Kaigi 2026
genda
4
1.3k
Featured
See All Featured
Balancing Empowerment & Direction
lara
5
890
Producing Creativity
orderedlist
PRO
348
40k
Navigating the moral maze — ethical principles for Al-driven product design
skipperchong
2
250
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
450
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.6k
Public Speaking Without Barfing On Your Shoes - THAT 2023
reverentgeek
1
310
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Optimising Largest Contentful Paint
csswizardry
37
3.6k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
62
AI in Enterprises - Java and Open Source to the Rescue
ivargrimstad
0
1.1k
Building a Modern Day E-commerce SEO Strategy
aleyda
45
8.7k
Leveraging Curiosity to Care for An Aging Population
cassininazir
1
160
Transcript
© DMM.com DMM GAMES Venturesを Nuxtでリニューアルした話し 合同会社DMM GAMES 橋本 純也
2019.07.25 Vue.js v-tokyo Meetup #10
© DMM.com アジェンダ 2
© DMM.com アジェンダ 自己紹介 3 リニューアルの背景 技術選定にあたって 苦労した点 よかったこと 今後の課題
© DMM.com 自己紹介 4
© DMM.com 自己紹介 5 橋本 純也 合同会社DMM GAMES プラットフォームフロントエンド開発部 V2グループ
エンジニア 2017.4〜 登壇初 jQuery → Vue + Laravel → Nuxt + TypeScript → React/Preact + TypeScript
© DMM.com リニューアルの背景 6
© DMM.com リニューアルの背景 リニューアル前がPCサイトのみだったので、 SP化対応のにあたりPCデザインも一新することになり、 レスポンシブサイトとしてリニューアルしました。 7 ▽ DMM GAMES
Ventures https://dmmgamesventures.jp/
© DMM.com リニューアルの背景 各ページの他言語化(日本語・英語・中国語) 8 ニュース更新のCMS化 リニューアルにあたり上がった要望
© DMM.com 技術選定にあたって 9
© DMM.com 技術選定にあたって CMS管理側に工数をかけられない 10 多言語ページのデザインがほぼ同じ SP化にあたりある程度パフォーマンスを考慮 環境構築の工数短縮 「AWS S3
+ CloudFront」を考慮
© DMM.com 技術選定にあたって 11
© DMM.com 技術選定にあたって 12
© DMM.com 技術選定にあたって CMS自体にWebページを表示するためのView機能をもたず、コンテンツ管理機 能(バックエンド)のみを提供するCMS。 主なメリットは、CMSではAPIのみの提供となるためフロントエンドとバックエンド を分離させることが可能。 13 Headless CMSとは?
© DMM.com 苦労した点 14
© DMM.com 苦労した点 • universalモードのgenerateで生成されるファイルに v-bindが反映されない • 公式で推奨しているvue-property-decoratorで TypeScript化を行なった場合、headメソッドが反応しない 15
© DMM.com 苦労した点 16 対象の箇所をno-ssrで囲むことでSSRされなくなる(CSR)
© DMM.com 苦労した点 17 nuxt-property-decoratorを使用する
© DMM.com よかったこと 18
© DMM.com よかったこと 環境構築にかける工数がかなり削減 19 共通UIのコンポーネント化での調整コスト削減 scoped指定でCSSのカプセル化により設計コスト削減 TypeScriptの公式サポートにより比較的スムーズに導入 ドキュメント・モジュールが充実してきている
© DMM.com 今後の課題 20
© DMM.com 今後の課題 パーフォマンスの改善余地 21 スキルセットに合わせたTypeScript導入・設定の検討 CMSを導入した場合のメンテナンスコスト増加の問題
© DMM.com さいごに 22
© DMM.com DMM GAMESでは 次世代プラットフォームを担ってくれる エンジニアを募集中です! https://dmmgames.co.jp/recruit/entry/job/id=182
© DMM.com ご清聴ありがとうございました 24