バックエンドエンジニアによるフロントエンドテスト拡充の具体的手法

https://fortee.jp/phperkaigi-2025/proposal/45edfee0-50d6-4f79-b93b-d3b444e4c795

2025.03.22 PHPerKaigi 2025 #phperkaigi

Transcript

1. 1 バックエンドエンジニアによる フロントエンドテスト拡充の 具体的⼿法 ロリポップ‧ムームードメイン事業部 きのすけ 2025.03.22
2. 2 ⾃⼰紹介 GMOペパボ ロリポップ‧ムームードメイン事業部 2020年 中途⼊社 きのすけ (西田貴之) • Webアプリケーションエンジニア • バックエンド開発が主でしたが、 最近はフロントエンドもインフラも やっています。 • X(Twitter) : @kinosuke01
3. 3 バックエンドエンジニア主体のチームで フロントエンドテストを最初にどう実装したか 背景
4. 背景 4 マルチプレイが簡単にできるゲーム専⽤レンタルサーバーサービス ロリポップ for Gamers を 2024年にリリース
5. 背景 5 • フロントエンドには、Next.jsを採⽤ • 13営業⽇で初期リリースを実現 ロリポップ for Gamers を 2024年にリリース
6. 背景 6 • みんなバックエンドの経験はあるけれど、 フロントエンドは「なんとなくNext.jsやReactが書ける」くらい プロジェクト初期のメンバー
7. 背景 7 • ユニットテストのみ書く • Reactに強く紐づく表⽰やフックのテストはしない • これで主な挙動はカバーできるだろうと思っていたが、 実際実装してみると課題が浮き彫りになった 初期のフロントエンドテスト
8. 背景 8 １．ボタンをクリックすると ２．wrapText関数を実行した値を valueにセット ３．valueの値を表示 こんなコンポーネントがあるとする
9. 背景 9 こんなコンポーネントがあるとする wrapText関数は、 引数の文字列に、 固定の文字列を連結して返すだけ
10. 背景 10 テストコードを書いてみると... この例ではwrapTextという表⽰補助⽤の関数をテストしているだけ 実際は独⽴した関数がほぼなく、ユニットテストも書けなかった
11. 背景 11 具体的にどんな課題があるか • ボタンをクリックしたときの動作 • 画⾯表⽰の変化 • etc.. といったことを、全くテストできていなかった
12. 12 バックエンドエンジニアが初めて扱う コンポーネントテストの採用 テスト戦略の再考
13. テスト戦略の再考 13 テスト戦略を再考 • testing-libraryを⽤いたコンポーネントテストに重点 • コンポーネントテストとは • Node.jsでメモリ上にコンポーネントをレンダリングし、 イベントを発⽕することで、 DOMにどのような変化が発⽣したかをチェックするテスト
14. テスト戦略の再考 14 なぜコンポーネントテストが最適と考えたか • ビジネスロジックはバックエンドに集約している • フロントエンドはユーザー⼊⼒受付、API発⽕、表⽰切替に専念 • このフロントエンドが専念している機能を確認するのには コンポーネントテストがちょうど良い
15. テスト戦略の再考 15 コンポーネントテストの実装例 １．コンポーネントをレンダリング ２．レンダリングされた要素から buttonを取得してクリックする ３．その後、レンダリングされている要 素が書き換わったかテスト
16. テスト戦略の再考 16 これなら課題解決できそう！ • ボタンをクリックしたときの動作 → OK • 画⾯表⽰の変化 → OK
17. 17 限られた時間内で実現する Cursorを活用したテストコードの実装 実装
18. 実装を進める 18 どのように進めるか • 新機能の開発を継続しながら進める必要があったので • 朝30分の時間確保して、少しずつテスト実装を進める • Cursor(⽣成AIエディタ)を活⽤して効率的に実装
19. 実装を進める 19 Cursorとは • ⽣成AIの⽀援機能を搭載したコードエディタ • プロンプトと既存コードを踏まえて⽣成AIが実装
20. 実装を進める 20 Cursorをどのように使っているか 最近の使い⽅ • cursor/ruleにテストのサンプルコードを記載 • CursorAgentでテストコードを⽣成 • Cursor⾃⾝によるコードレビューと改修 • 出来たものを⼈間がレビュー
21. 実装を進める 21 Cursorをどのように使っているか 最近の使い⽅ • cursor/ruleにテストのサンプルコードを記載 • CursorAgentでテストコードを⽣成 • Cursor⾃⾝によるコードレビューと改修 • 出来たものを⼈間がレビュー この2点について 少しお話したい
22. 実装を進める 22 CursorAgentでテストコードを⽣成 テスト対象となるファイルを指定 Agentモードで、 claude-3.7-sonnetを使用 これでほぼ出来上がる
23. 実装を進める 23 Cursor⾃⾝によるコードレビューと改修 Cursorにコードレビューさせて、⾃⼰改修させる @gitから @PR(Diff with Main Branch) を選択して レビュー依頼のプロンプトを投げる ある程度ブラッシュアップした状態にすることで、 以降に続く⼈間のレビュー負荷を下げる狙い
24. 実装を進める 24 結果 以上の取り組みを経て、まだ数字は低いが、 ほぼ0だったカバレッジが改善されてきた
25. まとめ 25
26. まとめ 26 バックエンドエンジニアによる フロントエンドテスト拡充の具体的⼿法 • コンポーネントテストの理解と採⽤ • 朝の30分時間確保して、少しずつ進める実装 • Cursorを⽤いた効率的なテストコード実装
27. 27 Thank you!