Slide 1
Slide 1 text
© DMM.com
DMM GAMES Venturesを
Nuxtでリニューアルした話し
合同会社DMM GAMES
橋本 純也
2019.07.25
Vue.js v-tokyo Meetup #10
Slide 2
Slide 2 text
© DMM.com
アジェンダ
2
Slide 3
Slide 3 text
© DMM.com
アジェンダ
自己紹介
3
リニューアルの背景
技術選定にあたって
苦労した点
よかったこと
今後の課題
Slide 4
Slide 4 text
© DMM.com
自己紹介
4
Slide 5
Slide 5 text
© DMM.com
自己紹介
5
橋本 純也
合同会社DMM GAMES
プラットフォームフロントエンド開発部 V2グループ
エンジニア
2017.4〜
登壇初
jQuery → Vue + Laravel → Nuxt + TypeScript
→ React/Preact + TypeScript
Slide 6
Slide 6 text
© DMM.com
リニューアルの背景
6
Slide 7
Slide 7 text
© DMM.com
リニューアルの背景
リニューアル前がPCサイトのみだったので、
SP化対応のにあたりPCデザインも一新することになり、
レスポンシブサイトとしてリニューアルしました。
7
▽ DMM GAMES Ventures
https://dmmgamesventures.jp/
Slide 8
Slide 8 text
© DMM.com
リニューアルの背景
各ページの他言語化（日本語・英語・中国語）
8
ニュース更新のCMS化
リニューアルにあたり上がった要望
Slide 9
Slide 9 text
© DMM.com
技術選定にあたって
9
Slide 10
Slide 10 text
© DMM.com
技術選定にあたって
CMS管理側に工数をかけられない
10
多言語ページのデザインがほぼ同じ
SP化にあたりある程度パフォーマンスを考慮
環境構築の工数短縮
「AWS S3 ＋ CloudFront」を考慮
Slide 11
Slide 11 text
© DMM.com
技術選定にあたって
11
Slide 12
Slide 12 text
© DMM.com
技術選定にあたって
12
Slide 13
Slide 13 text
© DMM.com
技術選定にあたって
CMS自体にWebページを表示するためのView機能をもたず、コンテンツ管理機
能（バックエンド）のみを提供するCMS。
主なメリットは、CMSではAPIのみの提供となるためフロントエンドとバックエンド
を分離させることが可能。
13
Headless CMSとは？
Slide 14
Slide 14 text
© DMM.com
苦労した点
14
Slide 15
Slide 15 text
© DMM.com
苦労した点
• universalモードのgenerateで生成されるファイルに
v-bindが反映されない
• 公式で推奨しているvue-property-decoratorで
TypeScript化を行なった場合、headメソッドが反応しない
15
Slide 16
Slide 16 text
© DMM.com
苦労した点
16
対象の箇所をno-ssrで囲むことでSSRされなくなる（CSR）
Slide 17
Slide 17 text
© DMM.com
苦労した点
17
nuxt-property-decoratorを使用する
Slide 18
Slide 18 text
© DMM.com
よかったこと
18
Slide 19
Slide 19 text
© DMM.com
よかったこと
環境構築にかける工数がかなり削減
19
共通UIのコンポーネント化での調整コスト削減
scoped指定でCSSのカプセル化により設計コスト削減
TypeScriptの公式サポートにより比較的スムーズに導入
ドキュメント・モジュールが充実してきている
Slide 20
Slide 20 text
© DMM.com
今後の課題
20
Slide 21
Slide 21 text
© DMM.com
今後の課題
パーフォマンスの改善余地
21
スキルセットに合わせたTypeScript導入・設定の検討
CMSを導入した場合のメンテナンスコスト増加の問題
Slide 22
Slide 22 text
© DMM.com
さいごに
22
Slide 23
Slide 23 text
© DMM.com
DMM GAMESでは
次世代プラットフォームを担ってくれる
エンジニアを募集中です！
https://dmmgames.co.jp/recruit/entry/job/id=182
Slide 24
Slide 24 text
© DMM.com
ご清聴ありがとうございました
24