Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React Native Matsuri2022
Search
K.Hayashi
October 08, 2022
Programming
0
510
React Native Matsuri2022
menuとStorybook
K.Hayashi
October 08, 2022
Tweet
Share
More Decks by K.Hayashi
See All by K.Hayashi
tech_hills 20220727
kou1127h
0
89
tech_stand #8 2022.06.03
kou1127h
0
460
技育祭2022勉強会資料
kou1127h
0
200
Other Decks in Programming
See All in Programming
OpenTelemetry のサービスという概念について
azukiazusa1
1
380
ONE WEDGE_Company_Information
1wedge
0
160
PHP で読む楽しいコアダンプ
sji
0
240
「コンパイル時のユニットテスト」導入するとユニットテストを 書かなくてよくなるのか?
tomohisa
9
2.1k
Laravel OpenAPIによる"辛くない"スキーマ駆動開発
kentaroutakeda
2
2.1k
OpenAPI を守るのは難しい
ohmori_yusuke
1
140
Honoとhtmx
yusukebe
6
1.2k
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
280
Dockerで始めるAWS Lambda開発
stutkhd0709
13
2.5k
プロンプトエンジニアリング入門
tomokusaba
2
960
【KMC春合宿2024】実装視点で見るNeural Radiance Fields
runningoutrate
0
150
とにかくHTTP3をライトニングに話す / Anyway, I'll talk to Lightning about HTTP3.
seike460
PRO
0
120
Featured
See All Featured
Infographics Made Easy
chrislema
237
18k
Being A Developer After 40
akosma
56
580k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Making the Leap to Tech Lead
cromwellryan
122
8.4k
Embracing the Ebb and Flow
colly
78
4.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
What the flash - Photography Introduction
edds
64
11k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
5
1.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
397
65k
How To Stay Up To Date on Web Technology
chriscoyier
781
250k
Building a Modern Day E-commerce SEO Strategy
aleyda
15
6.3k
Transcript
1 menuとStorybook menu株式会社 林晃一郎 (@yasahhi1127) React Native Matsuri 2022
2 自己紹介
• 林晃一郎(@yasahhi1127) • menu株式会社 ◦ RNでモバイルアプリ開発してます 好きなサラダ →砂肝ともやしナムルのサラダ(WithGreenさん) 座右の銘 →酒は飲んでも飲まれるな
▪自己紹介 3 最近飲まれた飲んだ酒
▪ menu? 4
▪ menu? 5
menuとStorybookとの関わり方の歴史と、これからのStorybookとの付き 合い方について • 前提:Storybookとは • 失敗した歴史 • なぜ今再びチャレンジしているのか? • 具体的な取り組み
◦ 失敗から学んで変えたこと ▪話すこと
7 前提:Storybookとは
https://storybook.js.org/ > Storybook is a frontend workshop for building UI
components and pages in isolation. ▪前提 : Storybookとは
▪前提 : Storybookとは
10 過去の挫折体験
▪過去の挫折体験 2020.06(林入社時)の状況 • storybook自体は動かない(devDependenciesからも消えてる) • なのになぜか.storiesファイルが散在している ◦ 当然メンテされていない
おっ、昔Storybook入れてたんですね! またやりましょうよ! (よく分からんけどStorybookかっこいい) ▪過去の挫折体験 2020.06(林入社時)の状況 あれ結局続かないんだよね。。。 軽い気持ちで提案する林 パイセン
なぜこんなことになってしまったのか、、? ▪過去の挫折体験〜なぜ定着しなかったのか〜
▪過去の挫折体験〜なぜ定着しなかったのか〜 短期的な目標(=機能追加)に比べて優先度が低かった • 目的があやふやで、なんとなくノリで入れていただけだった • 機能追加における超短期的なスピードが重視される風潮 • 責任持ってStorybookを管理する人がいなかった (伝聞や後から振り返った上での推測を含みます)
15 なぜ今、ふたたびStorybookなのか
▪なぜ今、再びStorybookなのか 配達員様向けアプリケーション(以下「クルーアプリ」)で、デザインシステ ムの構築&トンマナの改修 →新しいコンポーネントを大量に作成する必要が生まれた
▪なぜ今、再びStorybookなのか A. コンポーネントの実装とアプリケーションへの反 映の分離をより簡単に行いたい
▪なぜ今、再びStorybookなのか コンポーネント作成の流れ before Storybook 1. コンポーネントを実装する 2. 適当なデバッグ用ページにコンポーネントを置いてみて確認 after Storybook
1. コンポーネントを実装する 2. .storiesファイルを作成し挙動確認
▪なぜ今、再びStorybookなのか デバッグページに置くデメリット • 整理がしづらい ◦ →結局PR通して反映されたコンポーネントはデバッグページから消していた • 機能が少ない ◦ →Storybookと違って、ただ置くだけでプロパティ弄ったりできない
20 具体的な取り組み
▪具体的な取り組み 短期的な目標(=機能追加)に比べて優先度が低かった • 目的があやふやで、なんとなくノリで入れていただけだった • 機能追加における超短期的なスピードが重視される風潮 • 責任持ってStorybookを管理する人がいなかった 過去のこれらの失敗の反省を踏まえて...
▪具体的な取り組み • 機能追加における超短期的なスピードが重視される風潮 →PMたちとコミュニケーションを取って、開発としてやるべきことを理解し てもらう(しかない。。)
▪具体的な取り組み • 目的があやふやで、なんとなくノリで入れていただけだった →「デザインシステムの導入」という明確な目的を持つこと。 加えて、デザインシステム導入完了後も継続するために、今のうちに Storybook前提の開発スタイルを浸透させたい。。
→デザイナーさんたちにStorybookを確認してもらうことで、開発チームの 外から監視してもらう ▪具体的な取り組み • 責任持ってStorybookを管理する人がいなかった
▪具体的な取り組み →chromaticを導入した > Publish your Storybook to a secure cloud
workspace. Stakeholders can review UI easier and give you feedback faster.
▪具体的な取り組み Chromaticで出来ること • Storybookのデプロイ・Githubでの認証など • 差分の確認・UIのレビュー →より気軽にチームにStorybookを共有できる
27 まとめ
▪まとめ これからのmenuとStorybookの向き合い方 • Storybookを使う目的自体を周知すること • アプリ開発チームの外も含めて積極的に巻き込む ◦ 機能追加に並ぶくらい重要であることを理解してもらう • 少しでも工数を減らす工夫を考え続ける
▪採用情報 React Nativeやっていきたいエンジニア募集し てます!!!!!!!! 直接応募 https://open.talentio.com/r/1/c/reazon/pages/25716 カジュアルにもっと内情を知りたい方 • 林のtwitter(@yasahhi1127)にDMください •
テックブログ ◦ https://techblog.reazon.jp/ • SpacialChatにちょっと居ます
30 ありがとうございました!!!