SlideShare a Scribd company logo
1 of 63
Download to read offline
食べログのフロントエンドエンジニアって
めっちゃ大変やねん...
株式会社カカクコム
食べログシステム本部 システム開発1部 FEチーム
金野 淑恵
Copyright © Kakaku.com Inc. All Rights Reserved.
今日話すこと
フロントエンドの開発体制作りにおける苦労
Copyright © Kakaku.com Inc. All Rights Reserved.
今日ほとんど話さないこと
技術的なノウハウ
お話の流れ
自己紹介
食べログの紹介
食べログのフロントエンドエンジニアって?
具体的にやっていること
まとめ
Copyright © Kakaku.com Inc. All Rights Reserved.
自己紹介
金野 淑恵
(かねの よしえ)
@empitsu88
Profile
Career
食べログシステム本部FEチームリーダー
食べログのフロントエンド領域の設計・開発などを担当
2009~2015年 某印刷会社入社
Flasher/フロントエンジニアとして受託Web制作
2015~2017年 株式会社カカクコム入社
食べログのフロントエンドエンジニア
お話の流れ
自己紹介
食べログの紹介
食べログのフロントエンドエンジニアって?
具体的にやっていること
まとめ
Copyright © Kakaku.com Inc. All Rights Reserved.
は
お店選びで
失敗したくない人のための
グルメサイトです
Copyright © Kakaku.com Inc. All Rights Reserved.
食べログってどんなサービス?
ネットで飲食店を探すときに起こりがちな
「想像とは違うお店だった」というような失敗をなくすために
ユーザーの口コミと共に全国のレストラン情報を掲載
Copyright © Kakaku.com Inc. All Rights Reserved.
基本データ
1億450万人 約2,200万件 約86万件
…という大規模なグルメサイト
月間利用者数 口コミ数 掲載店舗
※2017年12月現在のデータ
Copyright © Kakaku.com Inc. All Rights Reserved.
カカクコム社のミッション
ユーザー本位
サービスの原点は
生活者が感じる不便や社会的課題を解決すること
Copyright © Kakaku.com Inc. All Rights Reserved.
派生サイト
Copyright © Kakaku.com Inc. All Rights Reserved.
Ruby on Rails unicorn MySQL
使用技術
プロジェクト・タスク管理
(REDMINE)
ソースコード・バージョン管理
(GitHub)
Copyright © Kakaku.com Inc. All Rights Reserved.
HTML5 CSS3
jQuery + Backbone.JS ECMAScrip2015
Sass
使用技術 - フロントエンド
Gulp + webpack
+
SMACSS+BEM+FLOCSS compass
CSS3
Copyright © Kakaku.com Inc. All Rights Reserved.
アプリ構成
20以上のRailsアプリが存在
appliA
appliB
appliC
appliD
appliE
appliF
appliG
appliH
appliI
appliJ
appliK
appliL
main_service
hoge
fuga
fega
haga
base_api
faga
micro_service
Copyright © Kakaku.com Inc. All Rights Reserved.
お察しの通り・・・
とにかく規模が大きく
ソースコードもカオス
お話の流れ
自己紹介
食べログの紹介
食べログのフロントエンドエンジニアって?
具体的にやっていること
まとめ
Copyright © Kakaku.com Inc. All Rights Reserved.
従来の食べログの開発体制
Copyright © Kakaku.com Inc. All Rights Reserved.
デザイナー
UI設計者&デザイナー&マークアップエンジニア
約20名体制
Copyright © Kakaku.com Inc. All Rights Reserved.
エンジニア
Rubyエンジニア&インフラエンジニア&ネイティブアプリエンジニア
約70名体制
Copyright © Kakaku.com Inc. All Rights Reserved.
エンジニア デザイナー
業務分担
インフラ JSDB CSSRuby HTML
バックエンド (server-side)
UI/
VS
フロントエンド (client-side)
Copyright © Kakaku.com Inc. All Rights Reserved.
エンジニア+デザイナーで約100名の開発部隊
HTML/CSS/JS を俯瞰したスキルを持った人が少ない
1週間でデプロイされる Redmine のチケットの数は約80件
Copyright © Kakaku.com Inc. All Rights Reserved.
結果・・・
場当たり的な実装が繰り返され カオス に
Copyright © Kakaku.com Inc. All Rights Reserved.
そこで・・・
2016年
フロントエンドエンジニア
爆誕
Copyright © Kakaku.com Inc. All Rights Reserved.
エンジニア デザイナー
担当領域
Server JSDB CSSRuby HTML
バックエンド (server-side)
UI/
VS
フロントエンド (client-side)
フロントエンドエンジニア
Copyright © Kakaku.com Inc. All Rights Reserved.
フロントエンドエンジニア
FEチーム
今は約6名体制
Copyright © Kakaku.com Inc. All Rights Reserved.
「フロントエンドはFEが
全部つくれば安心だね!」
Copyright © Kakaku.com Inc. All Rights Reserved.
「フロントエンドはFEが
全部つくれば安心だね!」
Copyright © Kakaku.com Inc. All Rights Reserved.
エンジニア デザイナー
担当領域
Server JSDB CSSRuby HTML
バックエンド (server-side)
UI/
VS
フロントエンド (client-side)
フロントエンドエンジニア
開発の主体はエンジニア・デザイナーのまま
Copyright © Kakaku.com Inc. All Rights Reserved.
あくまで食べログのFEは
監督者・サポーターの立場
Copyright © Kakaku.com Inc. All Rights Reserved.
なんで?完全分業にしないの?
チーム・人員間で意識や目的の共有が難しくなりがち
チーム間の利害の対立や局所最適化が発生しやすい
特定のチームしか実装しない・できない状態だと
そのチームが詰まったときに案件が進められなくなってしまう
事業会社ではデメリットも多い・・・
職能別組織の一般的な課題として・・・
Copyright © Kakaku.com Inc. All Rights Reserved.
あくまで目的は事業の成功
制作者一丸となることが必要
FEの存在意義は
食べログのフロントエンドに秩序をもたらし
正しい方向に導いていくこと
Copyright © Kakaku.com Inc. All Rights Reserved.
正直、ただ開発するより
めっちゃ大変
お話の流れ
自己紹介
食べログの紹介
食べログのフロントエンドエンジニアって?
具体的にやっていること
まとめ
Copyright © Kakaku.com Inc. All Rights Reserved.
やってること
開発案件での方針策定・設計・サポート
フロントエンドの環境整備
Copyright © Kakaku.com Inc. All Rights Reserved.
1.開発案件での方針策定・設計・サポート
Copyright © Kakaku.com Inc. All Rights Reserved.
まず「キレイなコード」を考える
「キレイさ」とは
PREDICTABLE 予測しやすい
MAINTAINABLE 保守しやすい
REUSABLE 再利用しやすい
SCALABLE 拡張しやすい
Googleエンジニア フィリップ・ウォルトン氏のブログより
Copyright © Kakaku.com Inc. All Rights Reserved.
具体的に?
ready イベントの callback は
1つの Entry point につき1つだけ
Module ファイルは Entry point から初期化する
Copyright © Kakaku.com Inc. All Rights Reserved.
ready イベントの callback は 1entry point につき1つだけ
<html>
<head>
<script src=“smartphone/sidemenu.js”></script>
<script src=“smartphone/top_mainvisual.js”></script>
• smartphone/top.html
• smartphone/sidemenu.js
$(function(){
// ハンバーガーメニュークリックで
サイドメニューを表示する処理
});
$(function(){
// メインビジュアルをカルーセル化する処理
});
• smartphone/top_mainvisual.js
Copyright © Kakaku.com Inc. All Rights Reserved.
<html>
<head>
<script src=“smartphone/sidemenu.js”></script>
<script src=“smartphone/top_mainvisual.js”></script>
• smartphone/top.html
• smartphone/sidemenu.js
$(function(){
// ハンバーガーメニュークリックで
サイドメニューを表示する処理
});
$(function(){
// メインビジュアルをカルーセル化する処理
});
• smartphone/top_mainvisual.js
ready イベントの callback は 1entry point につき1つだけ
Copyright © Kakaku.com Inc. All Rights Reserved.
<html>
<head>
<script src=“smartphone/top.js”></script>
• smartphone/top.html
• smartphone/top.js
$(()=>{
// ハンバーガーメニュークリックで
サイドメニューを表示する処理
// メインビジュアルをカルーセル化する処理
});
ready イベントの callback は 1entry point につき1つだけ
Copyright © Kakaku.com Inc. All Rights Reserved.
Moduleファイルは Entry point から初期化する
<html>
<head>
<script src=“smartphone/top.js”></script>
• smartphone/top.html
• smartphone/top.js
import Sidemenu from “modules/smartphone/sidemenu.js”;
import TopMainvisual from “modules/smartphone/top-mainvisual.js”;
$(()=> {
Sidemenu.ready();
TopMainvisual.ready();
});
Copyright © Kakaku.com Inc. All Rights Reserved.
const Sidemenu = {
ready() {
// ready 時に必要な処理
}
}
export default Sidemenu;
• modules/smartphone/sidemenu.js
moduleファイル側では、呼び出した途端に初期化が始まらないように
Moduleファイルは Entry point から初期化する
Copyright © Kakaku.com Inc. All Rights Reserved.
設計のときに考えるべきこと
食べログの実態に即しているか
費用対効果は適切か
優先度は適切か
= 回せるか
= コスト
= 納期
Copyright © Kakaku.com Inc. All Rights Reserved.
例)見た目に関わる制御はなるべくCSSファイルに
$(window).on('scroll', (e) => {
if ($(window).scrollTop() >= 500 ){
// js で行うのは is-scroll の付け替えのみ
$('.js-header').addClass('is-scroll');
} else {
$('.js-header').removeClass('is-scroll');
}
});
• JS
• CSS
.header.is-scroll {
position: fixed;
top: 0;
width: 100%;
}
Copyright © Kakaku.com Inc. All Rights Reserved.
納期を最優先に考えた上で
「キレイさ」
「回せるか」
「コスト」
のバランスを考えて設計する
Copyright © Kakaku.com Inc. All Rights Reserved.
他には・・・
設計書の粒度に気をつけたり・・・
「なぜこの方針?」「なぜこうする必要があるの?」を
口頭で説明したり・・・
依頼する実装者によって説明の仕方を変えたり・・・
Copyright © Kakaku.com Inc. All Rights Reserved.
手を動かすのは
あくまで他部署のエンジニア
綿密なコミュニケーションと
サポートを心がける
Copyright © Kakaku.com Inc. All Rights Reserved.
正直、めっちゃめんどうくさい
Copyright © Kakaku.com Inc. All Rights Reserved.
悩みは多い・・・
どうしたら他部署であるエンジニア・デザイナーと
密な連携が取れるだろうか?
どうしたら気軽にJSやフロントエンドについて
質問しにきてくれるだろうか?
エンジニアが片手間で手がけているJSの経験値を
効率よく積んでもらえるには・・・?
Copyright © Kakaku.com Inc. All Rights Reserved.
エンジニアBチーム
エンジニアAチームFEチーム
エンジニアCチーム
こうした
部署ごとに窓口となるメンバーを決めた
エンジニア内にも兼任フロントエンジニアを作った
Aチーム担当
Bチーム担当
Cチーム担当
兼任FE
兼任FE
兼任FE
Copyright © Kakaku.com Inc. All Rights Reserved.
こうなった!
各部署の案件や仕様について誰が一番把握しているか明確に!
エンジニア・デザイナーも窓口が明確なら気軽に聞きやすく!
リーダーがぜんぶ問い合わせを請け負ってるとボトルネックに
なりやすかったがそれも解消!
Copyright © Kakaku.com Inc. All Rights Reserved.
2.フロントエンドの環境整備
Copyright © Kakaku.com Inc. All Rights Reserved.
フロントエンドコーディング規約
Copyright © Kakaku.com Inc. All Rights Reserved.
食べログスタイルガイド
Copyright © Kakaku.com Inc. All Rights Reserved.
コンパイル機構の整備
+
Rails 5.1 + Webpacker
+
Copyright © Kakaku.com Inc. All Rights Reserved.
ソースコードのリファクタリング
ECMAScript5 → ECMAScript6 化
CSS module の FLOCSS化
Pure module化 – entryPoint から全部呼び出す
Copyright © Kakaku.com Inc. All Rights Reserved.
正直、めっちゃ地道
お話の流れ
自己紹介
食べログの紹介
食べログのフロントエンドエンジニアって?
具体的にやっていること
まとめ
Copyright © Kakaku.com Inc. All Rights Reserved.
まとめ
食べログのFEは開発というよりサポートに注力しているが
めっちゃ大変
「納期」「キレイさ」「回せるか」「コスト」のバランスを
考えて設計するのは めっちゃめんどうくさい
リファクタリングとか めっちゃ地道
Copyright © Kakaku.com Inc. All Rights Reserved.
でも・・・
地道ながんばりの結果
すこしずつ成果はでてきている
Copyright © Kakaku.com Inc. All Rights Reserved.
だから・・・
食べログを盛り上げるために
\ がんばる/
Copyright © Kakaku.com Inc. All Rights Reserved.
大変なことにも立ち向かえる
フロントエンドエンジニア
\ 絶賛募集中! /
ご清聴ありがとうございました

