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
140
生成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
91
Notionで作るWebサイト「MuuMuu Sites」の裏側
kinosuke01
0
2.1k
Other Decks in Programming
See All in Programming
Boost Your Web Performance with Hyperdrive
chimame
1
130
iOSでQRコード生成奮闘記
ktcryomm
2
140
Amazon Bedrockマルチエージェントコラボレーションを諦めてLangGraphに入門してみた
akihisaikeda
1
170
Swift Testingのモチベを上げたい
stoticdev
2
220
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
300
Expoによるアプリ開発の現在地とReact Server Componentsが切り開く未来
yukukotani
2
250
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
210
Your Architecture as a Crime Scene:Forensic Analysis @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
120
Lambdaの監視、できてますか?Datadogを用いてLambdaを見守ろう
nealle
2
820
Rubyと自由とAIと
yotii23
6
1.9k
The Price of Micro Frontends… and Your Alternatives @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
230
複数のAWSアカウントから横断で 利用する Lambda Authorizer の作り方
tc3jp
0
130
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
693
190k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Side Projects
sachag
452
42k
What's in a price? How to price your products and services
michaelherold
244
12k
Statistics for Hackers
jakevdp
797
220k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
115
51k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7.1k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Scaling GitHub
holman
459
140k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
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!