More Related Content
Similar to 食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・ (20)
食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・
- 5. Copyright © Kakaku.com Inc. All Rights Reserved.
自己紹介
金野 淑恵
(かねの よしえ)
@empitsu88
Profile
Career
食べログシステム本部FEチームリーダー
食べログのフロントエンド領域の設計・開発などを担当
2009~2015年 某印刷会社入社
Flasher/フロントエンジニアとして受託Web制作
2015~2017年 株式会社カカクコム入社
食べログのフロントエンドエンジニア
- 8. Copyright © Kakaku.com Inc. All Rights Reserved.
食べログってどんなサービス?
ネットで飲食店を探すときに起こりがちな
「想像とは違うお店だった」というような失敗をなくすために
ユーザーの口コミと共に全国のレストラン情報を掲載
- 9. Copyright © Kakaku.com Inc. All Rights Reserved.
基本データ
1億450万人 約2,200万件 約86万件
…という大規模なグルメサイト
月間利用者数 口コミ数 掲載店舗
※2017年12月現在のデータ
- 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
- 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件
- 24. Copyright © Kakaku.com Inc. All Rights Reserved.
エンジニア デザイナー
担当領域
Server JSDB CSSRuby HTML
バックエンド (server-side)
UI/
VS
フロントエンド (client-side)
フロントエンドエンジニア
- 28. Copyright © Kakaku.com Inc. All Rights Reserved.
エンジニア デザイナー
担当領域
Server JSDB CSSRuby HTML
バックエンド (server-side)
UI/
VS
フロントエンド (client-side)
フロントエンドエンジニア
開発の主体はエンジニア・デザイナーのまま
- 30. Copyright © Kakaku.com Inc. All Rights Reserved.
なんで?完全分業にしないの?
チーム・人員間で意識や目的の共有が難しくなりがち
チーム間の利害の対立や局所最適化が発生しやすい
特定のチームしか実装しない・できない状態だと
そのチームが詰まったときに案件が進められなくなってしまう
事業会社ではデメリットも多い・・・
職能別組織の一般的な課題として・・・
- 31. Copyright © Kakaku.com Inc. All Rights Reserved.
あくまで目的は事業の成功
制作者一丸となることが必要
FEの存在意義は
食べログのフロントエンドに秩序をもたらし
正しい方向に導いていくこと
- 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%;
}
- 46. 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.
こうなった!
各部署の案件や仕様について誰が一番把握しているか明確に!
エンジニア・デザイナーも窓口が明確なら気軽に聞きやすく!
リーダーがぜんぶ問い合わせを請け負ってるとボトルネックに
なりやすかったがそれも解消!
- 56. Copyright © Kakaku.com Inc. All Rights Reserved.
ソースコードのリファクタリング
ECMAScript5 → ECMAScript6 化
CSS module の FLOCSS化
Pure module化 – entryPoint から全部呼び出す
- 59. Copyright © Kakaku.com Inc. All Rights Reserved.
まとめ
食べログのFEは開発というよりサポートに注力しているが
めっちゃ大変
「納期」「キレイさ」「回せるか」「コスト」のバランスを
考えて設計するのは めっちゃめんどうくさい
リファクタリングとか めっちゃ地道