フロントエンドエンジニアブログ を始めます!
見出し画像

フロントエンドエンジニアブログ を始めます!

食べログ フロントエンドエンジニアブログ

ご挨拶

はじめまして!
食べログのFE(フロントエンジニア)チーム リーダーをやっております、
辻です。

食べログのフロントエンドってどんな印象でしょうか?
「めっちゃ大変そう」でしょうか?
出典:https://www.slideshare.net/YoshieYamamoto/ss-83840311
「食べログ フロントエンド」でググるとこの記事が上位に表示されますので、この印象がある方もいるかと思います。

こちらのスライド「食べログのフロントエンドエンジニアってめっちゃ大変やねん・・・」では、
場当たり的な実装を繰り返さないために生まれたFEチームについて、
他チームのエンジニア・デザイナーをサポートする苦労、
分業体制の食べログで納期とメンテンス性のバランスをとる難しさ、
jQuery+Backbone.JS、Gulp+webpack、SMACSS+BEM+FLOCSSなどで構成されたフロントエンドの地道なリファクタリング、
等について紹介されています。

ここから約3年、状況が大きく変わっています。

現在FEチームでは、jQuery+Backbone.JSからReact/TypeScriptへのリプレースを進めています。
Reactで、TypeScriptで、styled-componentsで、Atomic Designです!

スライドで紹介している苦労は消えたわけではありません。
場当たり的な実装はまだまだたくさん残っていて、
他チームのエンジニア・デザイナーをサポートしてサービス開発を続けながらの、
jQuery+Backbone.JS、Gulp+webpack、SMACSS+BEM+FLOCSSなどで構成されているものを、
リプレースです!

つまり、めっちゃめちゃ大変です!!!
でもとっても楽しく取り組めてます☺

このブログでは、技術的な取り組みはもちろん、
楽しく取り組むためのチームビルディングや、マネジメント等についても紹介していけたらなと思っています。
「めっちゃ大変だけど、とっても楽しい食べログフロントエンド」を発信していきます。

FEチームの業務内容

前置きが長くなりましたが、初回記事ということでFEチームの業務内容を紹介します。
フロントエンドエンジニアってどこからどこまでが責任範囲なのか会社によって様々ですよね。
食べログではこんな感じです。

UI設計(デザイナー)
HTMLマークアップ(デザイナー、サーバーサイドエンジニア、FE)
CSSスタイル調整(デザイナー、FE)
JS実装(サーバーサイドエンジニア、FE)
API設計(サーバーサイドエンジニア、FE)
API実装(サーバーサイドエンジニア)

食べログにおいてFEチームは後発で、FEしか触らない部分はかなり少ないです。(経緯は前述のスライドをご参照ください)
現在もサーバーサイドエンジニアがJS実装をすることも多いですし、HTMLマークアップはデザイナーが担当しています。
FEチームは、HTML/CSS/JSのフロントエンド全体の統括、秩序をもたらすことが主な役割です。
具体的には以下の業務を行っています。

・サービス開発のJS実装サポート、レビュー
・CSSの規約、モジュールの管理
・JSの規約、モジュールの管理
・サーバーサイドエンジニアのフロントスキルアップ
・フロント周りのライブラリバージョンアップ

これに加えて、リプレースに伴い以下の業務も行っています。

・React/TypeScriptへのリプレース設計・実装
・リプレースにともなうAPI設計
・React/TypeScriptにおける規約策定
・styled-componentsにおける規約策定
・デザイナーへReact/TypeScript/styled-componentsの技術共有・教育

やることめっちゃ多い😂
でもやればやるほど食べログのフロントエンドがキレイになることが実感できるお仕事です。
あとブログのネタもたくさん生まれているはず...!今後にご期待ください!

食べログFEチームでは、これらに一緒に取り組む仲間を募集しています!
大変だけど楽しいチームですので、ぜひご検討ください😃
くわしくはこちら: https://www.wantedly.com/projects/254221


この記事が参加している募集

自己紹介

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
食べログ フロントエンドエンジニアブログ
株式会社カカクコムが運営する食べログのフロントエンドチームブログです。普段の開発業務内容、チーム運用、働き方について発信します。コメントへの個別の返信は致しません。食べログに関するお問い合わせはこちら:https://tabelog.com/support/inquiry