Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Avatar for yut yut
July 04, 2025

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

Avatar for yut

yut

July 04, 2025
Tweet

More Decks by yut

Other Decks in Technology

Transcript

  1. 2 KDDI Agile Development Center Corporation 目次 • 自己紹介 •

    話すこと・話さないこと • UI調整の状況 • Storybook • StorybookとCopilot Agent • 結果
  2. 3 KDDI Agile Development Center Corporation 自己紹介 近藤悠斗(yut) • KDDIアジャイル開発センター株式会社

    2025新卒 • Platform Engineering Kaigi 運営 • 技術スタック ◦ Kubernetes ◦ Ansible ◦ AWS https://x.com/yut_720
  3. 4 KDDI Agile Development Center Corporation 話すこと・話さないこと • 話すこと ◦

    StorybookとGithub Copilotが相性良いよって話 ◦ エンジニアとデザイナーがStorybookで連携できた話 • 話さないこと ◦ 具体的なやり方の話 • Qiita記事になってます • https://qiita.com/yu_720/items/62769dd4e5e12e022b63 • (いいねよろしくお願いします!)
  4. 5 KDDI Agile Development Center Corporation チーム開発でのUI調整の状況 WebアプリケーションのUI調整のとき Reactを編集して UI調整

    スクリーンショット デザイナーさんに確認 正にアジャイル!!! だけど... エンジニア「プログラムを修正してスクリーンショットを撮るのが面倒」 デザイナー「UIの調整のためにわざわざ聞かないといけないのは面倒」
  5. 7 KDDI Agile Development Center Corporation Storybook 何をすれば導入できる? tsx(jsx)を使用してstoryを記述する →

    • TSに慣れていないエンジニアは 記述できない • storyの保守コストが生まれる Github Copilotと組み合わせること でこれらが解決できるかも...!
  6. 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を上手く扱うためには...
  7. 9 KDDI Agile Development Center Corporation 結果 Github Copilotによってほぼプログラムを書くこと無しにStoryを構築できている! •

    コンテナ・プレゼンテーションパターンにするた めのプロンプト ◦ 「EchoComponent.tsxをコンテナ・プレゼ ンテーションパターンにしてください」 • Storyを作成するためのプロンプト ◦ 「EchoComponent.tsxのstoryだけを storiesに作成してください。argTypesも 定義してください。」
  8. 10 KDDI Agile Development Center Corporation 結果 もともとのStorybook導入のコスト • TSに慣れていないエンジニアは記述できない

    ◦ CopilotによってほぼStoryのコードの記述は不要 • storyの保守コストが生まれる ◦ 更新があれば改めてCopilotに聞くことで修正可能 CopilotとStorybookによってUIの修正が高速に!
  9. 11 KDDI Agile Development Center Corporation UI調整の状況(Storybook導入後) WebアプリケーションのUI調整のとき Reactを編集して UI調整

    StorybookでUIの確認 デザイナー「実物のUIを直接操作できるから確認しやすい」 エンジニア「propsについて変更指示が来るから、修正箇所がわかりやすい」