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
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
360
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.9k
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
14
5.9k
為你自己學 Python - 冷知識篇
eddie
1
330
Design Foundational Data Engineering Observability
sucitw
2
130
AIでLINEスタンプを作ってみた
eycjur
1
220
TanStack DB ~状態管理の新しい考え方~
bmthd
2
420
Go言語での実装を通して学ぶLLMファインチューニングの仕組み / fukuokago22-llm-peft
monochromegane
0
110
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
410
旅行プランAIエージェント開発の裏側
ippo012
1
600
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
4
1.8k
Langfuseと歩む生成AI活用推進
licux
3
320
Featured
See All Featured
A Tale of Four Properties
chriscoyier
160
23k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Git: the NoSQL Database
bkeepers
PRO
431
66k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
185
54k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
11
1.1k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Agile that works and the tools we love
rasmusluckow
330
21k
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!