More Related Content

What's hot

心理的安全性を 0から80ぐらいに上げた話
心理的安全性を 0から80ぐらいに上げた話心理的安全性を 0から80ぐらいに上げた話
心理的安全性を 0から80ぐらいに上げた話Yusuke Hisatsu
 
ビジネスパーソンのためのDX入門講座エッセンス版
ビジネスパーソンのためのDX入門講座エッセンス版ビジネスパーソンのためのDX入門講座エッセンス版
ビジネスパーソンのためのDX入門講座エッセンス版Tokoroten Nakayama
 
開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)mosa siru
 
ドメイン駆動設計サンプルコードの徹底解説
ドメイン駆動設計サンプルコードの徹底解説ドメイン駆動設計サンプルコードの徹底解説
ドメイン駆動設計サンプルコードの徹底解説増田 亨
 
ユーザーストーリー駆動開発で行こう。
ユーザーストーリー駆動開発で行こう。ユーザーストーリー駆動開発で行こう。
ユーザーストーリー駆動開発で行こう。toshihiro ichitani
 
大規模分散システムの現在 -- Twitter
大規模分散システムの現在 -- Twitter大規模分散システムの現在 -- Twitter
大規模分散システムの現在 -- Twittermaruyama097
 
緊急Ques - コードのメトリクスに基づくリファクタリング戦略
緊急Ques - コードのメトリクスに基づくリファクタリング戦略緊急Ques - コードのメトリクスに基づくリファクタリング戦略
緊急Ques - コードのメトリクスに基づくリファクタリング戦略Tomoki Kuriyama
 
