Using react at Startup

スタートアップ×React LT大会 Coral Developers Nightで発表したスライドです。

Transcript

1. スタートアップ×React ってどうなの？ スタートアップ×React LT大会 Coral Developers Night 
 2019/12/19
 1
2. 〜2018
 
 
 2019〜
 名前
 経歴
 2 自己紹介 決済PFのバックエンド 
 加盟店管理システム 
 プロダクトの開発全般 
 （以前から副業で手伝っていました） 
 FEエンジニアの方が入ってきたので今はBE を主に開発しています 
 /チームマネジメント 
 もりわきかずや

3. 3 MagicPrice ホテルの予約や市場データ 日々の推奨価格 予約サイトへ反映 ホテルの収益改善を促進するレベニューマネジメントツール
4. スタートアップにおいて Reactを採用するメリット はどこにあるのか 4
5. 重要なのはPMFすること 5
6. 空の場合 プロダクトが無いと 「非常に困る」40% 6
7. • しっかり作ってもPMFしなければ無駄になってしまう
 • 素早く作りFBを得て改善していく
 ◦ スクラップ＆ビルド
 ◦ プロダクトのクオリティ　＞　コードのクオリティ
 7 ジレンマ
8. • 初期であれば時間をかけずに作るべし
 • 空の場合は既に2つプロダクトを出しておりMVPとしての機能 は備えていたがPMFはしていると言えない状況
 ◦ 料金設定にフォーカスしたプロダクト
 ◦ 市場分析にフォーカスしたプロダクト
 8 MVP
9. 昨年12月に料金設定プロダ クトをリニューアル 9
10. • モノリシックなRailsアプリケーション 
 ◦ 肥大化するcontroller
 • 性質上グラフが多くなる
 ◦ 肥大化するJS, JQuery
 ◦ JSファイル単位で管理・開発
 • 各種更新処理が多様化
 ◦ 従来どおりformでsubmitする
 ◦ ajaxでpostする（APIを作る）
 10 抱えていた課題
11. 課題へのアプローチ • SPA化
 ◦ モノリシックなプリケーションの保守運用は大変だという のはわかりきっていた
 • BEはRailsのまま。APIを提供するだけ（BFF的）
 ◦ Decorator, Presenter, ViewModel … みたいな概念はフ ロントで持つことでロジックに専念できる
 ◦ 既存のモジュールを使い回せる
 • じゃあFEは？
 11
12. 開発チーム 12 CPO
 バックエンド
 インフラ
 業務委託Fさん（週4）
 バックエンド
 React少し
 わたし（週1）
 バックエンド
 Vue少し

13. Reactにした • Vueはわかりやすい、開発立ち上がりもはやく、ドキュメントも 充実している
 • 開発貢献では 「Fさん > 週1の自分」
 ◦ Reactにしたほうが速度出る
 13 ユーザに届ける価値が変わらないならどちらでもよい（もちろん比較はします） 
 速度が遅くなる＝プロダクトリリースが送れる＝PMFが遠くなる 
 

14. その他のメリット • TypeScriptを一緒に導入した
 ◦ 相性がよい
 ◦ テストが無くてもビルドの時点でこけるので変更に強い （＝影響範囲の特定が楽）
 • Web Developer Roadmap
 • コンポーネント指向、再利用性、パフォーマンス
 ◦ HTMLは長くてもいいけどコードになると分割しなくちゃと いう気になる（という謎の思考）
 14
15. TypeScript styled-components Redux UIフレームワークは自作 AtomicDesign 15 React Rails nginx MySQL S3 Redis Elastic Search 構成 よくある構成
16. 16 src/ services/ state/ ducks/ state単位/ views/ components/ atoms/ molecules/ containers/ organisms/ pages/ ディレクトリ構成 定数クラス APIリクエストクラス actions, operations, reducersに分けて管理 organismsとpagesはコンテ ナになるだろうという予想の もと決めた
17. 開発パフォーマンスを出すために • 難しいことはしない
 ◦ どこでAPIリクエスト投げればよいのか？
 ▪ middlewareを入れてaction creatorからコールするの が正攻法
 ▪ よくわかんなかった…
 ◦ componentからaxiosで取得しreduxに入れる
 ▪ accessTokenなどの認証ヘッダはインターセプター ではさみこむ
 17
18. 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 }) })
19. 開発パフォーマンスを出すために • state管理はOSSから学ぶ
 ◦ re-ducksパターンを採用
 • AtomicDesignの採用
 ◦ styled-componentsが便利すぎる
 ◦ propsで渡さずにコンポーネントを継承して作れる
 19 const RoundButton = styled(DefaultButton)` width: 40px; height: 40px; border-radius: 50%; `
20. 失敗 • organismsとpagesがもはやcomponentのレベルに
 • AtomicDesignは後付け
 ◦ 先にデザインがあがっていた
 ◦ 開発効率化のために取り入れたが、同じようで微妙に異 なるパーツが多く無理やり合わせた
 ◦ 設計段階から協業しましょう
 • UIはすべて自作
 ◦ 時間かかった
 20 ココ重要！ 実際にユーザに使ってもらえるよう になったのは1月中旬
21. 重要なのはPMFすること 21 コードの保守性は日々の努力で保つ
22. まとめ • FE/BEが疎結合になり以前より開発しやすい環境をつくれた
 • Reactを使うメリットはたしかにある
 ◦ バリバリJS書いてる感もあるし成長実感もある
 ◦ BEやってた人は合うと思う
 • ユーザはReactがどうとか関係ない、プロダクトが全て
 ◦ ステージにあった選択を
 22