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

株式会社カカクコムが運営する食べログのフロントエンドチームブログです。エンジニア全体の…

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

株式会社カカクコムが運営する食べログのフロントエンドチームブログです。エンジニア全体のブログに統合しました https://tech-blog.tabelog.com/ 食べログに関するお問い合わせはこちら:https://tabelog.com/support/inquiry

マガジン

記事一覧

Tabelog Tech Blog オープン!!

こんにちは!FEチームリーダーの辻です。 この度、「Tabelog Tech Blog」がオープンしました! タイトルからもわかる通り、フロントエンドチームだけではなく、食べログ…

フロントエンドでmonorepoを採用してみた振り返り

はじめにFEチームの遠藤です。 先日リリースした食べログノートでは、FEチーム初の試みである monorepo を採用しました。 monorepo とは一つのリポジトリに複数プロジェク…

React DnDの基本的な使い方紹介

こんにちは、食べログフロントエンドチームの佐々木です。 5月初頭にリリースした食べログノートでは、D&Dの実装にReact DnDというライブラリを採用したので今回紹介しよう…

エンジニア1年目でApolloを使って良かったこと

こんにちは、元FEチームの城戸です。(現在は他チームに所属していますが、去年新卒入社して8月から今年の4月までFEチームとして活動してました!) 5月頭に食べログの飲…

食べログノートをリリースしました!

こんにちは!FEチームリーダーの辻です。 先月、FEチームが参加したプロダクト「食べログノート」がリリースされました 🎉🎉🎉 レストラン向けの機能で、ネット予約、電話…

GraphQLのエラー設計について