DXとかDevOpsとかのなんかいい感じのやつ 富士通TechLive
DXとかDevOpsとかのなんかいい感じのやつ 富士通TechLiveDXとかDevOpsとかのなんかいい感じのやつ 富士通TechLive
DXとかDevOpsとかのなんかいい感じのやつ 富士通TechLiveTokoroten Nakayama
 
チケット駆動開発の解説~タスク管理からプロセス改善へ
チケット駆動開発の解説~タスク管理からプロセス改善へチケット駆動開発の解説~タスク管理からプロセス改善へ
チケット駆動開発の解説~タスク管理からプロセス改善へakipii Oga
 
Dockerfileを改善するためのBest Practice 2019年版
Dockerfileを改善するためのBest Practice 2019年版Dockerfileを改善するためのBest Practice 2019年版
Dockerfileを改善するためのBest Practice 2019年版Masahito Zembutsu
 
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture世界一わかりやすいClean Architecture
世界一わかりやすいClean ArchitectureAtsushi Nakamura
 
Dockerからcontainerdへの移行
Dockerからcontainerdへの移行Dockerからcontainerdへの移行
Dockerからcontainerdへの移行Kohei Tokunaga
 
トランザクションスクリプトのすすめ
トランザクションスクリプトのすすめトランザクションスクリプトのすすめ
トランザクションスクリプトのすすめpospome
 
