Qiita Engineer Summit 2021 LT枠で発表しました。

1. で
フロントエンドのリプレースをやっていってます！
2021. 07. 21 Tsuji Yuko

2. Copyright (c) Kakaku.com, Inc. All Rights Reserved.
自己紹介
• 辻 祐子 (@osunu)
• 2018年 株式会社カカクコム入社
• 食べログフロントエンドチーム マネージャー
• リプレースプロジェクト推進、採用、チームビルディング
• テニミュ、特撮、アニメが好き

3. １. 食べログフロントエンドの
リプレースプロジェクト始まってます

4. Copyright (c) Kakaku.com, Inc. All Rights Reserved.
食べログフロントエンドリプレースプロジェクト
 2005年サービス開始で、歴史あるサービス食べログ
 いろいろあってフロントエンドがそこそこカオス!
 メンテナンス性が高いシステムに構築しなおしたい…
 jQueryからReact/TypeScript にリプレースしよう！
 詳しくはブログを読んでね 😚
 食べログ フロントエンドエンジニアブログ
 https://note.com/tabelog_frontend
 大規模な改善プロジェクト！

5. Copyright (c) Kakaku.com, Inc. All Rights Reserved.
各ステップで色んなことに挑戦しながら勧めてます！
ビ ル ド 分 割
技 術 選 定
試 験 導 入
P C で 1 機 能
リ プ レ ー ス
S P で 1 機 能
リ プ レ ー ス
俺達の戦いはこれからだ！
影響範囲を絞って
リリースできるようになった
一部ライブラリのバージョンアップ
React/TypeScriptに決定！ 部分導入環境整備
Schemaドリブンな開発フロー導入
React周辺ツール選定
デザイナーと協業体制確率
アクセシビリティの整備
アプリケーションアーキテクチャ見直し
（Atomic Designやめた）
リポジトリ独立
Next.jsを見据え、データ管理を再考

6. Copyright (c) Kakaku.com, Inc. All Rights Reserved.
そしてこうなる
ビ ル ド 分 割
技 術 選 定
試 験 導 入
P C で 1 機 能
リ プ レ ー ス
S P で 1 機 能
リ プ レ ー ス
俺達の戦いはこれからだ！
影響範囲を絞って
リリースできるようになった
一部ライブラリのバージョンアップ
React/TypeScriptに決定！ 部分導入環境整備
Schemaドリブンな開発フロー導入
React周辺ツール選定
デザイナーと協業体制確率
アクセシビリティの整備
アプリケーションアーキテクチャ見直し
（Atomic Designやめた）
リポジトリ独立
Next.jsを見据え、データ管理を再考

7. 2.食べログでリプレース始めるとこうなる

8. Copyright (c) Kakaku.com, Inc. All Rights Reserved.
開始前から問題発生！
ビ ル ド 分 割
技 術 選 定
試 験 導 入
P C で 1 機 能
リ プ レ ー ス
S P で 1 機 能
リ プ レ ー ス
俺達の戦いはこれからだ！
影響範囲を絞って
リリースできるようになった
一部ライブラリのバージョンアップ
React/TypeScriptに決定！ 部分導入環境整備
Schemaドリブンな開発フロー導入
React周辺ツール選定
デザイナーと協業体制確率
アクセシビリティの整備
アプリケーションアーキテクチャ見直し
（Atomic Designやめた）
リポジトリ独立
Next.jsを見据え、データ管理を再考

9. ｗ
Copyright (c) Kakaku.com, Inc. All Rights Reserved.
範囲広すぎてわけわからん問題

10. Copyright (c) Kakaku.com, Inc. All Rights Reserved.
範囲広すぎてわけわからん問題
Ruby on Rails アプリケーション 25個
エントリーポイント 1532ファイル
JSファイル行数 210,760行 ※node_moduleは含まず
1週間にリリースされるissue 100件〜
 範囲広すぎて考えることが多すぎてまとまらない
 全部やろうとすると長期過ぎてスケジュール立てられない
 機能開発ではなく、明確な期限がない
 どこから手を付けていいのかわからない

11. Copyright (c) Kakaku.com, Inc. All Rights Reserved.
チーム内でこのプロジェクトは何なのかを徹底的に話す！
 なぜこのプロジェクトを始めようと思ったのか
 やらなかったらどうなるのか
 誰がうれしいのか
 いつまでにやらないといけないのか
 プロジェクトのゴールを設定
 優先度決める
 インセプションデッキとしてドキュメント化
 何をやるのかわかったらやる気出てきた！
たのしー！

12. Copyright (c) Kakaku.com, Inc. All Rights Reserved.
あとは実装を進めていくだけ！と重いきや…
ビ ル ド 分 割
技 術 選 定
試 験 導 入
P C で 1 機 能
リ プ レ ー ス
S P で 1 機 能
リ プ レ ー ス
俺達の戦いはこれからだ！
影響範囲を絞って
リリースできるようになった
一部ライブラリのバージョンアップ
React/TypeScriptに決定！ 部分導入環境整備
Schemaドリブンな開発フロー導入
React周辺ツール選定
デザイナーと協業体制確率
アクセシビリティの整備
アプリケーションアーキテクチャ見直し
（Atomic Designやめた）
リポジトリ独立
Next.jsを見据え、データ管理を再考
インセプションデッキ作成

