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
110
生成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
85
Notionで作るWebサイト「MuuMuu Sites」の裏側
kinosuke01
0
2.1k
Other Decks in Programming
See All in Programming
もう僕は OpenAPI を書きたくない
sgash708
5
1.9k
CloudNativePGを布教したい
nnaka2992
0
110
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
250
Djangoにおける複数ユーザー種別認証の設計アプローチ@DjangoCongress JP 2025
delhi09
PRO
4
460
Django NinjaによるAPI開発の効率化とリプレースの実践
kashewnuts
1
250
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
140
「個人開発マネタイズ大全」が教えてくれたこと
bani24884
1
160
ML.NETで始める機械学習
ymd65536
0
230
未経験でSRE、はじめました! 組織を支える役割と軌跡
curekoshimizu
1
140
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
260
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1.1k
color-scheme: light dark; を完全に理解する
uhyo
7
490
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Faster Mobile Websites
deanohume
306
31k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
640
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Gamification - CAS2011
davidbonilla
80
5.2k
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!