リアーキテクチャの振り返り！良かった改善、失敗した施策とは

リアーキテクチャの振り返り！ 良かった改善、失敗した施策とは @Himenon 1

イントロダクション 自己紹介 姫野 滉盛 @Himenon 所属 ● 株式会社ハイヤールー SNS ● ● GitHub: Himenon Twitter: himenoglyph エンジニアリング領域 ● Webフロントエンド（メイン） ● 開発支援ツールを作るのが趣味 宣伝 ● TSKaigi 2024/05/11で発表します 2 代表的なOSS

Agenda 1 前置き 2 やって良かった施策 3 効果がなかった施策 4 やってよかった施策の深掘り！

01 前置き（HireRooのフロントエンド事情）

リアーキテクチャの振り返り！良かった改善、失敗した施策とは HireRooにおけるフロントエンドの歴史 ● 生まれてから40ヶ月くらいのプロダクト ● 1度リアーキテクチャを行っている TypeScriptファイルの行数の変化（clocで算出） ● 移行前: 14万行 → 移行後 53万行 2023/4月末頃リアーキテクチャを （ビッグバン）リリース 2020/12/01 HireRoo設立 2022/10月頃リアーキテ クチャ開始 約20ヶ月 約6ヶ月 約10ヶ月 本日 2024/03/26 5

• https://github.com/AlDanial/cloc

リアーキテクチャの振り返り！良かった改善、失敗した施策とは HireRooにおけるフロントエンドの歴史: ざっとおさらい 技術的負債との戦い 針を通すような機能開発 責務分離との戦い 機能しないレビュー 持続可能なアーキテクチャへの進化 テンプレートコード生成 / 依存関係のテスト / スキルアップ支援 / テストの充実化 詳細：鋼の意思で゙実施した、技術的負債解消のためのリアーキテクチャ https://www.docswell.com/s/hireroo/ZGXXP8-techtalk1-2 6

• https://www.docswell.com/s/hireroo/ZGXXP8-techtalk1-2

リアーキテクチャの振り返り！良かった改善、失敗した施策とは HireRooにおけるフロントエンドの歴史: ざっとおさらい 一言でいうと、 当時の抱えていた課題を 開発チームメンバーのレベルを 全無視して、 理想状態を構築した 7

リアーキテクチャの振り返り！良かった改善、失敗した施策とは HireRooにおけるフロントエンドの歴史: ざっとおさらい その後、どうなったかを紹介します 8

02 やって良かった施策

リアーキテクチャの振り返り！良かった改善、失敗した施策とは やってよかった施策ランキング 施策 結果 1 テンプレートコードジェネ レーター 2 依存関係のテスト スパゲッティー状態の依存関係がシンプルになっ た！ 3 Container層 / Presentation層 UIからロジックが剥がれた！ 4 名前空間のテスト 名付けコストが削減された！ 5 抽象化をしすぎない コードを読みやすく誰もが保守しやすい！ 10

リアーキテクチャの振り返り！良かった改善、失敗した施策とは やってよかった施策ランキング 施策 結果 1 テンプレートコードジェネ レーター これなしの開発はもう考えられない（詳細は後述） 2 依存関係のテスト スパゲッティー状態の依存関係がシンプルになっ た！ 3 Container層 / Presentation層 UIからロジックが剥がれた！ 4 名前空間のテスト 名付けコストが削減された！ 5 抽象化をしすぎない コードを読みやすく誰もが保守しやすい！ 11

03 効果がなかった施策

リアーキテクチャの振り返り！良かった改善、失敗した施策とは HireRooにおけるフロントエンドの歴史: ざっとおさらい 一言でいうと、 当時の抱えていた課題を 開発チームメンバーのレベルを 全無視して、 理想状態を構築した 13

リアーキテクチャの振り返り！良かった改善、失敗した施策とは 効果がなかった施策 リアーキテクチャに順応させるための情報を スキルアップ支援（社内勉強会）という形で 一気に全部詰め込んだ Presentation / Container 責務分離 テスト設計 依存関係 pnpm アーキテク チャ設計 モノレポ うわぁ〜 14

リアーキテクチャの振り返り！良かった改善、失敗した施策とは 効果がなかった施策 ？ 15

リアーキテクチャの振り返り！良かった改善、失敗した施策とは 効果がなかった施策 リアーキテクチャはシステムのことしか考えていない 人間の思考もリアーキテクチャしていく必要がある 16