人は一ヶ月でエンジニアになれるのか - 詳細解説
人は一ヶ月でエンジニアになれるのか - 詳細解説人は一ヶ月でエンジニアになれるのか - 詳細解説
人は一ヶ月でエンジニアになれるのか - 詳細解説Livesense Inc.
 
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)NTT DATA Technology & Innovation
 
テスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるなテスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるなKentaro Matsui
 
テストコードの DRY と DAMP
テストコードの DRY と DAMPテストコードの DRY と DAMP
テストコードの DRY と DAMPYusuke Kagata
 
Kubernetesのしくみ やさしく学ぶ 内部構造とアーキテクチャー
Kubernetesのしくみ やさしく学ぶ 内部構造とアーキテクチャーKubernetesのしくみ やさしく学ぶ 内部構造とアーキテクチャー
Kubernetesのしくみ やさしく学ぶ 内部構造とアーキテクチャーToru Makabe
 
マルチテナント化で知っておきたいデータベースのこと
マルチテナント化で知っておきたいデータベースのことマルチテナント化で知っておきたいデータベースのこと
マルチテナント化で知っておきたいデータベースのことAmazon Web Services Japan
 

What's hot (20)

心理的安全性を 0から80ぐらいに上げた話
心理的安全性を 0から80ぐらいに上げた話心理的安全性を 0から80ぐらいに上げた話
心理的安全性を 0から80ぐらいに上げた話
 
ビジネスパーソンのためのDX入門講座エッセンス版
ビジネスパーソンのためのDX入門講座エッセンス版ビジネスパーソンのためのDX入門講座エッセンス版
ビジネスパーソンのためのDX入門講座エッセンス版
 
開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)
 
ドメイン駆動設計サンプルコードの徹底解説
ドメイン駆動設計サンプルコードの徹底解説ドメイン駆動設計サンプルコードの徹底解説
ドメイン駆動設計サンプルコードの徹底解説
 
ユーザーストーリー駆動開発で行こう。
ユーザーストーリー駆動開発で行こう。ユーザーストーリー駆動開発で行こう。
ユーザーストーリー駆動開発で行こう。
 
大規模分散システムの現在 -- Twitter
大規模分散システムの現在 -- Twitter大規模分散システムの現在 -- Twitter
大規模分散システムの現在 -- Twitter
 
緊急Ques - コードのメトリクスに基づくリファクタリング戦略
緊急Ques - コードのメトリクスに基づくリファクタリング戦略緊急Ques - コードのメトリクスに基づくリファクタリング戦略
緊急Ques - コードのメトリクスに基づくリファクタリング戦略
 
DXとかDevOpsとかのなんかいい感じのやつ 富士通TechLive
DXとかDevOpsとかのなんかいい感じのやつ 富士通TechLiveDXとかDevOpsとかのなんかいい感じのやつ 富士通TechLive
DXとかDevOpsとかのなんかいい感じのやつ 富士通TechLive
 
チケット駆動開発の解説~タスク管理からプロセス改善へ
チケット駆動開発の解説~タスク管理からプロセス改善へチケット駆動開発の解説~タスク管理からプロセス改善へ
チケット駆動開発の解説~タスク管理からプロセス改善へ
 
Dockerfileを改善するためのBest Practice 2019年版
Dockerfileを改善するためのBest Practice 2019年版Dockerfileを改善するためのBest Practice 2019年版
Dockerfileを改善するためのBest Practice 2019年版
 
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
 
Dockerからcontainerdへの移行
Dockerからcontainerdへの移行Dockerからcontainerdへの移行
Dockerからcontainerdへの移行
 
トランザクションスクリプトのすすめ
トランザクションスクリプトのすすめトランザクションスクリプトのすすめ
トランザクションスクリプトのすすめ
 
