フロントエンド リアーキテクチャの結果 生じたワークフローの変化
27.1K Views
September 05, 24
スライド概要
関連スライド
技術広報戦略の立て方
HireRoo
14.9K
各ページのテキスト
フロントエンド リアーキテクチャの結果 生じたワークフローの変化 2024/09/05 各社から学ぶ！フロントエンドのためのリアーキテクチャ 株式会社ハイヤールー @Himenon 1
自己紹介 姫野 滉盛 @Himenon 現職 ● 前職 ● 趣味 ● SNS ● ● © HireRoo, Inc. 株式会社ハイヤールー （Webフロントエンド） 株式会社ドワンゴ （Webフロントエンド） 将棋を見る・たまに打つこと（居飛車党） GitHub: Himenon X: himenoglyph 2
Agenda 1 実施したフロントエンドリアーキテクチャの内容 2 Re-architecture Deep Dive 3 リアーキテクチャによって変化したワークフロー
エンジニア採用のミスマッチを防ぐ コーディング試験サービス ✓ かんたんに試験問題作成 ✓ 幅広い層に対応する問題を提供 ✓ 候補者のスキルを定量・定性的に評価 スクリーニング 見極め 一定の基準に満たない候補者を判別する際 サービス詳細を見る 採用ポジションに見合った技術力があるか サービス詳細を見る に利用します。エンジニアの面接工数を削 を見極める際に利用します。 減する目的。 面接の前に実施し、アウトプットを元に面 接で深ぼる方法が一般的です。
コーディング形式 実践形式 クイズ形式 システムデザイン形式 コーディング形式 特定の⾔語にとらわれず基礎的なコンピューターサ イエンスの知識をみる問題形式です。 アルゴリズムの問題とデータベースの問題、クラス 実装問題があります。 問題の傾向 問題⽂を正しく理解し、コードで実装できるかを 問うことができます。 与えられた⼊⼒値に対しての処理がメインで、 データ処理、計算などを通じてその⾔語での処理 ができるかを確認できる問題です 5
コーディング形式 実践形式 クイズ形式 システムデザイン形式 実践形式 特定のフレームワークやピンポイントの技術⼒‧実 務的な実装⼒をみる形式です。 バックエンド、フロントエンド、データサイエン ティストなどにお使いいただけます 問題の傾向 APIの実装やフロンドエンドの実装など、フレーム ワークを⽤いた問題を多数⽤意しています。 開発環境も全て⾃動的に構築されるため、候補者 の負担はございません。 6
コーディング形式 実践形式 クイズ形式 システムデザイン形式 クイズ形式 さまざまな領域の知識を問うクイズ形式。専⾨的な 知識から横断的な問題まで幅広くご⽤意しておりま す。 問題の種類としては選択式や記述式があります。 問題の傾向 基礎的な知識を問う問題から、専⾨的な知識まで 幅広く問うことができます。Android や AWS、 GCP、ネットワークやQAなど幅広く⽤意がありま す。 7
コーディング形式 実践形式 クイズ形式 システムデザイン形式 システムデザイン形式 システムの設計⼒を⾒る問題形式です。インフラや バックエンドエンジニアにおすすめです。 問題の傾向 システムの設計⼒を確認する問題形式で、可⽤性 やスケーラビリティを考慮した設計ができるかど うかを問う問題形式です。 8
テスト結果を⾒ながら気になる点を確認しつつ ⾯接時に解答内容を掘り下げるために活⽤することが可能なレポート機能 プレイバックの詳細から確認できる統計データ 質問例 ● コードを書き始めるまでにどのように問題 を理解しましたか？ ● 途中で回答画⾯から何度か離脱しています が、ここでは何をしていましたか？ コピペもわかるコードの提出結果 質問例 ● コピペしたコードのこの部分を説明してくだ さい ● ⼀度書いたコードを消して書き直した理由は ありますか？ 問題のヒントや複数の解法 質問例 ● 計算量を減らすための⼯夫は何かできそう ですか？ ● 別アプローチでの回答は思いつきました か？
コーディング試験というプラットフォーム のWebフロントエンドの話
01 実施したフロントエンドリアーキテクチャの内容
HireRooのフロントエンドのアーキテクチャの歴史 2023/4月末頃リアーキテクチャを （ビッグバン）リリース 2022/10月頃リアーキテ クチャ開始 2020/12/01 HireRoo設立 約20ヶ月 © HireRoo, Inc. 本日 2024/09/02 約6ヶ月 約17ヶ月 12
過去の発表資料 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&t=2197 動画 https://youtu.be/z8eI0bgzPTM?feature=shared&t=1137
HireRooのフロントエンドのリアーキテクチャ施策と振り返り 実装におけるリーアーキテクチャ ● ● ● ● コードの自動生成 Presentation層とContainer層の分離 依存関係のテスト 名前空間のテスト リアーキテクチャの施策振り返り リアーキテクチャが無事に終わり、そのアーキテクチャ上で開発がうまく回っている要因 ● コードの自動生成によって実装と意思疎通が安定し開発速度が落ちない © HireRoo, Inc. 14
02 Re-architecture Deep Dive
リアーキテクチャという事象を もう少し抽象的に捉える
誰も、リアーキテクチャを やりたくてやっていないはず
なぜなら、アーキテクチャが最初から 完全なら リアーキテクチャする必要がない
何が、リアーキテクチャを必要とさせ 何故、そのアーキテクチャが必要なのか
そもそも やりたいことは
プロダクト を高速に開発でき
どんどん機能が リリース され
バグがなく、保守性が高く 売上がどんどん伸びる
プロダクトを顧客へ届けるために 我々はコードを書いている
本質はプロダクトを顧客に 提供することにある
何が、リアーキテクチャを必要とさせ 何故、そのアーキテクチャが必要なのか
顧客にプロダクトが届くのが遅いこと がリアーキテクチャを必要とさせ 提供するまでの速度を最高にするために アーキテクチャが必要
プロダクトが顧客に届くまで 要求・要件定義 実装 リリース 時間
プロダクトが顧客に届くまで（理想） 要求・要件定義 リリース 時間 実装
プロダクトが顧客に届くまで（現実） 要求・要件定義 実装 リリース 時間 レビュー QA
プロダクトが顧客に届くまで（現実 + 理想） 要求・要件定義 実装 リリース 時間 レビュー QA リリースまでに必要なステップがあったとしても、高速であれば良い
つまり リリースまでの いろんな種類 の作業が発生すること が問題なのではなく
その作業に払う時間 が長くなることが問題
リアーキテクチャによって解決したい問題は 顧客にプロダクトが届くまでの 時間を短くするこ と
03 リアーキテクチャによって 変化したワークフロー
もう１回みる HireRooのフロントエンドのリアーキテクチャ施策と振り返り 実装面でのリーアーキテクチャ ● ● ● ● コードの自動生成 Presentation層とContainer層の分離 依存関係のテスト 名前空間のテスト リアーキテクチャの施策振り返り リアーキテクチャが無事に終わり、そのアーキテクチャ上で開発がうまく回っている要因 ● コードの自動生成によって実装と意思疎通が安定し開発速度が落ちない © HireRoo, Inc. 36
“実装”のワークフロー 実線: リアーキテクチャ後 迷いポイント 破線: リアーキテクチャ前 アーキテクチャに沿って コードを書けているか？ どこにコードを書くか？ 何がレビューされるか？ リリースの方向 Presentation/Container層 というルールに従う コードを自動生成 テストで判定 メンバーに聞く・自分で考える メンバーに聞く・自分で考える 要求に沿っているかどうか 本質的でない議論が発生しやす い コードを書いてリリースするまで 決断の連続 。 アーキテクチャやテストは決断のための 最短経路を用意してくれる © HireRoo, Inc. 37
HireRooのリアーキテクチャは 実装・レビューに含まれる意思決定のプロセスを「 開発者 自ら決断できる状態 」にした ことにより、 実装・レビュー にかかる時間を短縮した。 ※ 裏を返せば、決断の速度を下げる施策はやらない。 © HireRoo, Inc. 38
宣伝 1/2 サービスが気になるという方はお気軽にお問い合わせください https://hireroo.io © HireRoo, Inc. 39
宣伝2/2 フロントエンドエンジニア募集中 © HireRoo, Inc. 40
おわり