はてなブックマーク

はじめにFEチームの遠藤です。 先日リリースした食べログノートでは、FEチーム初の試みである monorepo を採用しました。 monorepo とは一つのリポジトリに複数プロジェクトのコードを格納するリポジトリを指します。 しかし、複数プロジェクトのコードが格納されていれば monorepo になるのではありません。コードが意味を持ったまとまりになっていて、それぞれに境界が存在する必要があります。 今回の記事では monorepo を採用してみてどうだったかについて書いていきます。 前提の認識合わせ今回の記事で言及する monorepo のリポジトリに対する概要や開発体制について予め認識を合わせないと記事の内容が伝わりにくいと思いますので、まずは前提の認識合わせを行います。 今回の記事での monorepo とはリポジトリにバックエンドのコードは含まず、フロントエンドのコードのみを含ん

こんにちは、食べログフロントエンドチームの荒川です。 先日リリースした食べログノートというプロジェクトでは、GraphQLを利用しました。（食べログノートの詳細は後日、別の記事でご紹介する予定です） 今回はその中で、エラーをどう設計したかについてご紹介しようと思います。 HTTPレスポンスとGraphQLのエラー応答についてまず、今回のGraphQLのフロントエンド側のクライアントにはApollo Clientを利用しました。 Apollo Clientのドキュメントには We recommend using the included Error Codes or Custom Errors for error consistency rather than directly modifying the HTTP response. Apollo GraphQL Docs - Error

こんにちは。食べログ フロントエンドチームの原田です。 現在担当しているプロジェクトで、React Hook FormとZodを組み合わせて利用する機会があったので、今回はReact Hook Formの基本的な使い方からスキーマバリデーションをZodに任せる方法を紹介をしたいと思います。 React Hook FormとはReact Hook Form は「高性能で柔軟かつ拡張可能な使いやすいフォームバリデーションライブラリ」をテーマに掲げた入力フォームの管理に特化した React 向けのライブラリです。 なぜReact Hook Formを利用したか今回のプロジェクトでは複雑なフォームを組む必要があり、フォームの状態管理を任せられる点や、パフォーマンス面、ドキュメントや検索でヒットする情報の多さからReact Hook Formを利用することを決めました。 基本的な使い方まずはReac

こんにちは。FEチームリーダーの辻です。 食べログには技術情報を発信する社内ブログがあります。エンジニアはもちろん企画やデザイナーなど技術者ではない職種の方とも、食べログを支える技術や今後食べログに取り入れたい技術について共有しています。 この記事はその社内ブログで投稿したものです。 エンジニアでなくても理解しやすいよう、わざと大雑把に説明している部分もありますが、ご容赦いただけると幸いです。 ----------------------- はじめに食べログでは、 モダンフロントエンド（React）へのリプレースプロジェクトが進行中です。 2014年頃以降、React,Angular,Vue.jsなどのフレームワークやライブラリが流行し、いまも続いています。これらフレームワークやライブラリとその周辺技術をモダンフロントエンドと呼んでいます。 この記事では、そもそもモダンフロントエンドとはな

はじめにこの記事は食べログアドベントカレンダー2021の 18 日目の記事です。 食べログ FE チームの @hagevvashi です。 食べログでは 2021年7月から Renovate を運用しています。 Renovate は月に 50 件近い PR を出してきますが、半年近く溜めずに運用を続けられています。 もちろんこの量の PR を一つ一つ動作確認してから手でマージしているわけではありません。自動マージを活用して楽に運用しています。 この記事ではどのように自動マージを設計し、運用しているか紹介します。 自動マージ導入による効果 まずは、Renovate の自動マージを導入することによってどのような効果がもたらされたのか紹介します。 2021/7/21 に導入を開始してから合計 235 件の PR が Renovate によって作られました。 その内 89% を占める 210 件も

この記事は食べログアドベントカレンダー2021の10日目の記事です。 こんにちは。食べログ フロントエンドチームの原田です。 現在食べログでは、jQuery+Railsで実装されているフロントエンドをReact/TypeScriptベースに置き換えるリプレースプロジェクトを進めています。 食べログでは、リプレース戦略としてRails上に部分的にReactを導入する戦略をとっており、 以前の記事で部分導入するにあたってRailsに依存しないコンポーネント結合環境を用意していることを紹介しました。 Railsに依存しないコンポーネント結合環境を構築するにあたって必要となるAPIモックについて、 いままでPrismを利用してきましたが、今期に入ってからMock Service Worker（以後、「MSW」と表記）も利用して開発を行っています。 API定義は以前よりOpenAPI（Swagger

こんにちは。フロントエンドチームの金野と申します。 食べログでは現在、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などでリプレース前後でリソース

