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
350
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
34
recoil
8zca
0
120
10min_elixir
8zca
0
37
質問サイトからみる Rubyに関する質問傾向 を調べてみたよ
8zca
0
46
Other Decks in Technology
See All in Technology
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
6
13k
Claude Code に プロジェクト管理やらせたみた
unson
6
4.5k
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
280
VS CodeとGitHub Copilotで爆速開発!アップデートの波に乗るおさらい会 / Rapid Development with VS Code and GitHub Copilot: Catch the Latest Wave
yamachu
2
150
AI専用のリンターを作る #yumemi_patch
bengo4com
6
4.3k
赤煉瓦倉庫勉強会「Databricksを選んだ理由と、絶賛真っ只中のデータ基盤移行体験記」
ivry_presentationmaterials
2
370
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
170
成長し続けるアプリのためのテストと設計の関係、そして意思決定の記録。
sansantech
PRO
0
130
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
american aa airlines®️ USA Contact Numbers: Complete 2025 Support Guide
aaguide
0
310
Lazy application authentication with Tailscale
bluehatbrit
0
220
shake-upを科学する
rsakata
6
540
Featured
See All Featured
Side Projects
sachag
455
42k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Embracing the Ebb and Flow
colly
86
4.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Become a Pro
speakerdeck
PRO
29
5.4k
Designing Experiences People Love
moore
142
24k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Producing Creativity
orderedlist
PRO
346
40k
Being A Developer After 40
akosma
90
590k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
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