0 -> 1でフロントエンドのテストを 書く文化を作っている話

Transcript

1. 0 -> 1でフロントエンドのテストを
   書く文化を作っている話
   #組織拡大と共に発生するソフトウェア品質の課題と裏話LT@目黒
   2023.10.20 primeNumber Inc.
   

   View Slide

2. ©primeNumber Inc.
   2
   中根 直孝
   WHO AM I?
   株式会社primeNumber
   イネーブリングチーム(来月から)
   経歴
   2017：新卒でWebエンジニアのキャリアをスタート
   2018/11：primeNumberにジョイン(trocco®のローン
   チとほぼ同時期)
   趣味/好きなもの
   音楽/ギター、サウナ、飲酒、
   辛いもの(最近はCoCo壱20辛)
   SNSなど
   X: @gtnao, GitHub: @gtnao0219
   1

   

   View Slide

3. 会社概要
   会社名
   代表
   創業
   Office
   COMPANY
   株式会社primeNumber
   代表取締役CEO 田邊 雄樹
   2015年11月
   東京都品川区上大崎３丁目１番１号
   JR東急目黒ビル5F
   3
   

   View Slide

4. あらゆるデータを、
   ビジネスの力に変える。
   primeNumberは、データテクノロジーカンパニー。
   あらゆるデータが爆発的に増えていく時代に、
   誰もがすばやく、簡単にデータを使える環境を構築し、
   データ活用までのプロセスを最適化。
   高度なテクノロジーと独自のアイデアで、
   世界中のビジネスを支援します。
   V I S I O N
   4
   

   View Slide

5. ©primeNumber Inc.
   trocco®とは
   A B O U T
   5
   

   View Slide

6. ©primeNumber Inc.
   6
   trocco®とは
   trocco®とは、データ統合を自動化し、データエンジニアリングにかかる工数を削減するSaaSです。
   データをビジネスに活用するまでのステップ
   「データ統合」を自動化し、データエンジニアリングにかかる工数を削減
   

   View Slide

7. ©primeNumber Inc.
   7
   trocco®とは
   デモ動画URL：https://trocco.io/lp/index.html
   

   View Slide

8. ©primeNumber Inc.
   8
   trocco®とは
   フルマネージド ETL/ELT
   日本特有のサービスを含めた、約100種のコネクタに対応
   データ分析基盤のための技術スタックを提供するサービスです。
   GUI ワークフロー
   複雑なデータ処理フローを GUI 上で設定・運用
   データマネジメント機能
   データリネージ / Git 連携・コード管理 / スキーマ追従 /
   データカタログ etc.
   

   View Slide

9. ©primeNumber Inc.
   9
   ● trocco®はローンチから5年のSaaS
   ● ありがたいことのお客様は増加の一途
   ● 当たり前のように負債も蓄積
   ● 当時、品質改善PJT（仮）が発足
   ● 改善したい点を上げ出したら、朝まで飲めるが…
   背景
   何からやっていけばいいんや…
   

   View Slide

10. ©primeNumber Inc.
    あれ、フロントエンドって
    全然テスト書かれてなくね？
    10
    

    View Slide

11. ©primeNumber Inc.
    11
    ● 現状ではサーバーサイド/クラウドインフラが得意なエンジニアが
    どちらかというと多い組織
    ○ かくいう私も専門ではない
    ● サービスの特性としても、データ処理の部分がクリティカルであ
    り、フロントエンドは二の次になりやすい
    ● とはいえ、お客様が直接触る箇所
    ● フロントエンド起因の不具合も当然ある
    背景
    

    View Slide

12. ©primeNumber Inc.
    CTO鈴木
    「このPJTが成功したらどんなタイトルで
    発表するかから決めましょう」
    12
    

    View Slide

13. ©primeNumber Inc.
    13
    ● PJTメンバーだけでテストを拡充していってもいいが…
    ● 至極当たり前のこのサイクルを皆がフロントエンドでもできるように
    ● 「0 -> 1でフロントエンドのテストを書く文化を作った話」
    ● 最近流行ってるから「FrontendTestEnabling」PJTに改名
    ○ 乗るしかない
    背景
    既存のrspecがコケる
    新機能実装
    テスト/実装を修正
    

    View Slide

14. ©primeNumber Inc.
    イネーブリング
    やっていき！
    14
    

    View Slide

15. ©primeNumber Inc.
    15
    ● ところで、フロントエンドのテストって何を書けばいいの？
    ○ 条件に応じてコンポーネントが表示/非表示されるか？
    ○ フォーム周りの挙動？
    ○ APIリクエスト？
    ○ VisualRegression？
    ○ etc…（巷には綺麗なサンプルが溢れているが…）
    ● 原点に立ち戻る
    方針
    Q: 手っ取り早く皆がテストに触れるには？
    

    View Slide

16. ©primeNumber Inc.
    A: テストを落とす
    16
    

    View Slide

17. ©primeNumber Inc.
    17
    ● 何か新しいフィールドを追加すると基本落ちる
    ● 落ちたままだとよからぬバグに繋がる可能性が高い
    ○ バリデーション表示のテストなどは見送った
    （後述）。最悪サーバーで弾かれるため
    ● このテストを各ページに60点レベルでひたすら追加
    していく
    ○ 「0 -> 1でReact書くのは厳しいけど、ちょっ
    と修正するだけなら」といった人も多いので
    テストファイルがあることが重要
    ● まずはPJTメンバーで書いたテストのPRを、PJT外
    のメンバーにレビューアサインし、「こんな感じ
    ね」と知ってもらう
    方針
    フォームに値を入力
    保存ボタンを押下
    想定通りの
    HTTPリクエストボディ
    が送信されることを確認
    ✅
    

    View Slide

