Slide 1
Slide 1 text
スタートアップ×React
ってどうなの？
スタートアップ×React LT大会 Coral Developers Night
2019/12/19
1
Slide 2
Slide 2 text
〜2018
2019〜
名前
経歴
2
自己紹介
決済PFのバックエンド
加盟店管理システム
プロダクトの開発全般
（以前から副業で手伝っていました）
FEエンジニアの方が入ってきたので今はBE
を主に開発しています
/チームマネジメント
もりわきかずや
Slide 3
Slide 3 text
3
MagicPrice
ホテルの予約や市場データ
日々の推奨価格
予約サイトへ反映
ホテルの収益改善を促進するレベニューマネジメントツール
Slide 4
Slide 4 text
スタートアップにおいて
Reactを採用するメリット
はどこにあるのか
4
Slide 5
Slide 5 text
重要なのはPMFすること
5
Slide 6
Slide 6 text
空の場合
プロダクトが無いと
「非常に困る」40%
6
Slide 7
Slide 7 text
● しっかり作ってもPMFしなければ無駄になってしまう
● 素早く作りFBを得て改善していく
○ スクラップ＆ビルド
○ プロダクトのクオリティ ＞ コードのクオリティ
7
ジレンマ
Slide 8
Slide 8 text
● 初期であれば時間をかけずに作るべし
● 空の場合は既に2つプロダクトを出しておりMVPとしての機能
は備えていたがPMFはしていると言えない状況
○ 料金設定にフォーカスしたプロダクト
○ 市場分析にフォーカスしたプロダクト
8
MVP
Slide 9
Slide 9 text
昨年12月に料金設定プロダ
クトをリニューアル
9
Slide 10
Slide 10 text
● モノリシックなRailsアプリケーション
○ 肥大化するcontroller
● 性質上グラフが多くなる
○ 肥大化するJS, JQuery
○ JSファイル単位で管理・開発
● 各種更新処理が多様化
○ 従来どおりformでsubmitする
○ ajaxでpostする（APIを作る）
10
抱えていた課題
Slide 11
Slide 11 text
課題へのアプローチ
● SPA化
○ モノリシックなプリケーションの保守運用は大変だという
のはわかりきっていた
● BEはRailsのまま。APIを提供するだけ（BFF的）
○ Decorator, Presenter, ViewModel … みたいな概念はフ
ロントで持つことでロジックに専念できる
○ 既存のモジュールを使い回せる
● じゃあFEは？
11
Slide 12
Slide 12 text
開発チーム
12
CPO
バックエンド
インフラ
業務委託Fさん（週4）
バックエンド
React少し
わたし（週1）
バックエンド
Vue少し
Slide 13
Slide 13 text
Reactにした
● Vueはわかりやすい、開発立ち上がりもはやく、ドキュメントも
充実している
● 開発貢献では 「Fさん > 週1の自分」
○ Reactにしたほうが速度出る
13
ユーザに届ける価値が変わらないならどちらでもよい（もちろん比較はします）
速度が遅くなる＝プロダクトリリースが送れる＝PMFが遠くなる
Slide 14
Slide 14 text
その他のメリット
● TypeScriptを一緒に導入した
○ 相性がよい
○ テストが無くてもビルドの時点でこけるので変更に強い
（＝影響範囲の特定が楽）
● Web Developer Roadmap
● コンポーネント指向、再利用性、パフォーマンス
○ HTMLは長くてもいいけどコードになると分割しなくちゃと
いう気になる（という謎の思考）
14
Slide 15
Slide 15 text
TypeScript
styled-components
Redux
UIフレームワークは自作
AtomicDesign
15
React Rails
nginx
MySQL
S3
Redis
Elastic
Search
構成
よくある構成
Slide 16
Slide 16 text
16
src/
services/
state/
ducks/
state単位/
views/
components/
atoms/
molecules/
containers/
organisms/
pages/
ディレクトリ構成
定数クラス
APIリクエストクラス
actions, operations,
reducersに分けて管理
organismsとpagesはコンテ
ナになるだろうという予想の
もと決めた
Slide 17
Slide 17 text
開発パフォーマンスを出すために
● 難しいことはしない
○ どこでAPIリクエスト投げればよいのか？
■ middlewareを入れてaction creatorからコールするの
が正攻法
■ よくわかんなかった…
○ componentからaxiosで取得しreduxに入れる
■ accessTokenなどの認証ヘッダはインターセプター
ではさみこむ
17
Slide 18
Slide 18 text
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 })
})
Slide 19
Slide 19 text
開発パフォーマンスを出すために
● state管理はOSSから学ぶ
○ re-ducksパターンを採用
● AtomicDesignの採用
○ styled-componentsが便利すぎる
○ propsで渡さずにコンポーネントを継承して作れる
19
const RoundButton = styled(DefaultButton)`
width: 40px;
height: 40px;
border-radius: 50%;
`
Slide 20
Slide 20 text
失敗
● organismsとpagesがもはやcomponentのレベルに
● AtomicDesignは後付け
○ 先にデザインがあがっていた
○ 開発効率化のために取り入れたが、同じようで微妙に異
なるパーツが多く無理やり合わせた
○ 設計段階から協業しましょう
● UIはすべて自作
○ 時間かかった
20
ココ重要！
実際にユーザに使ってもらえるよう
になったのは1月中旬
Slide 21
Slide 21 text
重要なのはPMFすること
21
コードの保守性は日々の努力で保つ
Slide 22
Slide 22 text
まとめ
● FE/BEが疎結合になり以前より開発しやすい環境をつくれた
● Reactを使うメリットはたしかにある
○ バリバリJS書いてる感もあるし成長実感もある
○ BEやってた人は合うと思う
● ユーザはReactがどうとか関係ない、プロダクトが全て
○ ステージにあった選択を
22