DMMで新規サービス作ったらフロントエンドエンジニアの重要性が浮き彫りになった話 - DMM Study night

DMMで新規サービス作ったらフロントエンドエンジニアの重要性が

浮き彫りになった話石橋啓太

2015.11.26DMM.Study Night

自己紹介

DMM.com Labo

2014 / 05 ～

UIデザイナー / フロントエンドエンジニア

石橋啓太

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


旧来のWebサービス

||

サービス全体に対して高度なJavaScriptが必要無い


旧来のWebサービス

||

サービス全体に対して高度なJavaScriptが必要無い

フロントエンドエンジニアという職種が存在しなかった

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

問題だらけ!!

知識差による品質低下リファクタリングしない・できない

放置されるバグ JS実装どっちがやる問題

メンテナンス性の低下

「とりあえず実装」が溢れかえっていた!!

そもそも”設計”をする文化が無い…

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

新規サービス立ち上げ…。１から構築するチャンス！

要件定義と体制づくり

要件定義

最終的なサービス規模は未知数

保守対応者のスキル感は不明

リリース日は厳守

前提条件

拡張のしやすさ

品質の保持

開発スピード

サービス規模

対応者のスキル感

リリース厳守

前提条件必要要件

体制づくり

フロントエンドエンジニアHTML/CSS/JavaScript

デザイナーPSD作成/コンセプト/レギュレーション

バックエンドエンジニアPHP

デザイナーとバックエンドの間に入る

リードデザイナー

デザイナー

リードエンジニア

エンジニア

リードエンジニア

エンジニア

デザインセクションフロントエンドセクションバックエンドセクション

ディレクター

PL・PM

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

コーディングルール

＋

ドキュメンテーション

＋

開発環境

全体ルール

HTMLルール

CSSルール

JavaScriptルール

画像ルール

全体ルール

HTMLルール

CSSルール

JavaScriptルール

画像ルール

小

小

大

中

小

重要度

全体ルール

HTMLルール

画像ルール

JavaScriptルール

CSSルール

小

小

小

中

大

重要度

大事な話は最後にします！！！

全体ルール

・触るファイルの明確化（source/destination）

・ワークフロー定義（GitFlow/GitHubFlow）

・書式定義（editorconfig）

・緊急対応時のフロー

・注意事項など

HTMLルール

・命名規則（ハイフン・アンダーバーなど）

・判断に困りそうなタグのみ使い方を定義

　<h1>～<h6>、<section>、<nav>、<span>、など

・基準が曖昧なタグはあえて非推奨

　<aside>、<article>、<i>、など

・基本はweb標準に準拠

画像ルール

・png / jpg / svg 使い分け基準

・命名規則（接頭辞・接尾辞）

・必ず圧縮すること

JavaScriptルール

・jQuery（UI上の表現にとどめる）

・書式はLinterで制御

・bowerでライブラリ管理

・モジュール単位で作成し、webpackで管理

JavaScriptルール

JavaScript部分の重要度が中な理由

・モジュール管理されていれば、リファクタリングはしやすい

・アサインされる人員は、一定のスキルが期待できる

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

CSSルール

・Sassを採用

・設計はFLOCSSを採用

・覚えづらいルールは極力排除

・書式はLinterで制御

・命名規則はBEM

・スタイルガイドの作成

Sass

CSSルール / Sass

◯ ×

知識をそれほど必要としないもののみ使用

変数ネスト親セレクタの継承コメント

関数 mixin/extend プレースホルダー条件分岐繰り返し四則演算

設計：FLOCSShttps://github.com/hiloki/flocss

はじめに…

FLOCSSの特徴を少し説明します

CSSルール / 設計：FLOCSS

大きく３つのレイヤーに分かれている

・Foundation

・Layout

・Object

━

━

━

初期化などのベース

大枠・フレーム部分

コンテンツエリア


さらに、Objectの下に３つの子レイヤー

・Object

　・Component

　・Project

　・Utility

━

━

━

再利用できるパーツ

パーツの集合体

汎用クラス


Foundation + Layoutで作った下地に

Objectを配置していくイメージ

Componentを作って、Utility・Projectを

うまく使って要素づくり


Foundation

Layout

Component UtilityProject

Object

CSSルール / 設計

すべての作業者に、FLOCSSの概念をキチンと理解し

運用してもらうのは難しい


すべての作業者に、FLOCSSの概念をキチンと理解し

運用してもらうのは難しい

でもComponentベースの設計思想は活用したい


作業者に対するルールをスケールダウン

・Foundation

・Layout

・Object

・Component

・Utility

・Project

設計者が触る範囲作業者が触る範囲



・Component

・Utility

・Project

パーツはすべてココ

設計者が用意・作業者は使うだけ

パーツとは無関係な独立ページ用



・Component

・Utility

・Project






Component ＋ Utility で基本全てをまかなう

・Component

・Utility

・Project






Component ＋ Utility で基本全てをまかなう

・Component

・Utility

・Project




わかりやすい！


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



正確なComponent化には、デザイナーとの密なコミュニケーションが必須



デザイナーフロントエンドバックエンド

正確なComponent化には、デザイナーとの密なコミュニケーションが必須

スタイルガイド

CSSルール / スタイルガイド

.scssファイルから直接スタイルガイドを自動生成するように Gulpを使って開発環境を構築

src/*.scss

dest/*.css styleguide/*.html

結合・圧縮などをした CSSファイル

スタイルガイド（Component一覧）

実際のフロント開発環境

*.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）

*.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）

作業者が触るファイル

設計者（フロントエンドエンジニア）が管理をするために

・CSS import

・Webpack EntryPoint

・webpack.config.js

・package.json

・bower.json

管理用ファイルをキチンと作っておく ←結構大事だった

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

まとめ

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

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

・メンテしやすい

・パフォーマンス高い

・バグが出にくい

・気持ちいい

・楽しい

メリットだらけ

Thank You !!

2015.11.26DMM.Study Night

Technology

DMMで新規サービス作ったらフロントエンドエンジニアの重要性が浮き彫りになった話 - DMM Study night