人は一ヶ月でエンジニアになれるのか - 詳細解説
人は一ヶ月でエンジニアになれるのか - 詳細解説人は一ヶ月でエンジニアになれるのか - 詳細解説
人は一ヶ月でエンジニアになれるのか - 詳細解説
 
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)
Kubernetesでの性能解析 ~なんとなく遅いからの脱却~(Kubernetes Meetup Tokyo #33 発表資料)
 
テスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるなテスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるな
 
テストコードの DRY と DAMP
テストコードの DRY と DAMPテストコードの DRY と DAMP
テストコードの DRY と DAMP
 
Kubernetesのしくみ やさしく学ぶ 内部構造とアーキテクチャー
Kubernetesのしくみ やさしく学ぶ 内部構造とアーキテクチャーKubernetesのしくみ やさしく学ぶ 内部構造とアーキテクチャー
Kubernetesのしくみ やさしく学ぶ 内部構造とアーキテクチャー
 
分散トレーシング技術について(Open tracingやjaeger)
分散トレーシング技術について(Open tracingやjaeger)分散トレーシング技術について(Open tracingやjaeger)
分散トレーシング技術について(Open tracingやjaeger)
 
マルチテナント化で知っておきたいデータベースのこと
マルチテナント化で知っておきたいデータベースのことマルチテナント化で知っておきたいデータベースのこと
マルチテナント化で知っておきたいデータベースのこと
 

Similar to 食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・

グリーにおけるスマホアプリ開発~HTML5編
グリーにおけるスマホアプリ開発~HTML5編グリーにおけるスマホアプリ開発~HTML5編
グリーにおけるスマホアプリ開発~HTML5編Mitsuhiro Tanda
 
はじめてのTeam Foundation ServerとVisual Studio Online
はじめてのTeam Foundation ServerとVisual Studio OnlineはじめてのTeam Foundation ServerとVisual Studio Online
はじめてのTeam Foundation ServerとVisual Studio OnlineKazushi Kamegawa
 
JS非同期処理のいま
JS非同期処理のいまJS非同期処理のいま
JS非同期処理のいまMasakazu Muraoka
 
多分わかりやすいDurable functions
多分わかりやすいDurable functions多分わかりやすいDurable functions
多分わかりやすいDurable functions宜行 武井
 
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
スマートフォンサイト制作  よくあるトラブルと 解決方法・回避方法スマートフォンサイト制作  よくあるトラブルと 解決方法・回避方法
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法Maboroshi.inc
 
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきことメンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきことMitsuru Ogawa
 
CakePHP × 国産! baserCMS3の深化と今後の拡がり
CakePHP × 国産! baserCMS3の深化と今後の拡がりCakePHP × 国産! baserCMS3の深化と今後の拡がり
CakePHP × 国産! baserCMS3の深化と今後の拡がりDaisuke Abe
 
Progressive Enhancement - クロスブラウザー対応に必要なこと - Microsoft IE10 移行セミナー
Progressive Enhancement - クロスブラウザー対応に必要なこと - Microsoft IE10 移行セミナーProgressive Enhancement - クロスブラウザー対応に必要なこと - Microsoft IE10 移行セミナー
Progressive Enhancement - クロスブラウザー対応に必要なこと - Microsoft IE10 移行セミナーFutomi Hatano
 
QAエンジニアを通じて 弊社の開発環境がより良くなる日 〜 OpenSTF 編 〜
QAエンジニアを通じて弊社の開発環境がより良くなる日 〜 OpenSTF 編 〜QAエンジニアを通じて弊社の開発環境がより良くなる日 〜 OpenSTF 編 〜
QAエンジニアを通じて 弊社の開発環境がより良くなる日 〜 OpenSTF 編 〜gree_tech
 
Spring Boot × Vue.jsでSPAを作る
Spring Boot × Vue.jsでSPAを作るSpring Boot × Vue.jsでSPAを作る
Spring Boot × Vue.jsでSPAを作るGo Miyasaka
 
fastlane x iOSアプリのCI
fastlane x iOSアプリのCIfastlane x iOSアプリのCI
fastlane x iOSアプリのCIToshiyuki Hirata
 
ディレクションのフロントエンド開発 @JSオジサン 12/17
ディレクションのフロントエンド開発 @JSオジサン 12/17ディレクションのフロントエンド開発 @JSオジサン 12/17
ディレクションのフロントエンド開発 @JSオジサン 12/17Yosuke Doke
 
How to django at first
How to django at firstHow to django at first
How to django at firstMaito Kuwahara
 
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...SwapSkills
 
Ec cube user group tokyo mtg 2.13に向けて
Ec cube user group tokyo mtg 2.13に向けてEc cube user group tokyo mtg 2.13に向けて
Ec cube user group tokyo mtg 2.13に向けてAyumu Kawaguchi
 

Similar to 食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・ (20)

RPAって何、どんなことできるの
RPAって何、どんなことできるのRPAって何、どんなことできるの
RPAって何、どんなことできるの
 
OSC2013@FUKUOKA
OSC2013@FUKUOKAOSC2013@FUKUOKA
OSC2013@FUKUOKA
 
グリーにおけるスマホアプリ開発~HTML5編
グリーにおけるスマホアプリ開発~HTML5編グリーにおけるスマホアプリ開発~HTML5編
グリーにおけるスマホアプリ開発~HTML5編
 
はじめてのTeam Foundation ServerとVisual Studio Online
はじめてのTeam Foundation ServerとVisual Studio OnlineはじめてのTeam Foundation ServerとVisual Studio Online
はじめてのTeam Foundation ServerとVisual Studio Online
 
JS非同期処理のいま
JS非同期処理のいまJS非同期処理のいま
JS非同期処理のいま
 
多分わかりやすいDurable functions
多分わかりやすいDurable functions多分わかりやすいDurable functions
多分わかりやすいDurable functions
 
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
スマートフォンサイト制作  よくあるトラブルと 解決方法・回避方法スマートフォンサイト制作  よくあるトラブルと 解決方法・回避方法
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
 
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきことメンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
 
History api
History apiHistory api
History api
 
CakePHP × 国産! baserCMS3の深化と今後の拡がり
CakePHP × 国産! baserCMS3の深化と今後の拡がりCakePHP × 国産! baserCMS3の深化と今後の拡がり
CakePHP × 国産! baserCMS3の深化と今後の拡がり
 
Progressive Enhancement - クロスブラウザー対応に必要なこと - Microsoft IE10 移行セミナー
Progressive Enhancement - クロスブラウザー対応に必要なこと - Microsoft IE10 移行セミナーProgressive Enhancement - クロスブラウザー対応に必要なこと - Microsoft IE10 移行セミナー
Progressive Enhancement - クロスブラウザー対応に必要なこと - Microsoft IE10 移行セミナー
 
QAエンジニアを通じて 弊社の開発環境がより良くなる日 〜 OpenSTF 編 〜
QAエンジニアを通じて弊社の開発環境がより良くなる日 〜 OpenSTF 編 〜QAエンジニアを通じて弊社の開発環境がより良くなる日 〜 OpenSTF 編 〜
QAエンジニアを通じて 弊社の開発環境がより良くなる日 〜 OpenSTF 編 〜
 
Spring Boot × Vue.jsでSPAを作る
Spring Boot × Vue.jsでSPAを作るSpring Boot × Vue.jsでSPAを作る
Spring Boot × Vue.jsでSPAを作る
 
fastlane x iOSアプリのCI
fastlane x iOSアプリのCIfastlane x iOSアプリのCI
fastlane x iOSアプリのCI
 
ディレクションのフロントエンド開発 @JSオジサン 12/17
ディレクションのフロントエンド開発 @JSオジサン 12/17ディレクションのフロントエンド開発 @JSオジサン 12/17
ディレクションのフロントエンド開発 @JSオジサン 12/17
 
How to django at first
How to django at firstHow to django at first
How to django at first
 
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
 
Ec cube user group tokyo mtg 2.13に向けて
Ec cube user group tokyo mtg 2.13に向けてEc cube user group tokyo mtg 2.13に向けて
Ec cube user group tokyo mtg 2.13に向けて
 
XP祭り2013-LT-Codeer
XP祭り2013-LT-CodeerXP祭り2013-LT-Codeer
XP祭り2013-LT-Codeer
 
JavaScript 実践講座 Framework, Tool, Performance
JavaScript 実践講座 Framework, Tool, PerformanceJavaScript 実践講座 Framework, Tool, Performance
JavaScript 実践講座 Framework, Tool, Performance
 

食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・

  • 2. Copyright © Kakaku.com Inc. All Rights Reserved. 今日話すこと フロントエンドの開発体制作りにおける苦労
  • 3. Copyright © Kakaku.com Inc. All Rights Reserved. 今日ほとんど話さないこと 技術的なノウハウ
  • 5. Copyright © Kakaku.com Inc. All Rights Reserved. 自己紹介 金野 淑恵 (かねの よしえ) @empitsu88 Profile Career 食べログシステム本部FEチームリーダー 食べログのフロントエンド領域の設計・開発などを担当 2009~2015年 某印刷会社入社 Flasher/フロントエンジニアとして受託Web制作 2015~2017年 株式会社カカクコム入社 食べログのフロントエンドエンジニア
  • 7. Copyright © Kakaku.com Inc. All Rights Reserved. は お店選びで 失敗したくない人のための グルメサイトです
  • 8. Copyright © Kakaku.com Inc. All Rights Reserved. 食べログってどんなサービス? ネットで飲食店を探すときに起こりがちな 「想像とは違うお店だった」というような失敗をなくすために ユーザーの口コミと共に全国のレストラン情報を掲載
  • 9. Copyright © Kakaku.com Inc. All Rights Reserved. 基本データ 1億450万人 約2,200万件 約86万件 …という大規模なグルメサイト 月間利用者数 口コミ数 掲載店舗 ※2017年12月現在のデータ
  • 10. Copyright © Kakaku.com Inc. All Rights Reserved. カカクコム社のミッション ユーザー本位 サービスの原点は 生活者が感じる不便や社会的課題を解決すること
  • 11. Copyright © Kakaku.com Inc. All Rights Reserved. 派生サイト
  • 12. Copyright © Kakaku.com Inc. All Rights Reserved. Ruby on Rails unicorn MySQL 使用技術 プロジェクト・タスク管理 (REDMINE) ソースコード・バージョン管理 (GitHub)
  • 13. Copyright © Kakaku.com Inc. All Rights Reserved. HTML5 CSS3 jQuery + Backbone.JS ECMAScrip2015 Sass 使用技術 - フロントエンド Gulp + webpack + SMACSS+BEM+FLOCSS compass CSS3
  • 14. Copyright © Kakaku.com Inc. All Rights Reserved. アプリ構成 20以上のRailsアプリが存在 appliA appliB appliC appliD appliE appliF appliG appliH appliI appliJ appliK appliL main_service hoge fuga fega haga base_api faga micro_service
  • 15. Copyright © Kakaku.com Inc. All Rights Reserved. お察しの通り・・・ とにかく規模が大きく ソースコードもカオス
  • 17. Copyright © Kakaku.com Inc. All Rights Reserved. 従来の食べログの開発体制
  • 18. Copyright © Kakaku.com Inc. All Rights Reserved. デザイナー UI設計者&デザイナー&マークアップエンジニア 約20名体制
  • 19. Copyright © Kakaku.com Inc. All Rights Reserved. エンジニア Rubyエンジニア&インフラエンジニア&ネイティブアプリエンジニア 約70名体制
  • 20. Copyright © Kakaku.com Inc. All Rights Reserved. エンジニア デザイナー 業務分担 インフラ JSDB CSSRuby HTML バックエンド (server-side) UI/ VS フロントエンド (client-side)
  • 21. Copyright © Kakaku.com Inc. All Rights Reserved. エンジニア+デザイナーで約100名の開発部隊 HTML/CSS/JS を俯瞰したスキルを持った人が少ない 1週間でデプロイされる Redmine のチケットの数は約80件
  • 22. Copyright © Kakaku.com Inc. All Rights Reserved. 結果・・・ 場当たり的な実装が繰り返され カオス に
  • 23. Copyright © Kakaku.com Inc. All Rights Reserved. そこで・・・ 2016年 フロントエンドエンジニア 爆誕
  • 24. Copyright © Kakaku.com Inc. All Rights Reserved. エンジニア デザイナー 担当領域 Server JSDB CSSRuby HTML バックエンド (server-side) UI/ VS フロントエンド (client-side) フロントエンドエンジニア
  • 25. Copyright © Kakaku.com Inc. All Rights Reserved. フロントエンドエンジニア FEチーム 今は約6名体制
  • 26. Copyright © Kakaku.com Inc. All Rights Reserved. 「フロントエンドはFEが 全部つくれば安心だね!」
  • 27. Copyright © Kakaku.com Inc. All Rights Reserved. 「フロントエンドはFEが 全部つくれば安心だね!」
  • 28. Copyright © Kakaku.com Inc. All Rights Reserved. エンジニア デザイナー 担当領域 Server JSDB CSSRuby HTML バックエンド (server-side) UI/ VS フロントエンド (client-side) フロントエンドエンジニア 開発の主体はエンジニア・デザイナーのまま
  • 29. Copyright © Kakaku.com Inc. All Rights Reserved. あくまで食べログのFEは 監督者・サポーターの立場
  • 30. Copyright © Kakaku.com Inc. All Rights Reserved. なんで?完全分業にしないの? チーム・人員間で意識や目的の共有が難しくなりがち チーム間の利害の対立や局所最適化が発生しやすい 特定のチームしか実装しない・できない状態だと そのチームが詰まったときに案件が進められなくなってしまう 事業会社ではデメリットも多い・・・ 職能別組織の一般的な課題として・・・
  • 31. Copyright © Kakaku.com Inc. All Rights Reserved. あくまで目的は事業の成功 制作者一丸となることが必要 FEの存在意義は 食べログのフロントエンドに秩序をもたらし 正しい方向に導いていくこと
  • 32. Copyright © Kakaku.com Inc. All Rights Reserved. 正直、ただ開発するより めっちゃ大変
  • 34. Copyright © Kakaku.com Inc. All Rights Reserved. やってること 開発案件での方針策定・設計・サポート フロントエンドの環境整備
  • 35. Copyright © Kakaku.com Inc. All Rights Reserved. 1.開発案件での方針策定・設計・サポート
  • 36. Copyright © Kakaku.com Inc. All Rights Reserved. まず「キレイなコード」を考える 「キレイさ」とは PREDICTABLE 予測しやすい MAINTAINABLE 保守しやすい REUSABLE 再利用しやすい SCALABLE 拡張しやすい Googleエンジニア フィリップ・ウォルトン氏のブログより
  • 37. Copyright © Kakaku.com Inc. All Rights Reserved. 具体的に? ready イベントの callback は 1つの Entry point につき1つだけ Module ファイルは Entry point から初期化する
  • 38. Copyright © Kakaku.com Inc. All Rights Reserved. ready イベントの callback は 1entry point につき1つだけ <html> <head> <script src=“smartphone/sidemenu.js”></script> <script src=“smartphone/top_mainvisual.js”></script> • smartphone/top.html • smartphone/sidemenu.js $(function(){ // ハンバーガーメニュークリックで サイドメニューを表示する処理 }); $(function(){ // メインビジュアルをカルーセル化する処理 }); • smartphone/top_mainvisual.js
  • 39. Copyright © Kakaku.com Inc. All Rights Reserved. <html> <head> <script src=“smartphone/sidemenu.js”></script> <script src=“smartphone/top_mainvisual.js”></script> • smartphone/top.html • smartphone/sidemenu.js $(function(){ // ハンバーガーメニュークリックで サイドメニューを表示する処理 }); $(function(){ // メインビジュアルをカルーセル化する処理 }); • smartphone/top_mainvisual.js ready イベントの callback は 1entry point につき1つだけ
  • 40. Copyright © Kakaku.com Inc. All Rights Reserved. <html> <head> <script src=“smartphone/top.js”></script> • smartphone/top.html • smartphone/top.js $(()=>{ // ハンバーガーメニュークリックで サイドメニューを表示する処理 // メインビジュアルをカルーセル化する処理 }); ready イベントの callback は 1entry point につき1つだけ
  • 41. Copyright © Kakaku.com Inc. All Rights Reserved. Moduleファイルは Entry point から初期化する <html> <head> <script src=“smartphone/top.js”></script> • smartphone/top.html • smartphone/top.js import Sidemenu from “modules/smartphone/sidemenu.js”; import TopMainvisual from “modules/smartphone/top-mainvisual.js”; $(()=> { Sidemenu.ready(); TopMainvisual.ready(); });
  • 42. Copyright © Kakaku.com Inc. All Rights Reserved. const Sidemenu = { ready() { // ready 時に必要な処理 } } export default Sidemenu; • modules/smartphone/sidemenu.js moduleファイル側では、呼び出した途端に初期化が始まらないように Moduleファイルは Entry point から初期化する
  • 43. Copyright © Kakaku.com Inc. All Rights Reserved. 設計のときに考えるべきこと 食べログの実態に即しているか 費用対効果は適切か 優先度は適切か = 回せるか = コスト = 納期
  • 44. Copyright © Kakaku.com Inc. All Rights Reserved. 例)見た目に関わる制御はなるべくCSSファイルに $(window).on('scroll', (e) => { if ($(window).scrollTop() >= 500 ){ // js で行うのは is-scroll の付け替えのみ $('.js-header').addClass('is-scroll'); } else { $('.js-header').removeClass('is-scroll'); } }); • JS • CSS .header.is-scroll { position: fixed; top: 0; width: 100%; }
  • 45. Copyright © Kakaku.com Inc. All Rights Reserved. 納期を最優先に考えた上で 「キレイさ」 「回せるか」 「コスト」 のバランスを考えて設計する
  • 46. Copyright © Kakaku.com Inc. All Rights Reserved. 他には・・・ 設計書の粒度に気をつけたり・・・ 「なぜこの方針?」「なぜこうする必要があるの?」を 口頭で説明したり・・・ 依頼する実装者によって説明の仕方を変えたり・・・
  • 47. Copyright © Kakaku.com Inc. All Rights Reserved. 手を動かすのは あくまで他部署のエンジニア 綿密なコミュニケーションと サポートを心がける
  • 48. Copyright © Kakaku.com Inc. All Rights Reserved. 正直、めっちゃめんどうくさい
  • 49. Copyright © Kakaku.com Inc. All Rights Reserved. 悩みは多い・・・ どうしたら他部署であるエンジニア・デザイナーと 密な連携が取れるだろうか? どうしたら気軽にJSやフロントエンドについて 質問しにきてくれるだろうか? エンジニアが片手間で手がけているJSの経験値を 効率よく積んでもらえるには・・・?
  • 50. Copyright © Kakaku.com Inc. All Rights Reserved. エンジニアBチーム エンジニアAチームFEチーム エンジニアCチーム こうした 部署ごとに窓口となるメンバーを決めた エンジニア内にも兼任フロントエンジニアを作った Aチーム担当 Bチーム担当 Cチーム担当 兼任FE 兼任FE 兼任FE
  • 51. Copyright © Kakaku.com Inc. All Rights Reserved. こうなった! 各部署の案件や仕様について誰が一番把握しているか明確に! エンジニア・デザイナーも窓口が明確なら気軽に聞きやすく! リーダーがぜんぶ問い合わせを請け負ってるとボトルネックに なりやすかったがそれも解消!
  • 52. Copyright © Kakaku.com Inc. All Rights Reserved. 2.フロントエンドの環境整備
  • 53. Copyright © Kakaku.com Inc. All Rights Reserved. フロントエンドコーディング規約
  • 54. Copyright © Kakaku.com Inc. All Rights Reserved. 食べログスタイルガイド
  • 55. Copyright © Kakaku.com Inc. All Rights Reserved. コンパイル機構の整備 + Rails 5.1 + Webpacker +
  • 56. Copyright © Kakaku.com Inc. All Rights Reserved. ソースコードのリファクタリング ECMAScript5 → ECMAScript6 化 CSS module の FLOCSS化 Pure module化 – entryPoint から全部呼び出す
  • 57. Copyright © Kakaku.com Inc. All Rights Reserved. 正直、めっちゃ地道
  • 59. Copyright © Kakaku.com Inc. All Rights Reserved. まとめ 食べログのFEは開発というよりサポートに注力しているが めっちゃ大変 「納期」「キレイさ」「回せるか」「コスト」のバランスを 考えて設計するのは めっちゃめんどうくさい リファクタリングとか めっちゃ地道
  • 60. Copyright © Kakaku.com Inc. All Rights Reserved. でも・・・ 地道ながんばりの結果 すこしずつ成果はでてきている
  • 61. Copyright © Kakaku.com Inc. All Rights Reserved. だから・・・ 食べログを盛り上げるために \ がんばる/
  • 62. Copyright © Kakaku.com Inc. All Rights Reserved. 大変なことにも立ち向かえる フロントエンドエンジニア \ 絶賛募集中! /