この記事は食べログアドベントカレンダー2020の4日目の記事です。 この記事を執筆するのは、食べログでフロントエンドチームに所属する佐伯です。 皆さんマークアップはお好きでしょうか。僕は好きです。 HTML、CSSでWebサイトが作れるのはもちろんのこと、CSSやSVGを駆使すれば、JavaScriptが必要になりそうであろう複雑なUIなども簡潔に作成出来るからです。 JavaScriptはBabelなどのおかげでIE11も比較的対応しやすいですが、マークアップはそうはいきません。Polyfillが対応していないことや、対応していたとしてもReactなどのフレームワークとの共存出来るかなど問題点があるため、IE11に合わせるしかありませんでした。 しかしながら、IE11の情勢も変わってきました。 2020年3月よりIEでYoutubeを閲覧するとアラートが表示されるようになっています。 ま

この記事は食べログアドベントカレンダー2020の2日目の記事です。 こんにちは。食べログFE（フロントエンド）チームの金野です。 以前の記事でもご紹介しました通り、現在食べログは、jQuery+Railsだったフロントエンド環境をReact/TypeScriptに置き換えるリプレースを進めています。 CSSもSassからCSS Modulesを経てstyled-componentsに移行中です。 今回は、「どうしてその技術を選んだか」という技術選定の経緯や、どのような規約で運用しているかをご紹介します！ なぜリプレースを始めたのかまず、CSSの技術選定について触れる前に、リプレースの目的について話さなくてはいけません。 食べログは今年で開設から15年となるサービスです。システムも組織も巨大で、且つ複雑な機能が多くあります。 特にフロントエンドは場当たり的な実装も多く、技術的負債が開発時のボ

この記事は食べログアドベントカレンダー2020の1日目の記事です。 2020年も残り1ヶ月になりました。早いものですね。 この記事を執筆するのは、食べログでフロントエンドチームに所属する@hagevvashiです。 はじめに食べログではRuby on Rails(以下RoR)を用いており、サイトの大部分がRoRによってHTMLのレンダリングまで行われています。JavaScriptでの実装はほとんどがjQueryなどを用いた非宣言的なものとなっています。 歴史あるサービスなので、それなりにコード量が増えかつ複雑になっています。例えば既存のjQueryやBackbone.jsで書かれたソースコードを変更するのに予想外のコストを強いられたりします。 食べログを引き続きユーザにとって価値のあるサービスにするためには、いち早く新しい機能を届ける必要があります。そして、そういった予想外のコストを少しで

お疲れさまです！FE（フロントエンド）チームリーダー 兼 JIRA職人 兼 残業警察の辻です。 チームでjQuery→React/TypeScriptのリプレースプロジェクトを進めています。技術的なチャレンジはもちろん、大規模かつ長期プロジェクトゆえの不安と日々戦っています。 ・このプロジェクトはちゃんと進んでるの？このまま進めていいの？ ・成果が出るまでに時間がかかり、チーム外からは何もやってないように見えてない？ ・残業すれば初期計画スケジュールに間に合うけど、どれくらい頑張ったらいいの？ ・初めてのパターンだけど書き方これであってる？今後もこれに合わせる？ ・リプレース中にもどんどん技術が変わっていってキャッチアップが大変 ・チーム外から突然の依頼があったけど、優先度どうしよう...これらの不安と戦うため、いつでもプロジェクトの状態がわかる状態、いつでもチームに相談できる状態、個人依

食べログエンジニアの荒川です。 今回は食べログのリプレース（React化）で取り組んでいるWebアクセシビリティ対応の支援ツールについてご紹介します。 そもそもWebアクセシビリティとは？全ての人にアクセス可能な、ユーザー体験を提供することです。 具体的には ・Webサイトを容易に解釈できるようにセマンティックなHTML構造にする ・読み上げ可能な補助テキストを付与する（WAI-ARIA属性） ・マウス操作専用のUIは避け、キーボード操作も可能にする などが挙げられます。 食べログで使用しているOSSツールフロントエンドのリプレースに伴って、アクセシビリティの実装を補助するツールを導入しました。以降では、実際に利用しているツールについてご紹介します。 eslint-plugin-jsx-a11y ・GitHub はじめに述べたWAI-ARIA属性の適切な設定、コンテンツ中の見出し（h1、h

はじめまして。食べログFE（フロントエンド）チームの佐伯と申します。 このタイトルを書いてみて、数字の大きさに驚きを隠せません。 通常形態のフリーザ様（53万）何人分でしょうか。 2019年9月より食べログではフロントエンドのエラートラッキングにSentryを使用しており、今回は実際に運用して見えてきた課題などをご紹介させていただきたと思います。 ※PV数は2020年6月時点のものを参考にしております https://corporate.kakaku.com/press/mission 概要 ・トラッキングツールの選定理由 ・Sentry導入だけでは全て解決されません ・費用に対しての成果はものすごくあります 『Sentry、 キミに決めた！』　わけ。具体的な話に入って行く前にSentryの紹介をいたします。 https://sentry.io/welcome/ Sentryとは複数の言語

食べログ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などで構成され