React Native Matsuri2022

menuとStorybook

Transcript

1. 1 menuとStorybook menu株式会社　林晃一郎 (@yasahhi1127) React Native Matsuri 2022
2. 2 自己紹介
3. • 林晃一郎（@yasahhi1127） • menu株式会社 ◦ RNでモバイルアプリ開発してます 好きなサラダ →砂肝ともやしナムルのサラダ（WithGreenさん） 座右の銘 →酒は飲んでも飲まれるな ▪自己紹介 3 最近飲まれた飲んだ酒
4. ▪ menu? 4
5. ▪ menu? 5
6. menuとStorybookとの関わり方の歴史と、これからのStorybookとの付き 合い方について • 前提：Storybookとは • 失敗した歴史 • なぜ今再びチャレンジしているのか？ • 具体的な取り組み ◦ 失敗から学んで変えたこと ▪話すこと
7. 7 前提：Storybookとは
8. https://storybook.js.org/ > Storybook is a frontend workshop for building UI components and pages in isolation. ▪前提 : Storybookとは
9. ▪前提 : Storybookとは
10. 10 過去の挫折体験
11. ▪過去の挫折体験 2020.06（林入社時）の状況 • storybook自体は動かない（devDependenciesからも消えてる） • なのになぜか.storiesファイルが散在している ◦ 当然メンテされていない
12. おっ、昔Storybook入れてたんですね！ またやりましょうよ！ （よく分からんけどStorybookかっこいい） ▪過去の挫折体験 2020.06（林入社時）の状況 あれ結局続かないんだよね。。。 軽い気持ちで提案する林 パイセン
13. なぜこんなことになってしまったのか、、？ ▪過去の挫折体験〜なぜ定着しなかったのか〜
14. ▪過去の挫折体験〜なぜ定着しなかったのか〜 短期的な目標（＝機能追加）に比べて優先度が低かった • 目的があやふやで、なんとなくノリで入れていただけだった • 機能追加における超短期的なスピードが重視される風潮 • 責任持ってStorybookを管理する人がいなかった （伝聞や後から振り返った上での推測を含みます）
15. 15 なぜ今、ふたたびStorybookなのか
16. ▪なぜ今、再びStorybookなのか 配達員様向けアプリケーション（以下「クルーアプリ」）で、デザインシステ ムの構築＆トンマナの改修 →新しいコンポーネントを大量に作成する必要が生まれた
17. ▪なぜ今、再びStorybookなのか A. コンポーネントの実装とアプリケーションへの反 映の分離をより簡単に行いたい
18. ▪なぜ今、再びStorybookなのか コンポーネント作成の流れ before Storybook 1. コンポーネントを実装する 2. 適当なデバッグ用ページにコンポーネントを置いてみて確認 after Storybook 1. コンポーネントを実装する 2. .storiesファイルを作成し挙動確認
19. ▪なぜ今、再びStorybookなのか デバッグページに置くデメリット • 整理がしづらい ◦ →結局PR通して反映されたコンポーネントはデバッグページから消していた • 機能が少ない ◦ →Storybookと違って、ただ置くだけでプロパティ弄ったりできない
20. 20 具体的な取り組み
21. ▪具体的な取り組み 短期的な目標（＝機能追加）に比べて優先度が低かった • 目的があやふやで、なんとなくノリで入れていただけだった • 機能追加における超短期的なスピードが重視される風潮 • 責任持ってStorybookを管理する人がいなかった 過去のこれらの失敗の反省を踏まえて...
22. ▪具体的な取り組み • 機能追加における超短期的なスピードが重視される風潮 →PMたちとコミュニケーションを取って、開発としてやるべきことを理解し てもらう（しかない。。）
23. ▪具体的な取り組み • 目的があやふやで、なんとなくノリで入れていただけだった →「デザインシステムの導入」という明確な目的を持つこと。 加えて、デザインシステム導入完了後も継続するために、今のうちに Storybook前提の開発スタイルを浸透させたい。。
24. →デザイナーさんたちにStorybookを確認してもらうことで、開発チームの 外から監視してもらう ▪具体的な取り組み • 責任持ってStorybookを管理する人がいなかった
25. ▪具体的な取り組み →chromaticを導入した > Publish your Storybook to a secure cloud workspace. Stakeholders can review UI easier and give you feedback faster.
26. ▪具体的な取り組み Chromaticで出来ること • Storybookのデプロイ・Githubでの認証など • 差分の確認・UIのレビュー →より気軽にチームにStorybookを共有できる
27. 27 まとめ
28. ▪まとめ これからのmenuとStorybookの向き合い方 • Storybookを使う目的自体を周知すること • アプリ開発チームの外も含めて積極的に巻き込む ◦ 機能追加に並ぶくらい重要であることを理解してもらう • 少しでも工数を減らす工夫を考え続ける
29. ▪採用情報 React Nativeやっていきたいエンジニア募集し てます！！！！！！！！ 直接応募 https://open.talentio.com/r/1/c/reazon/pages/25716 カジュアルにもっと内情を知りたい方 • 林のtwitter(@yasahhi1127)にDMください • テックブログ ◦ https://techblog.reazon.jp/ • SpacialChatにちょっと居ます
30. 30 ありがとうございました！！！