React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法

https://yumemi.connpass.com/event/356693/

Transcript

1. React開発にStorybookと Copilotを導入して、爆速でUIを 編集・確認する方法 
 2025.07.04 
 KDDIアジャイル開発センター株式会社
 近藤悠斗

2. 2 KDDI Agile Development Center Corporation 目次
 • 自己紹介
 • 話すこと・話さないこと 
 • UI調整の状況 
 • Storybook 
 • StorybookとCopilot Agent 
 • 結果

3. 3 KDDI Agile Development Center Corporation 自己紹介
 近藤悠斗（yut） • KDDIアジャイル開発センター株式会社 2025新卒 • Platform Engineering Kaigi 運営 • 技術スタック ◦ Kubernetes ◦ Ansible ◦ AWS https://x.com/yut_720
4. 4 KDDI Agile Development Center Corporation 話すこと・話さないこと 
 • 話すこと
 ◦ StorybookとGithub Copilotが相性良いよって話 
 ◦ エンジニアとデザイナーがStorybookで連携できた話 
 
 • 話さないこと 
 ◦ 具体的なやり方の話
 • Qiita記事になってます
 • https://qiita.com/yu_720/items/62769dd4e5e12e022b63 
 • (いいねよろしくお願いします！) 

5. 5 KDDI Agile Development Center Corporation チーム開発でのUI調整の状況 
 WebアプリケーションのUI調整のとき
 Reactを編集して UI調整 スクリーンショット デザイナーさんに確認 正にアジャイル！！！ だけど... エンジニア「プログラムを修正してスクリーンショットを撮るのが面倒」 デザイナー「 UIの調整のためにわざわざ聞かないといけないのは面倒」
6. 6 KDDI Agile Development Center Corporation Storybook 
 UIコンポーネントとページを個別に構 築するための
 「UIカタログ」 
 を構築できるツール
 GUIを使用して調整できる→

7. 7 KDDI Agile Development Center Corporation Storybook 
 何をすれば導入できる？
 tsx(jsx)を使用してstoryを記述する→ 
 
 • TSに慣れていないエンジニアは記 述できない
 • storyの保守コストが生まれる 
 
 
 Github Copilotと組み合わせること でこれらが解決できるかも ...！
8. 8 KDDI Agile Development Center Corporation StorybookとCopilot Agent 
 • コンテナ・プレゼンテーションパターンであること 
 ◦ https://www.patterns.dev/react/presentational-container-pattern/ 
 ◦ ファイルをロジックと描画に分割し、描画内容をロジックからpropsで渡す 
 ◦ 描画に対してStoryからpropsを渡すと、自由なUIを表現できる 
 
 
 
 • Storyファイルを作成できること
 ◦ 描画部分に引数を渡すようにStoryを作成する必要がある 
 →ロジックと描画を分割すれば良い →Github Copilotに指示できる！ →TSならば型によって渡すものが明確になっている →Github Copilotに指示できる！ Storybookを上手く扱うためには...

9. 9 KDDI Agile Development Center Corporation 結果
 Github Copilotによってほぼプログラムを書くこと無しにStoryを構築できている！ 
 • コンテナ・プレゼンテーションパターンにするためのプロ ンプト ◦ 「EchoComponent.tsxをコンテナ・プレゼンテー ションパターンにしてください」 
 
 
 • Storyを作成するためのプロンプト 
 ◦ 「EchoComponent.tsxのstoryだけをstoriesに 作成してください。argTypesも定義してくださ い。」

10. 10 KDDI Agile Development Center Corporation 結果
 もともとのStorybook導入のコスト
 • TSに慣れていないエンジニアは記述できない
 ◦ CopilotによってほぼStoryのコードの記述は不要 
 
 • storyの保守コストが生まれる
 ◦ 更新があれば改めてCopilotに聞くことで修正可能 
 CopilotとStorybookによってUIの修正が高速に！
11. 11 KDDI Agile Development Center Corporation UI調整の状況(Storybook導入後) 
 WebアプリケーションのUI調整のとき
 Reactを編集して UI調整 StorybookでUIの確認 デザイナー「実物のUIを直接操作できるから確認しやすい」 
 エンジニア「propsについて変更指示が来るから、修正箇所がわかりやすい」
12. 12 KDDI Agile Development Center Corporation 再掲
 今回のLTの内容を実際に試してみたい方へ 
 https://qiita.com/yu_720/items/62769dd4e5e12e022b63
13. Be a Change Leader.
 アジャイルに力を与え
 共に成長し続ける社会を創る