こんにちは、食べログフロントエンドチームの荒川です。 先日リリースした食べログノートというプロジェクトでは、GraphQLを利用しました。(食べログノートの詳細は後日…

React Hook FormとZodを組み合わせて利用する

こんにちは。食べログ フロントエンドチームの原田です。 現在担当しているプロジェクトで、React Hook FormとZodを組み合わせて利用する機会があったので、今回はReact H…

Next.jsにSentryを導入した際の課題と解決策について

はじめまして、2021年11月に食べログFE(フロントエンド)チームにジョインした遠藤です。 Next.jsを採用した新規プロジェクトに参画し、Sentryの導入を行いました。本記事…

なぜモダンフロントエンドを使いたいのか 宣言的な制御編

こんにちは。FEチームリーダーの辻です。 食べログには技術情報を発信する社内ブログがあります。エンジニアはもちろん企画やデザイナーなど技術者ではない職種の方とも、…

Renovate の PR を 89% 自動マージして楽している話

はじめにこの記事は食べログアドベントカレンダー2021の 18 日目の記事です。 食べログ FE チームの @hagevvashi です。 食べログでは 2021年7月から Renovate を運用し…

食べログFEチームに新卒エンジニアが飛び込んでみた学び

この記事は食べログ Advent Calendar 2021の15日目の記事です。 はじめまして、新卒1年目エンジニアの城戸です。 8月から食べログFEチームにjoinしての学びを共有できれば…

OpenAPIとMSWを組み合わせてAPIモックしている話

この記事は食べログアドベントカレンダー2021の10日目の記事です。 こんにちは。食べログ フロントエンドチームの原田です。 現在食べログでは、jQuery+Railsで実装されて…

食べログでFEチームブログを始めたら

この記事は食べログ Advent Calendar 2021の6日目の記事です。 フロントエンドチームリーダーの辻です。 突然ですが、今日でブログ開設後516日目です! 500日超えてた〜!…

開発にペアプロを導入した話

こんにちは。食べログFE(フロントエンド)チーム の佐々木です。 FEチームでは今後の開発を基本的にペアプロで行っていくことにしました。 今回の記事では、ペアプロ導入に…

Qiita Engineer Summit 2021 に登壇しました!

こんにちは。FEチームリーダーの辻です。 2021年7月21日に開催された「Qiita Engineer Summit 2021」に、LT枠で登壇しました。 発表内容「食べログでフロントエンドのリプ…

輪読会でOSSコントリビューターになれたよ

久しぶりに投稿します、食べログFEチームリーダーの辻です。 チームで開催している輪読会での取り組みについて紹介します。 忙しい人向けに3行でFEチームの輪読会でJestの…

Tabelog Tech Blog オープン!!

Tabelog Tech Blog オープン!!

こんにちは!FEチームリーダーの辻です。

この度、「Tabelog Tech Blog」がオープンしました!

タイトルからもわかる通り、フロントエンドチームだけではなく、食べログの開発者全員のブログに進化しました!✌(՞ਊ՞✌三✌՞ਊ՞)✌
FEチームも「Tabelog Tech Blog」で発信していきます!

今後はFEチームに加えて、サービス開発エンジニア、アプリエンジニア、SREなどな

もっとみる
フロントエンドでmonorepoを採用してみた振り返り

フロントエンドでmonorepoを採用してみた振り返り

はじめにFEチームの遠藤です。
先日リリースした食べログノートでは、FEチーム初の試みである monorepo を採用しました。

monorepo とは一つのリポジトリに複数プロジェクトのコードを格納するリポジトリを指します。
しかし、複数プロジェクトのコードが格納されていれば monorepo になるのではありません。コードが意味を持ったまとまりになっていて、それぞれに境界が存在する必要があり

もっとみる
React DnDの基本的な使い方紹介

React DnDの基本的な使い方紹介

こんにちは、食べログフロントエンドチームの佐々木です。
5月初頭にリリースした食べログノートでは、D&Dの実装にReact DnDというライブラリを採用したので今回紹介しようと思います。
食べログノートについては以下記事を御覧ください。

React DnDとはReact向けのD&D用ライブラリです。
UIコンポーネントは含まれておらず、既存のコンポーネントをラップして利用します。
Touchバッ

もっとみる
エンジニア1年目でApolloを使って良かったこと

エンジニア1年目でApolloを使って良かったこと

こんにちは、元FEチームの城戸です。(現在は他チームに所属していますが、去年新卒入社して8月から今年の4月までFEチームとして活動してました!)

5月頭に食べログの飲食店向け管理画面に食べログノートという新しい予約管理機能がリリースされました🎉🎉🎉

食べログノートではUIが複雑な一部の画面をReactとNext.jsで実装してます。
詳細な技術スタックや食べログノートの概要に関しては上記

もっとみる
食べログノートをリリースしました!

食べログノートをリリースしました!

こんにちは!FEチームリーダーの辻です。

先月、FEチームが参加したプロダクト「食べログノート」がリリースされました 🎉🎉🎉
レストラン向けの機能で、ネット予約、電話予約、ウォークインなどの管理、顧客管理、席管理などができるクラウド台帳です。

メイン機能であるタイムスケジュールでは、登録された席と予約時間に応じてチャートを表示し、ドラッグアンドドロップで卓/時間の変更が可能です。

チャ

もっとみる
GraphQLのエラー設計について

GraphQLのエラー設計について

こんにちは、食べログフロントエンドチームの荒川です。

先日リリースした食べログノートというプロジェクトでは、GraphQLを利用しました。(食べログノートの詳細は後日、別の記事でご紹介する予定です)
今回はその中で、エラーをどう設計したかについてご紹介しようと思います。

HTTPレスポンスとGraphQLのエラー応答について

まず、今回のGraphQLのフロントエンド側のクライアントにはAp

もっとみる
React Hook FormとZodを組み合わせて利用する

React Hook FormとZodを組み合わせて利用する

こんにちは。食べログ フロントエンドチームの原田です。

現在担当しているプロジェクトで、React Hook FormとZodを組み合わせて利用する機会があったので、今回はReact Hook Formの基本的な使い方からスキーマバリデーションをZodに任せる方法を紹介をしたいと思います。

React Hook FormとはReact Hook Form は「高性能で柔軟かつ拡張可能な使いやす

もっとみる
Next.jsにSentryを導入した際の課題と解決策について

Next.jsにSentryを導入した際の課題と解決策について

はじめまして、2021年11月に食べログFE(フロントエンド)チームにジョインした遠藤です。

Next.jsを採用した新規プロジェクトに参画し、Sentryの導入を行いました。本記事ではSentryを導入した際の課題と解決策について記載していきます。

1. はじめに「Sentryとは何か?」、「食べログでSentryを選定した理由」などにご興味がある方はまず下記の記事を読んでみてください。

もっとみる
なぜモダンフロントエンドを使いたいのか
宣言的な制御編

なぜモダンフロントエンドを使いたいのか 宣言的な制御編

こんにちは。FEチームリーダーの辻です。

食べログには技術情報を発信する社内ブログがあります。エンジニアはもちろん企画やデザイナーなど技術者ではない職種の方とも、食べログを支える技術や今後食べログに取り入れたい技術について共有しています。

この記事はその社内ブログで投稿したものです。
エンジニアでなくても理解しやすいよう、わざと大雑把に説明している部分もありますが、ご容赦いただけると幸いです。

もっとみる
Renovate の PR を 89% 自動マージして楽している話

Renovate の PR を 89% 自動マージして楽している話

はじめにこの記事は食べログアドベントカレンダー2021の 18 日目の記事です。

食べログ FE チームの @hagevvashi です。

食べログでは 2021年7月から Renovate を運用しています。
Renovate は月に 50 件近い PR を出してきますが、半年近く溜めずに運用を続けられています。

もちろんこの量の PR を一つ一つ動作確認してから手でマージしているわけでは

もっとみる
食べログFEチームに新卒エンジニアが飛び込んでみた学び

食べログFEチームに新卒エンジニアが飛び込んでみた学び

この記事は食べログ Advent Calendar 2021の15日目の記事です。

はじめまして、新卒1年目エンジニアの城戸です。
8月から食べログFEチームにjoinしての学びを共有できればと思います。
よろしくお願いします!


はじめにFEチームに来た経緯
まず、私の本来の所属はFEチームではなく、バックエンドの実装がメインのチームなので、なぜFEチームにいるのかを説明します。

FEチー

もっとみる
OpenAPIとMSWを組み合わせてAPIモックしている話

OpenAPIとMSWを組み合わせてAPIモックしている話

この記事は食べログアドベントカレンダー2021の10日目の記事です。

こんにちは。食べログ フロントエンドチームの原田です。
現在食べログでは、jQuery+Railsで実装されているフロントエンドをReact/TypeScriptベースに置き換えるリプレースプロジェクトを進めています。

食べログでは、リプレース戦略としてRails上に部分的にReactを導入する戦略をとっており、
以前の記事

もっとみる
食べログでFEチームブログを始めたら

食べログでFEチームブログを始めたら

この記事は食べログ Advent Calendar 2021の6日目の記事です。
フロントエンドチームリーダーの辻です。
突然ですが、今日でブログ開設後516日目です!
500日超えてた〜!1年半ほど経過しました!

この記事では、このブログを開設した目的、ブログを公開してみて起こった変化について紹介します。
企業ブログ/技術ブログ開設を検討中の方の参考になれば幸いです。

ブログ開設の目的「フロ

もっとみる
開発にペアプロを導入した話

開発にペアプロを導入した話

こんにちは。食べログFE(フロントエンド)チーム の佐々木です。
FEチームでは今後の開発を基本的にペアプロで行っていくことにしました。
今回の記事では、ペアプロ導入に至った経緯と導入してみたメリット等を紹介します。

新規開発をモブプロでしてみた
FEチームではこれまでPC版の食べログのReactへのリプレースを進めて来ましたが、新たにSP版のリプレースに取り掛かるにあたり、以下のような狙いでモ

もっとみる
Qiita Engineer Summit 2021 に登壇しました!

Qiita Engineer Summit 2021 に登壇しました!

こんにちは。FEチームリーダーの辻です。
2021年7月21日に開催された「Qiita Engineer Summit 2021」に、LT枠で登壇しました。

発表内容「食べログでフロントエンドのリプレースやっていってます!」というタイトルで、食べログでリプレースプロジェクトに取り組むと、規模が大きいがゆえの迷いや課題も多く出てくるけど、それぞれ対策を考えながら楽しくやってます!という内容で発表し

もっとみる
輪読会でOSSコントリビューターになれたよ

輪読会でOSSコントリビューターになれたよ

久しぶりに投稿します、食べログFEチームリーダーの辻です。
チームで開催している輪読会での取り組みについて紹介します。

忙しい人向けに3行でFEチームの輪読会でJestの公式ドキュメントを読んでる。
日本語版が一部まだ英語だったので、日本語訳を投稿したら採用されたよ。
これで私もOSS contributorだ!

詳しくFEチームで輪読会やってます📚
毎週、全員参加の輪読会を開催しています。

もっとみる