Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
0 -> 1でフロントエンドのテストを 書く文化を作っている話
Search
gtnao
October 22, 2023
Programming
2
2.6k
0 -> 1でフロントエンドのテストを 書く文化を作っている話
gtnao
October 22, 2023
Tweet
Share
More Decks by gtnao
See All by gtnao
TROCCO今昔
gtnao
0
290
ClaudeCodeにキレない技術
gtnao
1
1.4k
PaaSとSaaSの境目で信頼性と開発速度を両立する 〜TROCCO®︎のこれまでとこれから〜
gtnao
8
19k
ZetaSQLを使って、 カラムリネージ機能を作った話
gtnao
3
1.9k
Other Decks in Programming
See All in Programming
CSC305 Lecture 02
javiergs
PRO
1
260
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
460
開発生産性を上げるための生成AI活用術
starfish719
1
130
プロダクト開発をAI 1stに変革する〜SaaS is dead時代で生き残るために〜 / AI 1st Product Development
kobakei
0
450
CSC305 Lecture 03
javiergs
PRO
0
230
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
950
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
2.8k
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
870
XP, Testing and ninja testing ZOZ5
m_seki
2
240
WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた
ohmori_yusuke
0
170
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
870
ИИ-Агенты в каждый дом – Алексей Порядин, PythoNN
sobolevn
0
150
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
How to Ace a Technical Interview
jacobian
280
23k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
KATA
mclloyd
32
14k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
It's Worth the Effort
3n
187
28k
Unsuck your backbone
ammeep
671
58k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Transcript
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月 東京都品川区上大崎3丁目1番1号 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!
ご清聴ありがとうございました