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
Using react at Startup
Search
8zca
December 19, 2019
Technology
0
340
Using react at Startup
スタートアップ×React LT大会 Coral Developers Nightで発表したスライドです。
8zca
December 19, 2019
Tweet
Share
More Decks by 8zca
See All by 8zca
APIの意義と向き合い チームで成長した軌跡
8zca
0
33
recoil
8zca
0
120
10min_elixir
8zca
0
37
質問サイトからみる Rubyに関する質問傾向 を調べてみたよ
8zca
0
46
Other Decks in Technology
See All in Technology
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
shigeruoda
5
590
2025-06-26_Lightning_Talk_for_Lightning_Talks
_hashimo2
2
110
Fabric + Databricks 2025.6 の最新情報ピックアップ
ryomaru0825
1
160
CursorによるPMO業務の代替 / Automating PMO Tasks with Cursor
motoyoshi_kakaku
2
800
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.2k
Amazon Bedrockで実現する 新たな学習体験
kzkmaeda
2
680
Beyond Kaniko: Navigating Unprivileged Container Image Creation
f30
0
110
Connect 100+を支える技術
kanyamaguc
0
150
「良さそう」と「とても良い」の間には 「良さそうだがホンマか」がたくさんある / 2025.07.01 LLM品質Night
smiyawaki0820
1
430
Yamla: Rustでつくるリアルタイム性を追求した機械学習基盤 / Yamla: A Rust-Based Machine Learning Platform Pursuing Real-Time Capabilities
lycorptech_jp
PRO
4
170
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
0
480
ビギナーであり続ける/beginning
ikuodanaka
2
250
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Speed Design
sergeychernyshev
32
1k
4 Signs Your Business is Dying
shpigford
184
22k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Building an army of robots
kneath
306
45k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Transcript
スタートアップ×React ってどうなの? スタートアップ×React LT大会 Coral Developers Night 2019/12/19 1
〜2018 2019〜 名前 経歴 2 自己紹介 決済PFのバックエンド
加盟店管理システム プロダクトの開発全般 (以前から副業で手伝っていました) FEエンジニアの方が入ってきたので今はBE を主に開発しています /チームマネジメント もりわきかずや
3 MagicPrice ホテルの予約や市場データ 日々の推奨価格 予約サイトへ反映 ホテルの収益改善を促進するレベニューマネジメントツール
スタートアップにおいて Reactを採用するメリット はどこにあるのか 4
重要なのはPMFすること 5
空の場合 プロダクトが無いと 「非常に困る」40% 6
• しっかり作ってもPMFしなければ無駄になってしまう • 素早く作りFBを得て改善していく ◦ スクラップ&ビルド ◦ プロダクトのクオリティ > コードのクオリティ 7 ジレンマ
• 初期であれば時間をかけずに作るべし • 空の場合は既に2つプロダクトを出しておりMVPとしての機能 は備えていたがPMFはしていると言えない状況 ◦ 料金設定にフォーカスしたプロダクト ◦ 市場分析にフォーカスしたプロダクト 8
MVP
昨年12月に料金設定プロダ クトをリニューアル 9
• モノリシックなRailsアプリケーション ◦ 肥大化するcontroller • 性質上グラフが多くなる ◦ 肥大化するJS, JQuery
◦ JSファイル単位で管理・開発 • 各種更新処理が多様化 ◦ 従来どおりformでsubmitする ◦ ajaxでpostする(APIを作る) 10 抱えていた課題
課題へのアプローチ • SPA化 ◦ モノリシックなプリケーションの保守運用は大変だという のはわかりきっていた • BEはRailsのまま。APIを提供するだけ(BFF的) ◦ Decorator,
Presenter, ViewModel … みたいな概念はフ ロントで持つことでロジックに専念できる ◦ 既存のモジュールを使い回せる • じゃあFEは? 11
開発チーム 12 CPO バックエンド インフラ 業務委託Fさん(週4) バックエンド React少し わたし(週1) バックエンド
Vue少し
Reactにした • Vueはわかりやすい、開発立ち上がりもはやく、ドキュメントも 充実している • 開発貢献では 「Fさん > 週1の自分」 ◦
Reactにしたほうが速度出る 13 ユーザに届ける価値が変わらないならどちらでもよい(もちろん比較はします) 速度が遅くなる=プロダクトリリースが送れる=PMFが遠くなる
その他のメリット • TypeScriptを一緒に導入した ◦ 相性がよい ◦ テストが無くてもビルドの時点でこけるので変更に強い (=影響範囲の特定が楽) • Web
Developer Roadmap • コンポーネント指向、再利用性、パフォーマンス ◦ HTMLは長くてもいいけどコードになると分割しなくちゃと いう気になる(という謎の思考) 14
TypeScript styled-components Redux UIフレームワークは自作 AtomicDesign 15 React Rails nginx MySQL
S3 Redis Elastic Search 構成 よくある構成
16 src/ services/ state/ ducks/ state単位/ views/ components/ atoms/ molecules/
containers/ organisms/ pages/ ディレクトリ構成 定数クラス APIリクエストクラス actions, operations, reducersに分けて管理 organismsとpagesはコンテ ナになるだろうという予想の もと決めた
開発パフォーマンスを出すために • 難しいことはしない ◦ どこでAPIリクエスト投げればよいのか? ▪ middlewareを入れてaction creatorからコールするの が正攻法 ▪
よくわかんなかった… ◦ componentからaxiosで取得しreduxに入れる ▪ accessTokenなどの認証ヘッダはインターセプター ではさみこむ 17
constructor(props: Props) { // … something Api.fetchCompetitor List(year, month) .then(res
=> { if (res) { const list = res.data this.props.competitorListAction (list) } }) .catch(() => { this.setState({ errorStatus: true }) })
開発パフォーマンスを出すために • state管理はOSSから学ぶ ◦ re-ducksパターンを採用 • AtomicDesignの採用 ◦ styled-componentsが便利すぎる ◦
propsで渡さずにコンポーネントを継承して作れる 19 const RoundButton = styled(DefaultButton)` width: 40px; height: 40px; border-radius: 50%; `
失敗 • organismsとpagesがもはやcomponentのレベルに • AtomicDesignは後付け ◦ 先にデザインがあがっていた ◦ 開発効率化のために取り入れたが、同じようで微妙に異 なるパーツが多く無理やり合わせた
◦ 設計段階から協業しましょう • UIはすべて自作 ◦ 時間かかった 20 ココ重要! 実際にユーザに使ってもらえるよう になったのは1月中旬
重要なのはPMFすること 21 コードの保守性は日々の努力で保つ
まとめ • FE/BEが疎結合になり以前より開発しやすい環境をつくれた • Reactを使うメリットはたしかにある ◦ バリバリJS書いてる感もあるし成長実感もある ◦ BEやってた人は合うと思う •
ユーザはReactがどうとか関係ない、プロダクトが全て ◦ ステージにあった選択を 22