リアーキテクチャの振り返り！良かった改善、失敗した施策とは 人間の思考もリアーキテクチャしていくには順番に施策を打つ必要がある モノレポ この辺のスキルアップを支援 したところで効果が薄い 実装のパターン化 責務分離 Presentation, Container 設計 機能開発のサイクル リリース 抽象化し過ぎない/させ過ぎない設 計 実装 依存関係の設計 時間 リアーキテクチャ期間 ← → 普段の実装 17

リアーキテクチャの振り返り！良かった改善、失敗した施策とは 人間の思考もリアーキテクチャしていくには順番に施策を打つ必要がある このサイクルがうまく回らなくな かった時にスキルアップ支援が有効 モノレポ 実装のパターン化 責務分離 Presentation, Container 設計 機能開発のサイクル リリース 抽象化し過ぎない/させ過ぎない設 計 実装 依存関係の設計 時間 リアーキテクチャ期間 ← → 普段の実装 18

リアーキテクチャの振り返り！良かった改善、失敗した施策とは 人間の思考もリアーキテクチャしていくには順番に施策を打つ必要がある 実装のパターン化 設計 機能開発のサイクル リリース 実装 とはいえ何も知らないまま実装し続けても せっかくのリアーキテクチャが破綻してしまうので何かしらの手を打つ必要がある 19

リアーキテクチャの振り返り！良かった改善、失敗した施策とは 人間の思考もリアーキテクチャしていくには順番に施策を打つ必要がある 知見の蓄積 実装のパターン化 設計 機能開発のサイクル コード生成 実装 リリース 実装前にコード生成（雛形）を行い、 実装の軌道がアプリケーション全体から大きくずれないようにした 20

リアーキテクチャの振り返り！良かった改善、失敗した施策とは 人間の思考もリアーキテクチャしていくには順番に施策を打つ必要がある 知見の蓄積 実装のパターン化 Happy Happy Happy 意思疎通や実装の潤 滑油として作用 設計 機能開発のサイクル コード生成 実装 リリース 実装前にコード生成（雛形）を行い、 実装の軌道がアプリケーション全体から大きくずれないようにした 21

リアーキテクチャの振り返り！良かった改善、失敗した施策とは まとめ：リアーキテクチャの達成に必要なこと システムに対するリアーキテクチャ ● パワープレーでもなんとかなる 人間の思考に対するリアーキテクチャ ● パワープレーでもなんとかならない → 無理にやると色々と破綻する 今の今までうまくリアーキテクチャが回っている理由 ● コードの自動生成が実装・意思疎通を容易にした ● 開発サイクルがうまく回らない時にスキルアップ支援を行う 22

04 やってよかった施策の深掘り！

リアーキテクチャの振り返り！良かった改善、失敗した施策とは -やってよかった施策の深掘り！ アプリケーションを作るまで Presentation Layer Search Form いろいろな実装パターンに対応 List 仕様 Container Layer CodeGen Search Form Logic 設計 List Logic CLIの引数で入力 Store 実装 パターン State forco Container さまざまなパターンで 生成できる 24

リアーキテクチャの振り返り！良かった改善、失敗した施策とは -やってよかった施策の深掘り！ 使用中のDEMO（動画） 別タブでDEMO 25

リアーキテクチャの振り返り！良かった改善、失敗した施策とは -やってよかった施策の深掘り！ コードの行数の増減グラフで比較する変化 ※機能は常に増え続けています 踊り場 検証期間 insertions: +40万行/6ヶ月 deletions: -25万行/6ヶ月 total: +15万行 insertions: 8.75万行/6ヶ月 deletions: -3万行/6ヶ月 total: +5万行 踊り場が殆どない → 開発の速度が停滞しない 26

リアーキテクチャの振り返り！良かった改善、失敗した施策とは まとめ フロントエンドのリアーキテクチャ 当時の抱えていた課題を開発チームメンバーのレベルを全無視して、理想状態を構築した 色々詰め込んだが、リアーキテクチャはシステムのことしか考えていないかった 新しいアーキテクチャに順応させるために人間の思考もリアーキテクチャも必要！ 人間の思考をリアーキテクチャしきれて無い中でもチームとして成功した理由 テンプレートコードの自動生成が実装・意思疎通の潤滑油として機能し開発速度を落とさない効果をも たらしている 27