18. ©primeNumber Inc.
    18
    方針
    コード例
    ※ 簡略化してます
    

    View Slide

19. ©primeNumber Inc.
    あとはやるだけ！
    …
    と思いきや
    19
    

    View Slide

20. ©primeNumber Inc.
    20
    ● データ転送の元/先が現在計100種類以上存在
    し、それぞれに固有のフォームがある
    ● 人海戦術でやるにも流石に限度が…
    問題①
    コネクター多すぎ問題
    コネクター多すぎ問題
    自動化したいよ〜
    

    View Slide

21. ©primeNumber Inc.
    TSコンパイラを使ってみる
    21
    

    View Slide

22. ©primeNumber Inc.
    22
    ● TSコンパイラAPIに各フォームのファイルを渡してASTに変換
    ● どのようなフィールドがフォームに存在するか、自動で抽出できる
    ○ それでも足りない情報は自サービスをスクレイピングという荒技
    ● それを元にテストファイルを自動生成して手直し
    ● まだ書ききれていないが、約80/100コネクターほどは対応完了！
    問題①
    

    View Slide

23. ©primeNumber Inc.
    23
    ● 外部パッケージにESModuleが使われている場合の対策をあれこれしたら激遅になって
    しまった
    ○ ESModuleFirstなvitestへの乗り換え
    ○ 幸い、既存テストが少なかったので楽だった
    ● MonacoEditorなど特定のコンポーネントを使ってるページで激遅に
    ○ 最終的にテストでは生のtextareaなどにモックするように
    ○ 特定に時間がかかった（操作関係なく存在するだけで影響したため）
    ● それでもまだ厳しい
    ○ PJTメンバーのCI職人にチューニングしてもらう
    ○ （あんまりやりたくなかったが）余分なケースを減らす
    ■ 前述のバリデーションなど
    問題②
    CI速度低下問題
    

    View Slide

24. ©primeNumber Inc.
    24
    ● RTLは要素の取得にはa11yを考慮した方法を使いましょうという思想だが…
    ○ 現実はそんなに甘くない（海外のデータ系のSaaSを見てもdata-testid振ってい
    た）
    ○ react-hook-formを使っており、各種フィールドにはname属性が付与されている
    ことが多かったのでそれを利用
    ○ 使ってない箇所は今回テストのためだけに属性を追加
    ● z-index対策からか、モーダルのコンポーネントをReact.createPortalで階層外にレン
    ダーしていた
    ○ モーダル内にある要素の操作方法が他と異なる
    ● etc…（上げるとキリがないのでまたの機会に）
    問題③
    その他の諸問題
    

    View Slide

25. ©primeNumber Inc.
    25
    ● 1週間のPRのうち、フロントエン
    ドのファイルに変更があるPRに
    テストが書かれているか
    ● trocco®(転送元GitHub)で取得
    ○ 一部温もりのある手作業で
    フィルタリング
    ● 週によって母数がまちまちに…
    ○ 指標としては微妙だった
    ふりかえり
    

    View Slide

26. ©primeNumber Inc.
    26
    ふりかえり
    Before After
    ● 特にテストファイル数が大幅に増加
    ○ ケース数は意外とあったが、対象ファイルが16ファイルしかなかった
    ○ Reactコンポーネントのテストではなく、ほとんどがutil関数に対するテストだった
    

    View Slide

27. ©primeNumber Inc.
    27
    ● jsパッケージのDependabotのマージが気軽にできるようになった
    ● テストを書いてたら既にあったバグを発見
    ● テスト書いてくれる人が増えた
    ○ 何かしらテストを追加してくれた方が0ベースから10人超え
    ○ 業務委託など社外の方々も書いてくれている
    ○ 「来月ここら辺いじる予定だから、先にテストのPR出しておくわ〜」
    とかも
    ● 来月からフロントエンドに限らないイネーブリングチームが正式に誕生
    ふりかえり
    良かったこと
    

    View Slide

28. ©primeNumber Inc.
    28
    ● 成果を定量化するのが難しい
    ● まだまだ浸透しているとは言い難い
    ○ 実装自体が結構バラバラで抽象化しづらい
    ■ このページはこの書き方をしないと〜、とかがある
    ○ 落ちたときのエラーメッセージが非自明で分かりにくい
    ■ デバッグTipsドキュメント整備中
    ● フォームの入力→APIリクエスト以外のテストケースの拡充もしたい
    ● そもそもプロダクトコードをリファクタリングしていきたい
    ○ テストがほとんどなかった時代に比べてハードルが下がった
    ふりかえり
    反省点とこれから
    

    View Slide

29. ©primeNumber Inc.
    29
    ● trocco®を一緒に創ってくれる方を探しています
    ○ エンジニアのドメイン知識が活かせるSaaS
    ■ 社内利用のドッグフーディングも活発
    ○ 海外展開も進行中
    ○ Hotなデータエンジニアリングの知識も身につくかも
    ● 色々なポジションで募集中です
    ○ ソフトウェアエンジニア
    ○ SRE
    ○ QAエンジニア
    ○ ソフトウェアエンジニア（イネーブリングチーム）
    ○ 詳しくはこちらから
    ■ https://herp.careers/v1/primenumber/requisition-groups/b258370f-
    bf7b-4358-9631-d53f51decef6
    We Are Hiring!
    

    View Slide

30. ご清聴ありがとうございました
    

    View Slide