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.
 アジャイルに力を与え
 共に成長し続ける社会を創る