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