最近のDMMのフロントエンドの動向とその先について

https://gyazo.com/d85f87b129d3a35f37b438d65deec1fe

https://dmm.connpass.com/event/125120/

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

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のエコシステムが成熟してきた

学習コストが低い

技術選定

技術

構成

Service

Admin

Go lang

API

開発環境

Docker

Node.js v10

CSS設計

rscssを採用

コンポーネント指向にマッチ

複雑性がない

工数減

テスト

Jest + Vue Test Utils

E2E

Datadog Browser Tests

クラウド構成

キャッシュ

CI/CD

良かったこと

開発スピード

シンプル実装

環境構築が秒

フレームワークの完成度高い

injectionとmiddleware周り

rscss良かった

新入りに優しい

学習コスト低い

エコシステムは成熟

axios module

PWA

Google Analytics

バリデーション

ユーザビリティ高い

SPA、PWAで早くなる

イケてなかったこと

ベストプラクティスが少ない

コンポーネントディレクトリ配下どうするか

確認画面とかでリロードされたときに値を保持していたい

Issueに当たる

CI/CDの環境変数で地獄を見た

envオプション

ビルド時と実行環境とで違うのを見ていた

node-configを利用

NODE_ENV