DMM Study night (2015.11.26)

1. DMMで新規サービス作ったら
フロントエンドエンジニアの重要性が
浮き彫りになった話
石橋啓太
2015.11.26DMM.Study Night

2. 自己紹介
DMM.com Labo
2014 / 05 ∼
UIデザイナー / フロントエンドエンジニア
石橋 啓太

3. 過去のDMMのサービス構築とは

4. 過去のDMMのサービス構築とは
旧来のWebサービス
¦¦
サービス全体に対して高度なJavaScriptが必要無い

5. 過去のDMMのサービス構築とは
旧来のWebサービス
¦¦
サービス全体に対して高度なJavaScriptが必要無い
フロントエンドエンジニア
という職種が存在しなかった

6. デザイナーがなんとかしないと…

7. 問題だらけ!!
知識差による品質低下
リファクタリングしない・できない
放置されるバグ
JS実装どっちがやる問題
メンテナンス性の低下

8. 「とりあえず実装」が
溢れかえっていた!!
そもそも 設計 をする文化が無い…

9. (((((((( ；ﾟДﾟ))))))))ｶﾞｸｶﾞｸﾌﾞﾙﾌﾞﾙｶﾞﾀｶﾞﾀﾌﾞﾙﾌﾞﾙ

10. 新規サービス立ち上げ…。
１から構築するチャンス！
要件定義と体制づくり

11. 要件定義

12. 最終的なサービス規模は未知数
保守対応者のスキル感は不明
リリース日は厳守
前提条件

13. 拡張のしやすさ
品質の保持
開発スピード
サービス規模
対応者のスキル感
リリース厳守
前提条件 必要要件

14. 体制づくり

15. フロントエンドエンジニア
HTML/CSS/JavaScript
デザイナー
PSD作成/コンセプト/レギュレーション
バックエンドエンジニア
PHP
デザイナーとバックエンドの間に入る

16. リードデザイナー
デザイナー
リードエンジニア
エンジニア
リードエンジニア
エンジニア
デザインセクション フロントエンドセクション バックエンドセクション
ディレクター
PL・PM

17. 要件を満たすものをつくるために
（拡張＋品質＋スピード）

18. コーディングルール
＋
ドキュメンテーション
＋
開発環境

19. 全体ルール
HTMLルール
CSSルール
JavaScriptルール
画像ルール

20. 全体ルール
HTMLルール
CSSルール
JavaScriptルール
画像ルール
小
小
大
中
小
重要度

21. 全体ルール
HTMLルール
画像ルール
JavaScriptルール
CSSルール
小
小
小
中
大
重要度
大事な話は最後にします！！！

22. 全体ルール
・触るファイルの明確化（source/destination）
・ワークフロー定義（GitFlow/GitHubFlow）
・書式定義（editorconfig）
・緊急対応時のフロー
・注意事項など

23. HTMLルール
・命名規則（ハイフン・アンダーバーなど）
・判断に困りそうなタグのみ使い方を定義
<h1>∼<h6>、<section>、<nav>、<span>、など
・基準が曖昧なタグはあえて非推奨
<aside>、<article>、<i>、など
・基本はweb標準に準拠

24. 画像ルール
・png / jpg / svg 使い分け基準
・命名規則（接頭辞・接尾辞）
・必ず圧縮すること

25. JavaScriptルール
・jQuery（UI上の表現にとどめる）
・書式はLinterで制御
・bowerでライブラリ管理
・モジュール単位で作成し、webpackで管理

26. JavaScriptルール
JavaScript部分の重要度が 中 な理由
・モジュール管理されていれば、リファクタリングはしやすい
・アサインされる人員は、一定のスキルが期待できる

27. ふぅ…ε-ヾ(´ε｀；)ゝ

28. CSSルール
・Sassを採用
・設計はFLOCSSを採用
・覚えづらいルールは極力排除
・書式はLinterで制御
・命名規則はBEM
・スタイルガイドの作成

29. Sass

30. CSSルール / Sass
⃝ ×
知識をそれほど必要としないもののみ使用
変数
ネスト
親セレクタの継承
コメント
関数
mixin/extend
プレースホルダー
条件分岐
繰り返し
四則演算

31. 設計：FLOCSS
https://github.com/hiloki/flocss

