Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

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

2017/11/30「【エンジニア交流会】食 Tech 〜 食系サービスにおけるテクノロジーの裏側 〜」での発表資料

  • Sé el primero en comentar

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

  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. ソースコードのリファクタリング ECMAScript5 → 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. ご清聴ありがとうございました

×