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

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

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