最近のDMMのフロントエンドの動向とその先について
https://gyazo.com/d85f87b129d3a35f37b438d65deec1fe
https://dmm.connpass.com/event/125120/
最近のDMMのフロントエンドの動向とその先について
Twitter.icon https://twitter.com/ur_uha
CTO室 千葉弘太郎
デザイナ => エンジニア
1. 体制とフロントエンドの関わり
去年より変化してきた
事業部制
CTO室は何をしているか?
事業部支援
制度支援
啓蒙活動
炎上対応など
SRE、スマートコントラクト、VR、AIなど多岐にわたる
スクラムを導入しているところが多い
事業部によっては横断的な活動もある
過去の話
以前はデザイン本部 => フロントエンド開発部があった
デザイン本部・システム本部という横断組織
デザイン - フロントエンド・サーバサイドで責務が明確に別れていた
コミュニケーションレス
フロントエンドはいわゆるコーディング派生レベルの仕事が多かった
スキル成熟度や技術的なレベルの乖離は多かった
今は変化してきた
いろんな職務の開発者がフロントエンドを触るように
昔の明確な責務はいい意味で崩壊
各々の技術的な強みを生かしてアプローチできるように
フロントエンドに限らず、AWSやGCPを日常的に触る開発者も増えている
BFF層の設計・実装
「染み出す開発者」が増えてきた
もともと層の厚いバックエンド側が勢いがあった
2. 技術展開
TECH VISON
DMM TECH VISION -DMMのテックカンパニー化に向けた、CTO松本の3年後に向けた取り組みを公開!!- - DMM inside
Gunosyから来たCTO松本
レガシーなサービスからのモダン化
SPA, BFF等、バックエンドと疎になるようにアーキテクト設計
AWS, GCP
Node.jsのバージョンをあげていく
今でも使われているもの
gulp, webpack, sass, ejs, ect
jQuery
メンテナンスが追いついていない
npm scriptsに移行しているものもある
パッケージ周りのメンテナンスで差が出ている
サーバサイドのエンジンテンプレと密結合しているものが多い
最近使われ始めたもの
React.js
SPA, Universal
flux => redux-saga
Vue.js
Nuxt.jsの利用増加
Static Generatorとの利用例あり
古いViewをVue.jsに置き換えている
Angularも使われだした
3. 課題
モダンフレームワークを使える人は増えてきたが、全体を俯瞰した上でのアプローチができる人が少ない
結果サービスをローンチ及び、リプレイス時に周辺の経験や知見、実際に触っていこうとする人がす少ない
事業のグロースに貢献できてない
圧倒的人材不足…
今後の展望
SPA, React, Vue特化だけではなくWeb全体を育てていける人
フロントエンドを軸にUI設計、サーバーサイドやAWSのクラウドも積極的にコミットできる人
「なんでもあり」な人を求めています
FlashアプリケーションをHTML5アプリケーションにリプレイスしている話
Twitter.icon https://twitter.com/norih_7
萩原愼章
ECデジタルコンテンツ本部
現在やっているものの紹介
ライブ配信FlashアプリケーションのHTML5へのリプレイス
https://www.dmm.co.jp/live/chat/ かな?yamanoku.icon
2018/4よりスタート
現在は10人程度の開発体制
主な機能・技術、フレームワーク
配信
WebRTC
コミュニケーション
Web Socket
UI
React.js, Redux
なぜリプレイスするのか
Flash Playerのサポートが2020年終了
古いアプリケーションでの保守、拡張が難しい
1年間の開発の取り組み
2018/04
スクラム開発
難しい問題にチームで立ち向かえる
WebRTCも使うので問題が色々ある
ペアプロ、モブプロは問題解決と作業効率がよい
小さいサイクル、レトロスペクティブで地道に改善
スプリントとは1週間
まずは動くものを作って改善
建設的な改善事例がたくさん
軌道にのるまでに大変だった
2018/12
開発チーム分け
スクラムでうまく行かなかった
フロントとバックで開発チーム分け
パフォーマンスを揚げられた
意思決定と実装が早く、品質も高い
成熟と共にチームワークもいい感じに
開発状況によってはバックエンドがReact.js実装
2019/03
小さいサービスをリリースして実験
技術的な不安を実験
WebRTC配信を社外のユーザ環境で利用できるか
ログ確認、ユーザアンケート
既存システムとの依存関係は最低限にして大胆な改修
2019/04〜
新規アプリケーション開発
フロントエンドの取り組み
SPAなのでタスク量が多い。ので以下の点を大事にして取り組んでいる
既存アプリケーションの問題改善
開発効率化
やったこと
1. テストを書く
Jest, Enzymeでテストコードを実装
単体テスト(Jest)、コンポーネントテスト(Enzyme)
CIでプルリク前にテスト実行したい
今後はE2Eも取り組みたい
2. コードフォーマットの統一化
ESLint, Prettier
3. 新規デプロイシステムの構築
AWS S3&CloudFlontとCIツールで配信サーバとデプロイシステムを構築
4. ログ管理
Elastic Search
サーバのログ
Sentry
フロントのログ
5. UIのカタログ化と再利用
Storybook
Atomic Design
苦労したこと
1. Windowsのブラウザでアプリが動かない
社外からの配信テストで気づいた
Mac環境で気づかなかった
2. リポジトリ連携が辛い
pub/subの並行開発
共通処理を利用するために最初は開発効率が低下…
現在はmonorepoを採用
3. デザイナーとの連携
チーム外のリソースを借りた開発
HTMLとCSSで静的な実装をしてもらった
言語ゲーム状態に
Slackチャンネルにジョインしてもらう
デザイナーの負荷をあげてるだけになった問題
Nuxt.jsをLPジェネレーターとして使ってみた話
Twitter.icon https://twitter.com/kiyomiya_hiro
清宮洋徳
開発グループリーダー
エンターテインメント開発部
DMM Music
DMM Pictures
uni
Menus by DMM
エンターテイメント本部とセールスソリューション本部にまたがって
FEのいない・足りない部署に補填
実際の状況
全体的な工数の1/3程度がLP
LPは開発が短いものが多い
工数削減したい
技術スタックも複雑ではない
HTML, SCSS, ES6が使えれば問題はない
環境構築にかかる割合が高いので、構築コストを減らしたい
良いSSGを探す
現状はnpm scriptsを案件ごとにカスタマイズしている
選定基準
Node.jsで動くもの
ドキュメントやブログに特化したものは除外
Nuxt.jsかNext.jsが候補に上がる
判断したポイント
チーム内ナレッジはVue.jsが強かったのでNuxt.jsを試す
合わなかったらトライ・アンド・エラーをやっていこう
使ってみて
メリット
コスト削減効果
環境構築一瞬
モジュール化の恩恵でCSS設計コスト下がる
モジュール分割で見やすい
手軽
API経由の時データをバインディングしてくれる
複数ページもroutingで出力できる
scoped css
デメリット
逆にコスト面が増えるケース
サーバーサイドでPCとSPを判別している時
意図しないルーティングが発生
DOMを弄るモジュールを読み込む場合は面倒
動きのあるLPを実現するplugin調査・選定
断念したケース
納品先で運用が走る場合
向こうのスキルセット依存
判断基準
運用が発生しない・発生しても対応できる
運用を開発者のコントロール下における場合はアリ
サーバーサイドフレームワークを利用していない・もしくは該当の適用を回避できる
Nuxtのルーティングとバッテイングしない場合
Lambda@edgeあたりでコントロールしてる場合、バッティングして正常に表示できなくなる
動的なDOM変更をモジュールで行っていない
複雑なアニメーションで使いたいライブラリがすぐ浮かぶ場合
あくまでもLPの作業コストを減らすため
デザイナーがjQueryライブラリを想定して依頼する場合もある
初期学習済み・導入コスト考慮できる
マッチしていたこと
APIをたくさん叩く・Headless CMSなLP
同じ構造でいくつかのLPを作る場合
コンポーネント管理が生きる
レスポンシブなLP
まとめ
案件特性によってどのジェネレータを使うかという選択肢はあっていい
ノウハウからどのような案件にジェネレータとして検討できるか?ができるように
アウトプットに対してのコスト削減につながった
SSGは強力だが、特性にハマらない場合は注意
今後は大きいプロジェクトでも実装できそうという確信
yamanoku.icon 関連
Nuxt.jsで爆速開発最高だぜ勉強会@2018-11-16
Nuxt.jsによる新規開発
GitHub.icon https://github.com/kamatte-me
アミューズメント事業部
上井慎之介
DMM INSIDE
Nuxt.jsとFirebaseでSPA×SSR×PWA×サーバーレスを実現する - DMM inside
Nuxt.js v2とGAE/SE Node.jsでSPA×SSR×PWA×サーバーレスを実現する - DMM inside
Nuxt.js採用事例
TeamLab☆Planets
https://planets.teamlab.art/tokyo/jp
FANZA Tik
https://freevideo.dmm.co.jp/
PWA案件
新規サービスでの選定基準
Nuxt、Vueの経験あり
Nuxt.jsのエコシステムが成熟してきた
学習コストが低い
技術選定
技術
SSR
PWA
レスポンシブ
構成
Nuxt.js
Service
Admin
Go lang
API
開発環境
Docker
Node.js v10
CSS設計
rscssを採用
コンポーネント指向にマッチ
複雑性がない
工数減
テスト
Jest + Vue Test Utils
E2E
Datadog Browser Tests
クラウド構成
AWS
CloudFront
キャッシュ
ALB
Fargate
CI/CD
CircleCI
Terraform
ECR
Fargate
良かったこと
開発スピード
シンプル実装
環境構築が秒
フレームワークの完成度高い
injectionとmiddleware周り
rscss良かった
新入りに優しい
学習コスト低い
エコシステムは成熟
axios module
PWA
Google Analytics
バリデーション
ユーザビリティ高い
SPA、PWAで早くなる
イケてなかったこと
ベストプラクティスが少ない
コンポーネントディレクトリ配下どうするか
確認画面とかでリロードされたときに値を保持していたい
Issueに当たる
CI/CDの環境変数で地獄を見た
envオプション
ビルド時と実行環境とで違うのを見ていた
node-configを利用
NODE_ENV