---
title: リアーキテクチャの振り返り！良かった改善、失敗した施策とは
tags:  #フロントエンド  
author: [HireRoo](https://convert.docswell.com/user/hireroo)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/DEYG2R5NEM.jpg?width=480
description: 2024年3月36日（火） 19:00 - 20:30 「フロントアーキテクチャ改善NIGHT with Takepepeさん」で発表した内容になります。  https://hireroo.connpass.com/event/310150/
published: March 26, 24
canonical: https://convert.docswell.com/s/hireroo/5ENGRE-2024-03-26-191500
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/DEYG2R5NEM.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/VJNG8DNV78.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/YE9WKGRVE3.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/GE8NRVW47D.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/LELPK5NV7R.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/4JM423XN7W.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/PJRWMQN479.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/PEXPV5NZ7X.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/3EKDQ6NVJD.jpg)

02
やって良かった施策


# Page. 10

![Page Image](https://bcdn.docswell.com/page/L73RP6ZQJ5.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/87DYLVRW7G.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/VJP62VWXE8.jpg)

03
効果がなかった施策


# Page. 13

![Page Image](https://bcdn.docswell.com/page/2EV3DZ837Q.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/57G3Y45YJL.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/4EQ5MGZ6JP.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/KJ49V53M71.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/LE1K3W1YJG.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/GEWDP681J2.jpg)

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


# Page. 19

![Page Image](https://bcdn.docswell.com/page/47ZGKY8XE3.jpg)

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


# Page. 20

![Page Image](https://bcdn.docswell.com/page/YJ6YQDPP7V.jpg)

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


# Page. 21

![Page Image](https://bcdn.docswell.com/page/GJ5GR3KPJ4.jpg)

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


# Page. 22

![Page Image](https://bcdn.docswell.com/page/LE3RP6Z675.jpg)

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


# Page. 23

![Page Image](https://bcdn.docswell.com/page/8EDYLVRMEG.jpg)

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


# Page. 24

![Page Image](https://bcdn.docswell.com/page/V7P62VWQJ8.jpg)

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


# Page. 25

![Page Image](https://bcdn.docswell.com/page/2JV3DZ8PEQ.jpg)

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


# Page. 26

![Page Image](https://bcdn.docswell.com/page/5EG3Y45Q7L.jpg)

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


# Page. 27

![Page Image](https://bcdn.docswell.com/page/4JQ5MGZW7P.jpg)

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