13. ｗ
Copyright (c) Kakaku.com, Inc. All Rights Reserved.
設計方針が定まらず手戻り多発問題！

14. Copyright (c) Kakaku.com, Inc. All Rights Reserved.
設計方針が定まらず手戻り多発問題！
 100人で触っても壊れないシステムの土台作りターン
 実装着手後に悩みポイントがどんどん出てくる
 食べログで全てのコンポーネントがReactになっても、
カオス化しないディレクトリ設計とは？
 Atomic Design入れてみたけどしっくりこない
 レビュー段階で指摘が入り、何度も実装し直しとなる時期があった
 あるコンポーネント実装への指摘内容が、他のコンポーネントにも飛び火🔥
 手戻りが多すぎて全然前に進まない！

15. Copyright (c) Kakaku.com, Inc. All Rights Reserved.
設計方針が定まらず手戻り多発問題の対処法
 モブ・ペアプログラミングの導入
 今後を左右するような設計は多くの観点が必要。1人で決めるのは無理がある
 作業時点から複数人で挑むことで、設計/実装の確度をあげる
 雑談部屋を定期開催し、コミュニケーション量アップ
 細かい相談もしやすい環境
 人と話すだけで解決する課題がある
 人と話して初めて発見できる課題もある
 ペアプロたのしー！
雑談からもチームみんなの設計に対する熱い思いを感じる…！！たのしー！

16. Copyright (c) Kakaku.com, Inc. All Rights Reserved.
インセプションデッキ作成
プロジェクトの経過
ビ ル ド 分 割
技 術 選 定
試 験 導 入
P C で 1 機 能
リ プ レ ー ス
S P で 1 機 能
リ プ レ ー ス
俺達の戦いはこれからだ！
影響範囲を絞って
リリースできるようになった
一部ライブラリのバージョンアップ
React/TypeScriptに決定！ 部分導入環境整備
Schemaドリブンな開発フロー導入
React周辺ツール選定
デザイナーと協業体制確率
アクセシビリティの整備
アプリケーションアーキテクチャ見直し
（Atomic Designやめた）
リポジトリ独立
Next.jsを見据え、データ管理を再考
ペアプロ・モブプロ導入

17. ｗ
Copyright (c) Kakaku.com, Inc. All Rights Reserved.
日々いろんな課題にぶつかる！

18. Copyright (c) Kakaku.com, Inc. All Rights Reserved.
次々疑問や課題が出てくる
 リプレース進めているうちに世間のデファクトが変わる
 データを持つのはPages層なのかorganisms層なのか
 汎用コンポーネントっていつかパッケージ化するのか？
 SEOのためにサーバーサイドレンダリングが必要では！？
 食べログではHTMLマークアップはデザイナー担当だけどReactになったらどーすんの？
 アクセシビリティってどこまでやんの？
 その他いろいろ大変だけどなんだかたのし〜！✌(՞ਊ՞✌三✌՞ਊ՞)✌
ブログで発信していきます👍→

19. Copyright (c) Kakaku.com, Inc. All Rights Reserved.
楽しい上に効果も出てるよ！
 Delivery（納期）の短縮に貢献
 サーバーサイド・フロントエンドが疎結合になったためバグや影響範囲の調査がしやすくなった。
 Quality（品質）の安定性が向上
 型チェックやカバレッジの高いUnit test、snapshot testで、意図しないデグレーションを防げる
 世間の標準的な技術スタックにも追従しやすい状態に
 リファクタリングやライブラリバージョンアップも安全に素早くできるように。
 採用やチームメンバーのモチベーション向上にも効果が
 リプレースのとりくみを紹介したブログ記事を見て応募してくださる方が増えた
これらの効果は、プロジェクトのゴールや解決したい課題を
見失わずに進めてきたからこそ。

20. 3. まとめ＆今後の課題

21. Copyright (c) Kakaku.com, Inc. All Rights Reserved.
まとめ
 食べログでフロントエンドリプレース進めてます！
 規模大きすぎて途方にくれそうになりながらインセプションデッキ作ったり
 100人で触っても壊れないシステムをみんなで語り合ったり、
 その他色々大変だけどなんだかいつもたーのしー！

22. Copyright (c) Kakaku.com, Inc. All Rights Reserved.
インセプションデッキ作成
今後の課題
ビ ル ド 分 割
技 術 選 定
試 験 導 入
P C で 1 機 能
リ プ レ ー ス
S P で 1 機 能
リ プ レ ー ス
俺達の戦いはこれからだ！
影響範囲を絞って
リリースできるようになった
一部ライブラリのバージョンアップ
React/TypeScriptに決定！ 部分導入環境整備
Schemaドリブンな開発フロー導入
React周辺ツール選定
デザイナーと協業体制確率
アクセシビリティの整備
アプリケーションアーキテクチャ見直し
（Atomic Designやめた）
リポジトリ独立
Next.jsを見据え、データ管理を再考
ペアプロ・モブプロ導入

23. ｗ
Copyright (c) Kakaku.com, Inc. All Rights Reserved.
人が足りてません！

24. Copyright (c) Kakaku.com, Inc. All Rights Reserved.
採用してます
 We are hiring!!!!
 一緒に大規模システムのリプレースに取り組みませんか？
 フロントエンド以外の職種も募集中です❤
 https://www.wantedly.com/projects/254221