DMMの闇に触れた話

DMMの闇に触れた話
DMM.com Labo ⽥田中克典
DMM.Study Night 2015.11.26

⾃自⼰己紹介
⽥田中克典
DMM.com Labo
⾦金沢デザイン部
フロントエンドチーム所属
2014.10 　DMM.com Labo へ Join
2014.11 　デザイン部フロントエンドチームへ Join
以後、既存サービス・共通基盤の改修に従事
埼⽟玉県出⾝身　富⼭山市在住

夜も更けて参りました…⋯
（まだ少し早いけど）

DMMの闇に触れた話
開始します！

と、その前に・・・

本発表に先⽴立ち
こんなことが有りました

DMM.Study Night
2015.11.26
発表資料レビュー会開催
https://www.flickr.com/photos/leecullivan/5357085004/

弊社スタッフの反応

“⽥田中さん、⾔言い過ぎると
DMMから消されますよwww”
‒–ーDMM.com Labo フロントエンドチーム某メンバー

ん？まじすか…⋯
怖いなあ。
問題ないかシステムさんに
資料を⾒見て頂こう！

“セキュリティ的には問題ないが、”
‒–ーDMM.com Labo 某システムエンジニア

ε=(￣｡￣;)ﾌｩ

“ネガティブな内容なので
セキュリティとはずれますが、
デザイン部の上⻑⾧長承認を
とっておくのがよいのでは？”
‒–ーDMM.com Labo 某システムエンジニア

https://www.flickr.com/photos/j_̲benson/7023561195/
DMM.Study Night
2015.11.26

“⽥田中さん、これって・・・”
‒–ーDMM.com Labo フロントエンドチームリーダー

(((( ；ﾟДﾟ)))ｶﾞｸｶﾞｸﾌﾞﾙﾌﾞﾙ

ということで、

今回の内容、
正直⽇日和ってます！ハイ！

でも、
笑いに昇華すれば
⼤大丈夫なはず！

と、その前に・・・
（しつこい）

伏線を張ります

DMM既存サービスおよび
プラットフォームの開発フロー

フロントエンド開発
静的ファイル専⽤用サーバ
バックエンド開発
開発環境
ステージング環境
本番環境
sftp
sftp
専⽤用ツール
cvs

フロントのタスクに絞って
もう少し細かく⾒見ていきます

HTML
PHP
sftp
CSS
JS
IMG

デザイナー
フロントエンドエンジニアは、
ビューファイル（PHP）
に触れる事はない
※⼀一部、別基盤の新規案件は除く

伏線はここまで！
（⻑⾧長すぎ）

闇とは？

“闇(やみ)とは、光の無い状態のこと。
暗闇(くらやみ)とも、暗⿊黒とも。
…⋯
予測不可能な状態を喩える場合にも使われる語彙
「⼀一⼨寸先は闇」のように⽤用いる。”
‒–ーWikipedia

フロントエンドの闇とは？

“闇(やみ)とは、使途不明な既存コードのこと。
暗闇(くらやみ)とも、暗⿊黒とも。
…⋯
予測不可能なバグを誘発する状態を
喩える場合にも使われる語彙
「⼀一⼨寸先は闇」のように⽤用いる。”

私が出会ったフロントまわりの闇

Darkness
Legacy Code

“何年も前に誰かが作り、
内容が複雑で何をしているのかよく分からず、
まともな仕様書もない”
‒–ー「レガシーコード改善ガイド」のススメ
DMM.Study Night
2015.11.26 http://codezine.jp/article/detail/4103

あるある！

⾔言い換えると・・・

使途不明な影響範囲の広いコード

使途不明な影響範囲が広いソースコード
✓ コメント情報不⾜足
✓ CVSコミットメッセージ情報不⾜足

CVSコミットメッセージ？

壊れないように必要最低限の
コード修正 or 追加
さらに闇が深くなる

闇を放置しておくと・・・

JS：もらい事故
改修箇所とは関係無い箇所で
バグ発⽣生（顕在化）

CSS：セレクタ詳細度UP!

そんなCSSでお困りの我々に
福⾳音の書が！

SMACSS
Scalable & Modular Architecture for CSS
https://smacss.com/

少し脱線
CSS Architecture

CSS Architecture
BEM
Block, Element, Modifier
https://en.bem.info/

.hogebox__heading {
…
background-color: #fff;
color: #333;
…
}
あれ？当たらないぞ？
new.css
CSS Architecture

#container h2 {
…
background: #222;
color: #fff;
…
}
こいつのせいか・・・
old.css
CSS Architecture

#container .hogebox__heading {
…
background-color: #fff;
color: #333;
…
}
"o(-‑_̲-‑;*) ｳｩﾑ…⋯
new.css
CSS Architecture...!?

既存CSSが存在する
⼤大規模サイト内の
ページ改修においては、
CSS設計は苦労します。
CSS Architecture

Darkness
jQuery

“デザインさん
あるページだけクリックしても
反応しないんだけど、、、”
‒–ーDMM.com Labo 某Webディレクター

jQuery Syntax
$('#js-hoge').on('click', function(e) {…

Uncaught TypeError:
$(...).on is not a function(…)
jQuery Syntax

( 　ﾟдﾟ) ・・・
jQuery Syntax

□＿ヾ(･_̲･ )console
jQuery Syntax

jQuery Syntax
> $.fn.jquery
<- "1.3.2"

_̲, ._̲
（；ﾟ Дﾟ） …⋯!?
jQuery Syntax

読み込むページによって
jQueryが異なる
下限は1.3.2
jQuery Syntax

$('#js-hoge').bind('click', function(e) {…
jQuery Syntax

⼿手戻りが怖いから、
共通基盤案件では、
取り敢えず1.3.2までの
APIで書いています
jQuery Syntax

少し脱線
multiple versions of jQuery

multiple versions of JQuery
<script text/javascript
src="/js/library/jquery_1_8_3/jquery-1.8.3.min.js">
</script>
…
…
…

<script type="text/javascript" src="/_js/jquery.js">
</script>

> $.fn.jquery
<- "1.3.2"
multiple versions of JQuery

どうしてこうなった！!
ヾ(｡｀Д´｡)ﾉ⼺彡

フロントエンド闇化の原因
✓ 知識差による品質低下
✓ リファクタリングしない・できない
✓ 放置されるバグ
「とりあえず実装」

このまま闇を放置して
おくつもりはありません！

つい最近ですが、
闇対策はじめました！
(*´∇｀*)

breaking the darkness
Refactoring

git
(Atlassian Stash)

HTML
PHP
sftp
CSS
JS
IMGgit管理

code review

coding guidelines

DMMでは
フロント周りで
まだまだやることが
たくさんあります！

・・・ということで

DMM.Study Night
2015.11.26 https://www.flickr.com/photos/donkeyhotey/5666065982

共にDMMの
フロントエンドの闇を
切り裂いてくれる
勇者を募集しています！

闇との戦いだけじゃない！

旧基盤に縛られない新規案件
最新のフロントエンド技術
の実践投⼊入

DMM.com Labo
Front-‑End Team
since 2014

DMM.Study Night
2015.11.26 https://www.flickr.com/photos/thelastminute/1972425722/

このビッグウェーブに
乗るしかない！

ということで

ご清聴ありがとうございました！

Thank you!!

DMMの闇に触れた話

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to DMMの闇に触れた話

Similar to DMMの闇に触れた話 (18)

DMMの闇に触れた話