DMM GAMES VenturesをNuxtでリニューアルした話し

Transcript

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

24. © DMM.com ご清聴ありがとうございました 
 24