32. はじめに…
FLOCSSの特徴を少し説明します

33. CSSルール / 設計：FLOCSS
大きく３つのレイヤーに分かれている
・Foundation
・Layout
・Object
━
━
━
初期化などのベース
大枠・フレーム部分
コンテンツエリア

34. CSSルール / 設計：FLOCSS
さらに、Objectの下に３つの子レイヤー
・Object
・Component
・Project
・Utility
━
━
━
再利用できるパーツ
パーツの集合体
汎用クラス

35. CSSルール / 設計：FLOCSS
Foundation + Layoutで作った下地に
Objectを配置していくイメージ
Componentを作って、Utility・Projectを
うまく使って要素づくり

36. CSSルール / 設計：FLOCSS
Foundation
Layout
Component Utility
Project
Object

37. CSSルール / 設計
すべての作業者に、FLOCSSの概念をキチンと理解し
運用してもらうのは難しい

38. CSSルール / 設計
すべての作業者に、FLOCSSの概念をキチンと理解し
運用してもらうのは難しい
でも
Componentベースの設計思想は活用したい

39. CSSルール / 設計
作業者に対するルールをスケールダウン
・Foundation
・Layout
・Object
・Component
・Utility
・Project
設計者が触る範囲 作業者が触る範囲

40. CSSルール / 設計
作業者に対するルールをスケールダウン
・Component
・Utility
・Project
パーツはすべてココ
設計者が用意・作業者は使うだけ
パーツとは無関係な独立ページ用

41. CSSルール / 設計
作業者に対するルールをスケールダウン
・Component
・Utility
・Project
パーツはすべてココ
設計者が用意・作業者は使うだけ
パーツとは無関係な独立ページ用

42. CSSルール / 設計
作業者に対するルールをスケールダウン
Component ＋ Utility で基本全てをまかなう
・Component
・Utility
・Project
パーツはすべてココ
設計者が用意・作業者は使うだけ
パーツとは無関係な独立ページ用

43. CSSルール / 設計
作業者に対するルールをスケールダウン
Component ＋ Utility で基本全てをまかなう
・Component
・Utility
・Project
パーツはすべてココ
設計者が用意・作業者は使うだけ
パーツとは無関係な独立ページ用
わかりやすい！

44. CSSルール / 設計
CSS設計は、運用/保守の開発スピードの要

45. CSSルール / 設計
CSS設計は、運用/保守の開発スピードの要
正確なComponent化には、
デザイナーとの密なコミュニケーションが必須

46. CSSルール / 設計
CSS設計は、運用/保守の開発スピードの要
デザイナー フロントエンド バックエンド
正確なComponent化には、
デザイナーとの密なコミュニケーションが必須

47. スタイルガイド

48. CSSルール / スタイルガイド
.scssファイルから直接スタイルガイドを自動生成するように
Gulpを使って開発環境を構築
src/*.scss
dest/*.css styleguide/*.html
結合・圧縮などをした
CSSファイル
スタイルガイド
（Component一覧）

49. 実際のフロント開発環境

50. *.js
JS
（modules）
*.js
JS
（library）
*.html
スタイル
ガイド
*.scss
CSS
（source）
*.min.css
CSS
(dest)
*.min.js
JS
(entry point)
lib.min.js
JS
(library minify)
hologram sass webpack Gulp
controller（php）Viewファイル
*.volt（php）

51. *.js
JS
（modules）
*.js
JS
（library
*.html
スタイル
ガイド
*.scss
CSS
（source）
*.min.css
CSS
(dest)
*.min.js
JS
(entry point)
lib.min.js
JS
(library minify)
hologram sass webpack Gulp
controller（phpViewファイル
*.volt（php）
作業者が触るファイル

52. 設計者（フロントエンドエンジニア）が管理をするために
・CSS import
・Webpack EntryPoint
・webpack.config.js
・package.json
・bower.json
管理用ファイルをキチンと作っておく ←結構大事だった

53. フロントエンドエンジニアの重要性とは!?
まとめ

54. とにかくクソコードが減る!!!

55. とにかくクソコードが減る!!!
・メンテしやすい
・パフォーマンス高い
・バグが出にくい
・気持ちいい
・楽しい

56. メリットだらけ

57. Thank You !!
2015.11.26
DMM.Study Night