Atomic Designをやめてディレクトリ構造を見直した話｜食べログ フロントエンドエンジニアブログ
こんにちは。フロントエンドチームの金野と申します。 食べログでは現在、React+TypeScriptでフロントエンドのリプレースを進めています。 以前の記事で、食べログではAtomic Designをどのように取り入れているかの紹介をしました。 しかし、最近のリプレース作業では、Atomic Designとは異なるディレクトリ構造を採用しています。 今回の記事では、「なぜAtomic Designをやめたのか」という理由と、「どのようなディレクトリ構造にしたのか」を紹介します。 Atomic Designを導入したねらいと導入した結果 上記の記事で言及した通り、当初Atomic Designを導入したねらいは以下になります。 1. コンポーネントの責務がより明確になる 2. 見た目の粒度だけでなく、ロジックの責務も明確にできる 3. 「ドメインが入るか／入らないか」。「抽象的か／そうでな
リモート環境下で行った食べログ フロントエンドチームのオンボーディングについて｜食べログ フロントエンドエンジニアブログ
こんにちは。食べログFE（フロントエンド）チームの原田です。 去年の12月中旬にFEチームにjoinしてから丸2ヶ月が経ちました。 今回はFEチームのオンボーディングの様子やチーム内の文化について書いてみたいと思います。 ちなみにオンボーディングは人事で実施される全社的なものと、 配属チームで具体的な業務に当たるためのものの2つに分かれますが、今回は後者をメインにお話ししていきます。 FEチームのオンボーディング体制 FEチームでは新人1名に対してコーチとメンターを各1名ずつアサインしてオンボーディングを行います。 コーチとメンターの役割はそれぞれ以下です。 コーチ：新人のOJTをメインで推進する。具体的なスキルアップスケジュールを立てて、進捗を見守る。 メンター：週一の1on1を開催し、新人の相談役となる。 以降の説明で出てくるコーチ、メンターという言葉は、上記の役割を担当するメンバーを
食べログフロントエンドのリプレース戦略｜食べログ フロントエンドエンジニアブログ
この記事は食べログ Advent Calendar 2020の10日目の記事です。 お久しぶりです。食べログフロントエンドチームの辻です。 このブログでも頻繁に紹介しておりますが、食べログフロントエンドはjQueryベースからReact/TypeScriptへのリプレースを進めています。 ページごとではなく、コンポーネントごとにリプレースを進めていきます。 店舗画面の右下に出ている「○人が見ています！」というバナーはリプレース済みですが、この赤枠の中のみ、Reactです。 店舗ページ自体はSPAではありませんし、他のコンポーネントはjQueryで動いています。 この記事では、コンポーネントごと、つまり部分導入という判断に至った経緯と、どのような方法で部分導入を実現しているのかを紹介します。 ページごと VS コンポーネントごとページごとにリリースし、nginxなどでリプレース前後でリソース
React部分導入時の開発・検証環境紹介｜食べログ フロントエンドエンジニアブログ
この記事は食べログアドベントカレンダー2020の1日目の記事です。 2020年も残り1ヶ月になりました。早いものですね。 この記事を執筆するのは、食べログでフロントエンドチームに所属する@hagevvashiです。 はじめに食べログではRuby on Rails(以下RoR)を用いており、サイトの大部分がRoRによってHTMLのレンダリングまで行われています。JavaScriptでの実装はほとんどがjQueryなどを用いた非宣言的なものとなっています。 歴史あるサービスなので、それなりにコード量が増えかつ複雑になっています。例えば既存のjQueryやBackbone.jsで書かれたソースコードを変更するのに予想外のコストを強いられたりします。 食べログを引き続きユーザにとって価値のあるサービスにするためには、いち早く新しい機能を届ける必要があります。そして、そういった予想外のコストを少しで
SassからCSS Modules、そしてstyled-componentsに乗り換えた話｜食べログ フロントエンドエンジニアブログ
この記事は食べログアドベントカレンダー2020の2日目の記事です。 こんにちは。食べログFE（フロントエンド）チームの金野です。 以前の記事でもご紹介しました通り、現在食べログは、jQuery+Railsだったフロントエンド環境をReact/TypeScriptに置き換えるリプレースを進めています。 CSSもSassからCSS Modulesを経てstyled-componentsに移行中です。 今回は、「どうしてその技術を選んだか」という技術選定の経緯や、どのような規約で運用しているかをご紹介します！ なぜリプレースを始めたのかまず、CSSの技術選定について触れる前に、リプレースの目的について話さなくてはいけません。 食べログは今年で開設から15年となるサービスです。システムも組織も巨大で、且つ複雑な機能が多くあります。 特にフロントエンドは場当たり的な実装も多く、技術的負債が開発時のボ
不安に強い食べログFEチームの働き方｜食べログ フロントエンドエンジニアブログ
お疲れさまです！FE（フロントエンド）チームリーダー 兼 JIRA職人 兼 残業警察の辻です。 チームでjQuery→React/TypeScriptのリプレースプロジェクトを進めています。技術的なチャレンジはもちろん、大規模かつ長期プロジェクトゆえの不安と日々戦っています。 ・このプロジェクトはちゃんと進んでるの？このまま進めていいの？ ・成果が出るまでに時間がかかり、チーム外からは何もやってないように見えてない？ ・残業すれば初期計画スケジュールに間に合うけど、どれくらい頑張ったらいいの？ ・初めてのパターンだけど書き方これであってる？今後もこれに合わせる？ ・リプレース中にもどんどん技術が変わっていってキャッチアップが大変 ・チーム外から突然の依頼があったけど、優先度どうしよう...これらの不安と戦うため、いつでもプロジェクトの状態がわかる状態、いつでもチームに相談できる状態、個人依
食べログでのAtomic Design 〜どう分類しているか編〜｜食べログ フロントエンドエンジニアブログ
食べログFE（フロントエンド）チームの金野と申します。 以前の記事で、jQuery+Backbone.jsからReact/TypeScriptへのリプレースを進めていることをご紹介しました。 リプレースした部分では、Atomic Designを採用しています。 今回の記事では、採用した理由や食べログでの分類方針についてご紹介します。 Atomic Designを導入した目的Atomic Designを導入したねらいは以下になります。 ・コンポーネントの責務がより明確になる ・見た目の粒度だけでなく、ロジックの責務も明確にできる ・「ドメインが入るか／入らないか」。「抽象的か／そうでないか」の区別が明確になる ・世間的にも浸透している概念のため、デザイナー・エンジニア間の共通言語を作れる 食べログではもともとUIコンポーネントをFLOCSSの考え方に従ってレイヤー分けしていましたが、以下の課
子育て中の社員からみた食べログフロントエンドチームの働く環境｜食べログ フロントエンドエンジニアブログ
食べログFE（フロントエンド）チームの金野と申します。 前回は、新しいシステムの技術スタックや、どのようなプロセスで開発しているかを紹介しました。 今回は働く環境についてです。 子育て中の社員にとって結構働きやすい環境なのでは？もっとアピールしたほうがいいのでは？と思い記事を書いた次第です。 自己紹介まずは簡単に自己紹介をさせてください。 2018年から出産のため1年ほど産前産後育児休業を取得し、2019年にフルタイムで職場復帰しました。2歳になった娘の育児に日々奮闘しています。 新型コロナウイルス流行により3月31日からフルリモートで働いています。 この記事では、カカクコムの福利厚生の中で私自身が「これは嬉しい！」と思うポイントや、働きやすい風土について紹介していきます！ 育児休業は最大で子供が3歳になる年の年度末まで取得可能 国の規定では育休は最大2歳まで取れることになっていますが、カ
レガシーなフロントエンド環境をリプレースするためにチームでやっていること｜食べログ フロントエンドエンジニアブログ
はじめに はじめまして！食べログFE（フロントエンド）チームの金野と申します。 普段は、食べログフロントエンドの設計・開発や、新規事業・食べログテイクアウトの技術サポートなどを行っています。 食べログテイクアウトについては、Nuxt.js + TypeScriptの開発について記事を書いているので、興味がある方はぜひ御覧ください。 さて、以前の記事でご紹介したように、食べログFEチームではレガシーシステムのリプレースをReact/TypeScriptで行っています。 今回は、新しいシステムについてもう少し詳しい技術スタックや、どのようなプロセスで開発しているのかを紹介します。 開発効率化のための取り組みリプレースのお仕事はただひたすら実装するだけではありません。 「壊れにくいアプリケーション」「メンテナビリティが高いアプリケーション」にするために、アーキテクチャや採用する周辺技術について、
フロントエンドエンジニアブログ を始めます！｜食べログ フロントエンドエンジニアブログ
ご挨拶はじめまして！ 食べログのFE（フロントエンジニア）チーム リーダーをやっております、 辻です。 食べログのフロントエンドってどんな印象でしょうか？ 「めっちゃ大変そう」でしょうか？ 出典：https://www.slideshare.net/YoshieYamamoto/ss-83840311 「食べログ フロントエンド」でググるとこの記事が上位に表示されますので、この印象がある方もいるかと思います。 こちらのスライド「食べログのフロントエンドエンジニアってめっちゃ大変やねん･･･」では、 場当たり的な実装を繰り返さないために生まれたFEチームについて、 他チームのエンジニア・デザイナーをサポートする苦労、 分業体制の食べログで納期とメンテンス性のバランスをとる難しさ、 jQuery+Backbone.JS、Gulp+webpack、SMACSS+BEM+FLOCSSなどで構成され
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
