Tweet
Tweet

Slide 1

Slide 1 text

1 バックエンドエンジニアによる フロントエンドテスト拡充の 具体的⼿法 ロリポップ‧ムームードメイン事業部 きのすけ 2025.03.22

Slide 2

Slide 2 text

2 ⾃⼰紹介 GMOペパボ ロリポップ‧ムームードメイン事業部 2020年 中途⼊社 きのすけ (西田貴之) ● Webアプリケーションエンジニア ● バックエンド開発が主でしたが、 最近はフロントエンドもインフラも やっています。 ● X(Twitter) : @kinosuke01

Slide 3

Slide 3 text

3 バックエンドエンジニア主体のチームで フロントエンドテストを最初にどう実装したか 背景

Slide 4

Slide 4 text

背景 4 マルチプレイが簡単にできるゲーム専⽤レンタルサーバーサービス ロリポップ for Gamers を 2024年にリリース

Slide 5

Slide 5 text

背景 5 • フロントエンドには、Next.jsを採⽤ • 13営業⽇で初期リリースを実現 ロリポップ for Gamers を 2024年にリリース

Slide 6

Slide 6 text

背景 6 • みんなバックエンドの経験はあるけれど、 フロントエンドは「なんとなくNext.jsやReactが書ける」くらい プロジェクト初期のメンバー

Slide 7

Slide 7 text

背景 7 • ユニットテストのみ書く • Reactに強く紐づく表⽰やフックのテストはしない • これで主な挙動はカバーできるだろうと思っていたが、 実際実装してみると課題が浮き彫りになった 初期のフロントエンドテスト

Slide 8

Slide 8 text

背景 8 １．ボタンをクリックすると ２．wrapText関数を実行した値を valueにセット ３．valueの値を表示 こんなコンポーネントがあるとする

Slide 9

Slide 9 text

背景 9 こんなコンポーネントがあるとする wrapText関数は、 引数の文字列に、 固定の文字列を連結して返すだけ

Slide 10

Slide 10 text

背景 10 テストコードを書いてみると... この例ではwrapTextという表⽰補助⽤の関数をテストしているだけ 実際は独⽴した関数がほぼなく、ユニットテストも書けなかった

Slide 11

Slide 11 text

背景 11 具体的にどんな課題があるか • ボタンをクリックしたときの動作 • 画⾯表⽰の変化 • etc.. といったことを、全くテストできていなかった

Slide 12

Slide 12 text

12 バックエンドエンジニアが初めて扱う コンポーネントテストの採用 テスト戦略の再考

Slide 13

Slide 13 text

テスト戦略の再考 13 テスト戦略を再考 • testing-libraryを⽤いたコンポーネントテストに重点 • コンポーネントテストとは • Node.jsでメモリ上にコンポーネントをレンダリングし、 イベントを発⽕することで、 DOMにどのような変化が発⽣したかをチェックするテスト

Slide 14

Slide 14 text

テスト戦略の再考 14 なぜコンポーネントテストが最適と考えたか • ビジネスロジックはバックエンドに集約している • フロントエンドはユーザー⼊⼒受付、API発⽕、表⽰切替に専念 • このフロントエンドが専念している機能を確認するのには コンポーネントテストがちょうど良い

Slide 15

Slide 15 text

テスト戦略の再考 15 コンポーネントテストの実装例 １．コンポーネントをレンダリング ２．レンダリングされた要素から buttonを取得してクリックする ３．その後、レンダリングされている要 素が書き換わったかテスト

Slide 16

Slide 16 text

テスト戦略の再考 16 これなら課題解決できそう！ • ボタンをクリックしたときの動作 → OK • 画⾯表⽰の変化 → OK

Slide 17

Slide 17 text

17 限られた時間内で実現する Cursorを活用したテストコードの実装 実装

Slide 18

Slide 18 text

実装を進める 18 どのように進めるか • 新機能の開発を継続しながら進める必要があったので • 朝30分の時間確保して、少しずつテスト実装を進める • Cursor(⽣成AIエディタ)を活⽤して効率的に実装

Slide 19

Slide 19 text

実装を進める 19 Cursorとは • ⽣成AIの⽀援機能を搭載したコードエディタ • プロンプトと既存コードを踏まえて⽣成AIが実装

Slide 20

Slide 20 text

実装を進める 20 Cursorをどのように使っているか 最近の使い⽅ • cursor/ruleにテストのサンプルコードを記載 • CursorAgentでテストコードを⽣成 • Cursor⾃⾝によるコードレビューと改修 • 出来たものを⼈間がレビュー

Slide 21

Slide 21 text

実装を進める 21 Cursorをどのように使っているか 最近の使い⽅ • cursor/ruleにテストのサンプルコードを記載 • CursorAgentでテストコードを⽣成 • Cursor⾃⾝によるコードレビューと改修 • 出来たものを⼈間がレビュー この2点について 少しお話したい

Slide 22

Slide 22 text

実装を進める 22 CursorAgentでテストコードを⽣成 テスト対象となるファイルを指定 Agentモードで、 claude-3.7-sonnetを使用 これでほぼ出来上がる

Slide 23

Slide 23 text

実装を進める 23 Cursor⾃⾝によるコードレビューと改修 Cursorにコードレビューさせて、⾃⼰改修させる @gitから @PR(Diff with Main Branch) を選択して レビュー依頼のプロンプトを投げる ある程度ブラッシュアップした状態にすることで、 以降に続く⼈間のレビュー負荷を下げる狙い

Slide 24

Slide 24 text

実装を進める 24 結果 以上の取り組みを経て、まだ数字は低いが、 ほぼ0だったカバレッジが改善されてきた

Slide 25

Slide 25 text

まとめ 25

Slide 26

Slide 26 text

まとめ 26 バックエンドエンジニアによる フロントエンドテスト拡充の具体的⼿法 • コンポーネントテストの理解と採⽤ • 朝の30分時間確保して、少しずつ進める実装 • Cursorを⽤いた効率的なテストコード実装

Slide 27

Slide 27 text

27 Thank you!