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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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