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

ご挨拶

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

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

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

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

現在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