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
260
生成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
1
1.1k
カンファレンス登壇資料を毎日読む習慣
kinosuke01
0
180
Notionで作るWebサイト「MuuMuu Sites」の裏側
kinosuke01
0
2.3k
Other Decks in Programming
See All in Programming
Swift Updates - Learn Languages 2025
koher
2
460
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
20
5.4k
1から理解するWeb Push
dora1998
7
1.8k
RDoc meets YARD
okuramasafumi
4
170
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
430
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
820
Go言語での実装を通して学ぶLLMファインチューニングの仕組み / fukuokago22-llm-peft
monochromegane
0
120
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
1.9k
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.7k
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
6
2.2k
Rancher と Terraform
fufuhu
2
240
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
620
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Building an army of robots
kneath
306
46k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Site-Speed That Sticks
csswizardry
10
810
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Designing Experiences People Love
moore
142
24k
The Language of Interfaces
destraynor
161
25k
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!