1 ⽣成AIで加速するテスト実装 ロリポップ for Gamersの事例と⽣成AIエディタの活⽤ ホスティング事業部 kinosuke01 (⻄⽥貴之) 2025.02

⾃⼰紹介 2 • 名前： kinosuke01 (本名: ⻄⽥) • 所属： GMOペパボ ホスティング事業部 • 職種： Webアプリケーションエンジニア • チームでわいわい仕事しています。 モノの構造を知ることが好きです。 Xでは⽇々学んだことをアウトプットしています。 ⾃⼰紹介

背景と課題 3 ロリポップ for Gamers を 2024年にリリース VPSをベースに「ゲームのマルチプレイが簡単にできる環境」を提供 背景と課題 (1)

背景と課題 4 • 急速なサービス⽴ち上げ • プロジェクト⽴ち上げから13営業⽇で初期リリース • フロントエンドテストの現状 • 単純なユニットテストのみ実装 • 不⾜していたテスト内容 • ユーザー操作（ボタンのクリックなど）で何が起こるか • APIリクエストの成功/失敗処理 • UIの更新状態 背景と課題 (2)

テスト戦略の再考 5 • コンポーネントテストへのシフト • メモリ上にコンポーネントをレンダリングし、イベントを発⽕することで、DOMにどの ような変化が発⽣したかをチェックするテスト • Testing Library と Vitest を活⽤ • 重視すべきポイント • ユーザーのアクション検証 • API挙動のモックによるテスト • 画⾯表⽰のリアルタイムな確認 テスト戦略の再考

⽣成AIエディタの活⽤ 6 • ⽣成AIエディタを利⽤してテストコード⽣成を⾃動化 • 効率的にテストコードの拡充が可能に • 主な流れ • コンポーネントに `data-testid` を付与 • 対象のコードと周辺情報(=コンテキスト)を提供 • プロンプトでテストコード⽣成を指⽰ • 補⾜ • この事例ではCursorを利⽤。 • おそらく、Github Copilotでも同じことができるはず..！！ ⽣成AIエディタの活⽤

⽣成AIエディタ活⽤の具体プロセス 7 1. 前準備 • 前準備として data-testid(テストに⽤いるタグの識別⼦)を付与 • 以下のようなプロンプトで⽣成する ⽣成AIエディタ活⽤の具体プロセス '@testing-library/react', 'vitest' を使⽤して、 コンポーネントのテストを書きたいです。 まずは xxx.tsx に data-testid を付与してください。

⽣成AIエディタ活⽤の具体プロセス 8 2. コンテキストの投⼊ • テスト対象となるコードと、 関連するコードを コンテキストとして追加する ⽣成AIエディタ活⽤の具体プロセス

⽣成AIエディタ活⽤の具体プロセス 9 3. プロンプトによる⽣成指⽰ • 以下のプロンプトを使ってテストコードを作成。 ⽣成AIエディタ活⽤の具体プロセス '@testing-library/react', 'vitest' を使⽤して、コンポーネントのテストを書いてくだ さい。テストのファイルは xxx.test.tsx としてください。なお、hook は以下の例の ように、xxxApi のメソッドをモックするようにしてください。 // ここに例となるコードを記載 • 補⾜：例となるコードは直接プロンプトに書き込んだ⽅が、 意図したコードになりやすかった。

⽣成AIエディタ活⽤の具体プロセス 10 4. チューニング • ⽣成したテストケースが不⼗分だと感じるときもある。 • 以下のプロンプトを⽤いてチューニングする。 ⽣成AIエディタ活⽤の具体プロセス では、この出⼒を60点とします。60点とした時に100点とはどのようなものです か？ 100点にするために⾜りないものを列挙した後に、100点の答えを⽣成してく ださい。

成果と効果 11 迅速なテストコード⽣成 • ⼿直しがほとんど不要なコードが得られた • もりもりテストを⽣成できた 成果と効果

残された課題 12 • Cursorに与えるコンテキストを⼈⼒で選択している • これを⽣成AIがうまく拾えるようにしたい 残された課題

まとめ 13 • 課題：急速な開発によるテスト不⾜ • 対策：コンポーネントテストへのシフト • ⼿段：Cursorを活⽤したテストコード⾃動⽣成 • 成果：効率的なテスト構築と品質向上 • 展望：コンテキスト選択の⾃動化 まとめ

14 Thank you!