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
生成AIで加速するテスト実装 - ロリポップ for Gamersの事例と 生成AIエディタの活用
Search
kinosuke01
February 16, 2025
Programming
0
130
生成AIで加速するテスト実装 - ロリポップ for Gamersの事例と 生成AIエディタの活用
https://tech.pepabo.com/2025/02/13/gamers-frontend-component-test/
より
kinosuke01
February 16, 2025
Tweet
Share
More Decks by kinosuke01
See All by kinosuke01
カンファレンス登壇資料を毎日読む習慣
kinosuke01
0
88
Notionで作るWebサイト「MuuMuu Sites」の裏側
kinosuke01
0
2.1k
Other Decks in Programming
See All in Programming
Unity Android XR入門
sakutama_11
0
180
コードを読んで理解するko build
bells17
1
110
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
280
Generating OpenAPI schema from serializers throughout the Rails stack - Kyobashi.rb #5
envek
1
390
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
1k
Jasprが凄い話
hyshu
0
170
CDKを使ったPagerDuty連携インフラのテンプレート化
shibuya_shogo
0
110
LINE messaging APIを使ってGoogleカレンダーと連携した予約ツールを作ってみた
takumakoike
0
120
ABEMA iOS 大規模プロジェクトにおける段階的な技術刷新 / ABEMA iOS Technology Upgrade
akkyie
1
200
PEPCは何を変えようとしていたのか
ken7253
3
270
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
8
1.3k
sappoRo.R #12 初心者セッション
kosugitti
0
280
Featured
See All Featured
Producing Creativity
orderedlist
PRO
344
40k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
The Cost Of JavaScript in 2023
addyosmani
47
7.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Building Adaptive Systems
keathley
40
2.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
How STYLIGHT went responsive
nonsquared
98
5.4k
The World Runs on Bad Software
bkeepers
PRO
67
11k
YesSQL, Process and Tooling at Scale
rocio
172
14k
KATA
mclloyd
29
14k
Transcript
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!