食べログ フロントエンドエンジニアブログ
こんにちは！FEチームリーダーの辻です。 この度、「Tabelog Tech Blog」がオープンしました！ タイトルからもわかる通り、フロントエンドチームだけではなく、食べログの開発者全員のブログに進化しました！✌(՞ਊ՞✌三✌՞ਊ՞)✌ FEチームも「Tabelog Tech Blog」で発信していきます！ 今後はFEチームに加えて、サービス開発エンジニア、アプリエンジニア、SREなどなど食べログの各領域のエンジニアはもちろん、デザイナーやプロダクトマネージャなど、
はじめにFEチームの遠藤です。 先日リリースした食べログノートでは、FEチーム初の試みである monorepo を採用しました。 monorepo とは一つのリポジトリに複数プロジェクトのコードを格納するリポジトリを指します。 しかし、複数プロジェクトのコードが格納されていれば monorepo になるのではありません。コードが意味を持ったまとまりになっていて、それぞれに境界が存在する必要があります。 今回の記事では monorepo を採用してみてどうだったかについて書
こんにちは、食べログフロントエンドチームの佐々木です。 5月初頭にリリースした食べログノートでは、D&Dの実装にReact DnDというライブラリを採用したので今回紹介しようと思います。 食べログノートについては以下記事を御覧ください。 React DnDとはReact向けのD&D用ライブラリです。 UIコンポーネントは含まれておらず、既存のコンポーネントをラップして利用します。 Touchバックエンドを利用することで、タッチ操作でのD&Dも実装可能です。 詳しくは以下の公
こんにちは、元FEチームの城戸です。（現在は他チームに所属していますが、去年新卒入社して8月から今年の4月までFEチームとして活動してました！） 5月頭に食べログの飲食店向け管理画面に食べログノートという新しい予約管理機能がリリースされました🎉🎉🎉 食べログノートではUIが複雑な一部の画面をReactとNext.jsで実装してます。 詳細な技術スタックや食べログノートの概要に関しては上記の記事に書いているので、興味がある方はぜひ！ この記事ではApollo Client
こんにちは！FEチームリーダーの辻です。 先月、FEチームが参加したプロダクト「食べログノート」がリリースされました 🎉🎉🎉 レストラン向けの機能で、ネット予約、電話予約、ウォークインなどの管理、顧客管理、席管理などができるクラウド台帳です。 メイン機能であるタイムスケジュールでは、登録された席と予約時間に応じてチャートを表示し、ドラッグアンドドロップで卓/時間の変更が可能です。 チャート上の予約をクリックすると、詳細情報がドロワーで表示されます。こちらも画面遷移なしで
こんにちは、食べログフロントエンドチームの荒川です。 先日リリースした食べログノートというプロジェクトでは、GraphQLを利用しました。（食べログノートの詳細は後日、別の記事でご紹介する予定です） 今回はその中で、エラーをどう設計したかについてご紹介しようと思います。 HTTPレスポンスとGraphQLのエラー応答について まず、今回のGraphQLのフロントエンド側のクライアントにはApollo Clientを利用しました。 Apollo Clientのドキュメント
こんにちは。食べログ フロントエンドチームの原田です。 現在担当しているプロジェクトで、React Hook FormとZodを組み合わせて利用する機会があったので、今回はReact Hook Formの基本的な使い方からスキーマバリデーションをZodに任せる方法を紹介をしたいと思います。 React Hook FormとはReact Hook Form は「高性能で柔軟かつ拡張可能な使いやすいフォームバリデーションライブラリ」をテーマに掲げた入力フォームの管理に特化した
はじめまして、2021年11月に食べログFE(フロントエンド)チームにジョインした遠藤です。 Next.jsを採用した新規プロジェクトに参画し、Sentryの導入を行いました。本記事ではSentryを導入した際の課題と解決策について記載していきます。 1. はじめに「Sentryとは何か？」、「食べログでSentryを選定した理由」などにご興味がある方はまず下記の記事を読んでみてください。 Sentryは便利ですが以前はアプリケーションに導入するにはいくつかのファイルを
こんにちは。FEチームリーダーの辻です。 食べログには技術情報を発信する社内ブログがあります。エンジニアはもちろん企画やデザイナーなど技術者ではない職種の方とも、食べログを支える技術や今後食べログに取り入れたい技術について共有しています。 この記事はその社内ブログで投稿したものです。 エンジニアでなくても理解しやすいよう、わざと大雑把に説明している部分もありますが、ご容赦いただけると幸いです。 ----------------------- はじめに食べログでは、 モ
はじめにこの記事は食べログアドベントカレンダー2021の 18 日目の記事です。 食べログ FE チームの @hagevvashi です。 食べログでは 2021年7月から Renovate を運用しています。 Renovate は月に 50 件近い PR を出してきますが、半年近く溜めずに運用を続けられています。 もちろんこの量の PR を一つ一つ動作確認してから手でマージしているわけではありません。自動マージを活用して楽に運用しています。 この記事ではどのように自
この記事は食べログ Advent Calendar 2021の15日目の記事です。 はじめまして、新卒1年目エンジニアの城戸です。 8月から食べログFEチームにjoinしての学びを共有できればと思います。 よろしくお願いします！ はじめにFEチームに来た経緯 まず、私の本来の所属はFEチームではなく、バックエンドの実装がメインのチームなので、なぜFEチームにいるのかを説明します。 FEチームのミッションは「食べログのフロントエンドに秩序をもたらす」ことです。その一環と
この記事は食べログアドベントカレンダー2021の10日目の記事です。 こんにちは。食べログ フロントエンドチームの原田です。 現在食べログでは、jQuery+Railsで実装されているフロントエンドをReact/TypeScriptベースに置き換えるリプレースプロジェクトを進めています。 食べログでは、リプレース戦略としてRails上に部分的にReactを導入する戦略をとっており、 以前の記事で部分導入するにあたってRailsに依存しないコンポーネント結合環境を用意してい
この記事は食べログ Advent Calendar 2021の6日目の記事です。 フロントエンドチームリーダーの辻です。 突然ですが、今日でブログ開設後516日目です！ 500日超えてた〜！１年半ほど経過しました！ この記事では、このブログを開設した目的、ブログを公開してみて起こった変化について紹介します。 企業ブログ/技術ブログ開設を検討中の方の参考になれば幸いです。 ブログ開設の目的「フロントエンジニアを採用したいから！」 ブログ開設前は下記のような採用課題を抱えて
こんにちは。食べログFE(フロントエンド)チーム の佐々木です。 FEチームでは今後の開発を基本的にペアプロで行っていくことにしました。 今回の記事では、ペアプロ導入に至った経緯と導入してみたメリット等を紹介します。 新規開発をモブプロでしてみた FEチームではこれまでPC版の食べログのReactへのリプレースを進めて来ましたが、新たにSP版のリプレースに取り掛かるにあたり、以下のような狙いでモブプロを導入してみました。 ・今後の基盤となる開発であるため、チーム全員で実装
こんにちは。FEチームリーダーの辻です。 2021年7月21日に開催された「Qiita Engineer Summit 2021」に、LT枠で登壇しました。 発表内容「食べログでフロントエンドのリプレースやっていってます！」というタイトルで、食べログでリプレースプロジェクトに取り組むと、規模が大きいがゆえの迷いや課題も多く出てくるけど、それぞれ対策を考えながら楽しくやってます！という内容で発表しました。 関連記事発表でもお話したとおり、大規模なリプレースではチーム内で設計
久しぶりに投稿します、食べログFEチームリーダーの辻です。 チームで開催している輪読会での取り組みについて紹介します。 忙しい人向けに3行でFEチームの輪読会でJestの公式ドキュメントを読んでる。 日本語版が一部まだ英語だったので、日本語訳を投稿したら採用されたよ。 これで私もOSS contributorだ！ 詳しくFEチームで輪読会やってます📚 毎週、全員参加の輪読会を開催しています。 ドキュメントや書籍を読むのはもちろん、ハンズオン形式でTypeScriptの型パ
