ステップバイステップで進めるYahoo!知恵袋のフロントエンドリアーキテクト

by Koki Tsumura

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

© LY Corporation 機能 • AI回答機能 • 企業公式Q&A機能 • 商品に関するQ&A機能 3 Yahoo!知恵袋の紹介 • 2004年からあるQ&Aサイト(今年20周年 ) • 登録利用者数5,200万人、質問総数2億8,000万件、回答総数6億5,000万件以上フロントエンドチーム/システムについて • フロントエンドチーム: 6人 • 行数: 380,000行程度 • 利用技術: Node.js、React、Express.js 等を利用 ※2024年4月3日時点のデータ

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

© LY Corporation 8 何をいつ解決するか何: 開発効率や品質の影響が大きい問題 8 いつ: 解決に必要な時間/分割可能性に依存 • コスト小 → スキマ時間に解決 • 例: ABテストの仕組み、feature flag、コーディング規約 • コスト大/分割可能 → リファクタリングデー • 例: デザインシステムのコンポーネントの実装 • コスト大/分割不可能 → 専用の時間を確保 • 例: リアーキテクト、TypeScript化、ユニットテスト改善

Slide 9

Slide 9 text

© LY Corporation 9 何をいつ解決するか何: 開発効率や品質の影響が大きい問題 9 いつ: 解決に必要な時間/分割可能性に依存 • コスト小 → スキマ時間に解決 • 例: ABテストの仕組み、feature flag、コーディング規約 • コスト大/分割可能 → リファクタリングデー • 例: デザインシステムのコンポーネントの実装 • コスト大/分割不可能 → 専用の時間を確保 • 例: リアーキテクト、TypeScript化、ユニットテスト改善 ↑ここについて話します

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

© LY Corporation 13 問題点 13 • 各層との連携 • データの加工 • 業務ロジック • ページに表示する文言に関するロジック controllers/detail.js 特定の関数が肥大化しやすく、処理が追いづらい/品質が下がる • ルーティング • 受け取ったリクエストを元にレスポンスを返す • リクエストパラメーターのバリデーション本来あるべき処理それ以外の処理コードを置く場所が不明確 viewModel applicationService

Slide 14

Slide 14 text

Slide 15

Slide 15 text

© LY Corporation 15 15 リアーキテクトする • ドキュメント/ルールの整備コードを置く場所が不明確解決策: リアーキテクト controller controller: • ルーティング • リクエストを元にレスポンスを返す • リクエストパラメーターのバリデーション applicationService: • 各層との連携(処理の進行役)を行う • データの加工/様々な業務ロジック model utility

Slide 16

Slide 16 text

© LY Corporation 16 16 リアーキテクトする • ドキュメント/ルールの整備コードを置く場所が不明確解決策: リアーキテクト controller controller: • ルーティング • リクエストを元にレスポンスを返す • リクエストパラメーターのバリデーション applicationService: • 各層との連携(処理の進行役)を行う • データの加工/様々な業務ロジック model: データとふるまいをまとめたオブジェクト utility: 繰り返し色々な箇所で利用する関数

Slide 17

Slide 17 text

© LY Corporation 17 17 リアーキテクトする • ドキュメント/ルールの整備 • リファレンス実装コードを置く場所が不明確解決策: リアーキテクト controller controller: • ルーティング • リクエストを元にレスポンスを返す • リクエストパラメーターのバリデーション applicationService: • 各層との連携(処理の進行役)を行う • データの加工/様々な業務ロジック model: データとふるまいをまとめたオブジェクト utility: 繰り返し色々な箇所で利用する関数

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

© LY Corporation 29 29 バグの検知がしづらい //ts-nocheck • controllers/detail.tsの最初の行に// ts-nocheck を追加する • controllers/detail.tsから呼び出しているファイルに型をつける *.d.ts *.ts detail.tsから呼び出されているJSファイル detail.tsから切り出したTSファイル controllers/detail.ts 解決策: TypeScript化 (3/6)

Slide 30

Slide 30 text

© LY Corporation 30 30 バグの検知がしづらい //ts-nocheck detail.tsから呼び出されているJSファイル detail.tsから切り出したTSファイル controllers/detail.ts *.d.ts *.ts • // ts-nocheckを外す • 型がつけられていないものは、ひとまずanyにする(TODOコメントつき) 解決策: TypeScript化 (4/6)

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text

Slide 41

Slide 41 text

© LY Corporation 41 41 どのタイミングでどの問題を解決するか • 問題の種類でいつ解決するかを分類 • 大きな問題でも小さく分割できる場合は、少しずつ進めるどこに何を書くべきかのルールが決まっていないリアーキテクトで解決 • コードの置き場所のルールを整備 • リファレンス実装の追加(かなり重要) バグの検知がしづらい • TypeScript化で解決 • ユニットテストの実装&方針の変更で解決まとめ

Slide 42

Slide 42 text

© LY Corporation 参考・引用 Yahoo!知恵袋、サービス開始20周年を記念した特集サイトを公開 https://www.lycorp.co.jp/ja/news/release/007875 回答のつかない質問を減らすために https://chiebukuro.yahoo.co.jp/topic/ai/answer.html typescript-eslint https://typescript-eslint.io/ type-fest https://github.com/sindresorhus/type-fest 42

Slide 43

Slide 43 text

Slide 44

Slide 44 text

© LY Corporation 44 Appendix: TypeScriptの導入+α 44 optional propertyを避ける起こり得ない状態を作れないようにするオブジェクトのプロパティを上書きできないようにする以下を利用した。大きな配列やオブジェクトの場合は、eslint-disableする場合もある • @typescript-eslint/prefer-readonly • @typescript-eslint/prefer-readonly-parameter-types • type-festのReadonlyDeep 関数の戻り値の型を明示的にする @typescript-eslint/explicit-function-return-typeを使って、意図せぬ関数の戻り値の型の変更を防ぐために、戻り値の型を書くことを必須にしたバグの検知がしづらい