---
title: フロントエンド リアーキテクチャの結果 生じたワークフローの変化
tags:  #フロントエンド  
author: [HireRoo](https://convert.docswell.com/user/hireroo)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/87DY2DK27G.jpg?width=480
description: フロントエンド リアーキテクチャの結果 生じたワークフローの変化 by HireRoo
published: September 05, 24
canonical: https://convert.docswell.com/s/hireroo/K7RREW-2024-09-05-1200
---
# Page. 1

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

フロントエンド リアーキテクチャの結果
生じたワークフローの変化
2024/09/05
各社から学ぶ！フロントエンドのためのリアーキテクチャ
株式会社ハイヤールー
@Himenon
1


# Page. 2

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

自己紹介
姫野 滉盛
@Himenon
現職
●
前職
●
趣味
●
SNS
●
●
© HireRoo, Inc.
株式会社ハイヤールー （Webフロントエンド）
株式会社ドワンゴ （Webフロントエンド）
将棋を見る・たまに打つこと（居飛車党）
GitHub: Himenon
X: himenoglyph
2


# Page. 3

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

Agenda
1
実施したフロントエンドリアーキテクチャの内容
2
Re-architecture Deep Dive
3
リアーキテクチャによって変化したワークフロー


# Page. 4

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

エンジニア採用のミスマッチを防ぐ
コーディング試験サービス
✓
かんたんに試験問題作成
✓
幅広い層に対応する問題を提供
✓
候補者のスキルを定量・定性的に評価
スクリーニング
見極め
一定の基準に満たない候補者を判別する際
サービス詳細を見る
採用ポジションに見合った技術力があるか
サービス詳細を見る
に利用します。エンジニアの面接工数を削
を見極める際に利用します。
減する目的。
面接の前に実施し、アウトプットを元に面
接で深ぼる方法が一般的です。


# Page. 5

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

コーディング形式
実践形式
クイズ形式
システムデザイン形式
コーディング形式
特定の⾔語にとらわれず基礎的なコンピューターサ
イエンスの知識をみる問題形式です。
アルゴリズムの問題とデータベースの問題、クラス
実装問題があります。
問題の傾向
問題⽂を正しく理解し、コードで実装できるかを
問うことができます。
与えられた⼊⼒値に対しての処理がメインで、
データ処理、計算などを通じてその⾔語での処理
ができるかを確認できる問題です
5


# Page. 6

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

コーディング形式
実践形式
クイズ形式
システムデザイン形式
実践形式
特定のフレームワークやピンポイントの技術⼒‧実
務的な実装⼒をみる形式です。
バックエンド、フロントエンド、データサイエン
ティストなどにお使いいただけます
問題の傾向
APIの実装やフロンドエンドの実装など、フレーム
ワークを⽤いた問題を多数⽤意しています。
開発環境も全て⾃動的に構築されるため、候補者
の負担はございません。
6


# Page. 7

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

コーディング形式
実践形式
クイズ形式
システムデザイン形式
クイズ形式
さまざまな領域の知識を問うクイズ形式。専⾨的な
知識から横断的な問題まで幅広くご⽤意しておりま
す。
問題の種類としては選択式や記述式があります。
問題の傾向
基礎的な知識を問う問題から、専⾨的な知識まで
幅広く問うことができます。Android や AWS、
GCP、ネットワークやQAなど幅広く⽤意がありま
す。
7


# Page. 8

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

コーディング形式
実践形式
クイズ形式
システムデザイン形式
システムデザイン形式
システムの設計⼒を⾒る問題形式です。インフラや
バックエンドエンジニアにおすすめです。
問題の傾向
システムの設計⼒を確認する問題形式で、可⽤性
やスケーラビリティを考慮した設計ができるかど
うかを問う問題形式です。
8


# Page. 9

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

テスト結果を⾒ながら気になる点を確認しつつ
⾯接時に解答内容を掘り下げるために活⽤することが可能なレポート機能
プレイバックの詳細から確認できる統計データ
質問例
● コードを書き始めるまでにどのように問題
を理解しましたか？
● 途中で回答画⾯から何度か離脱しています
が、ここでは何をしていましたか？
コピペもわかるコードの提出結果
質問例
● コピペしたコードのこの部分を説明してくだ
さい
● ⼀度書いたコードを消して書き直した理由は
ありますか？
問題のヒントや複数の解法
質問例
● 計算量を減らすための⼯夫は何かできそう
ですか？
● 別アプローチでの回答は思いつきました
か？


# Page. 10

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

コーディング試験というプラットフォーム
のWebフロントエンドの話


# Page. 11

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

01
実施したフロントエンドリアーキテクチャの内容


# Page. 12

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

HireRooのフロントエンドのアーキテクチャの歴史
2023/4月末頃リアーキテクチャを
（ビッグバン）リリース
2022/10月頃リアーキテ
クチャ開始
2020/12/01
HireRoo設立
約20ヶ月
© HireRoo, Inc.
本日
2024/09/02
約6ヶ月
約17ヶ月
12


# Page. 13

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

過去の発表資料
2023/04/06(木)
2024/03/26(火)
スライド
https://www.docswell.com/s/hireroo/ZGXXP8-techtalk1-2
スライド
https://www.docswell.com/s/hireroo/5ENGRE-2024-03-26-191500
動画
https://youtu.be/sc1HEtpQ35k?si=5Wo5657qN1tvIRCy&amp;t=2197
動画
https://youtu.be/z8eI0bgzPTM?feature=shared&amp;t=1137


# Page. 14

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

HireRooのフロントエンドのリアーキテクチャ施策と振り返り
実装におけるリーアーキテクチャ
●
●
●
●
コードの自動生成
Presentation層とContainer層の分離
依存関係のテスト
名前空間のテスト
リアーキテクチャの施策振り返り
リアーキテクチャが無事に終わり、そのアーキテクチャ上で開発がうまく回っている要因
●
コードの自動生成によって実装と意思疎通が安定し開発速度が落ちない
© HireRoo, Inc.
14


# Page. 15

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

02
Re-architecture Deep Dive


# Page. 16

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

リアーキテクチャという事象を
もう少し抽象的に捉える


# Page. 17

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

誰も、リアーキテクチャを
やりたくてやっていないはず


# Page. 18

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

なぜなら、アーキテクチャが最初から
完全なら リアーキテクチャする必要がない


# Page. 19

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

何が、リアーキテクチャを必要とさせ
何故、そのアーキテクチャが必要なのか


# Page. 20

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

そもそも やりたいことは


# Page. 21

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

プロダクト を高速に開発でき


# Page. 22

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

どんどん機能が リリース され


# Page. 23

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

バグがなく、保守性が高く
売上がどんどん伸びる


# Page. 24

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

プロダクトを顧客へ届けるために
我々はコードを書いている


# Page. 25

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

本質はプロダクトを顧客に
提供することにある


# Page. 26

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

何が、リアーキテクチャを必要とさせ
何故、そのアーキテクチャが必要なのか


# Page. 27

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

顧客にプロダクトが届くのが遅いこと
がリアーキテクチャを必要とさせ
提供するまでの速度を最高にするために
アーキテクチャが必要


# Page. 28

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

プロダクトが顧客に届くまで
要求・要件定義
実装
リリース
時間


# Page. 29

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

プロダクトが顧客に届くまで（理想）
要求・要件定義
リリース
時間
実装


# Page. 30

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

プロダクトが顧客に届くまで（現実）
要求・要件定義
実装
リリース
時間
レビュー
QA


# Page. 31

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

プロダクトが顧客に届くまで（現実 + 理想）
要求・要件定義
実装 リリース
時間
レビュー
QA
リリースまでに必要なステップがあったとしても、高速であれば良い


# Page. 32

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

つまり
リリースまでの いろんな種類 の作業が発生すること
が問題なのではなく


# Page. 33

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

その作業に払う時間 が長くなることが問題


# Page. 34

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

リアーキテクチャによって解決したい問題は
顧客にプロダクトが届くまでの
時間を短くするこ と


# Page. 35

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

03
リアーキテクチャによって
変化したワークフロー


# Page. 36

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

もう１回みる
HireRooのフロントエンドのリアーキテクチャ施策と振り返り
実装面でのリーアーキテクチャ
●
●
●
●
コードの自動生成
Presentation層とContainer層の分離
依存関係のテスト
名前空間のテスト
リアーキテクチャの施策振り返り
リアーキテクチャが無事に終わり、そのアーキテクチャ上で開発がうまく回っている要因
●
コードの自動生成によって実装と意思疎通が安定し開発速度が落ちない
© HireRoo, Inc.
36


# Page. 37

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

“実装”のワークフロー
実線: リアーキテクチャ後
迷いポイント
破線: リアーキテクチャ前
アーキテクチャに沿って
コードを書けているか？
どこにコードを書くか？
何がレビューされるか？
リリースの方向
Presentation/Container層
というルールに従う
コードを自動生成
テストで判定
メンバーに聞く・自分で考える
メンバーに聞く・自分で考える
要求に沿っているかどうか
本質的でない議論が発生しやす
い
コードを書いてリリースするまで 決断の連続 。
アーキテクチャやテストは決断のための 最短経路を用意してくれる
© HireRoo, Inc.
37


# Page. 38

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

HireRooのリアーキテクチャは
実装・レビューに含まれる意思決定のプロセスを「 開発者 自ら決断できる状態 」にした
ことにより、 実装・レビュー にかかる時間を短縮した。
※ 裏を返せば、決断の速度を下げる施策はやらない。
© HireRoo, Inc.
38


# Page. 39

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

宣伝 1/2
サービスが気になるという方はお気軽にお問い合わせください
https://hireroo.io
© HireRoo, Inc.
39


# Page. 40

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

宣伝2/2
フロントエンドエンジニア募集中
© HireRoo, Inc.
40


# Page. 41

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

おわり


