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
270
Using react at Startup
スタートアップ×React LT大会 Coral Developers Nightで発表したスライドです。
8zca
December 19, 2019
Tweet
Share
More Decks by 8zca
See All by 8zca
recoil
8zca
0
110
10min_elixir
8zca
0
33
質問サイトからみる Rubyに関する質問傾向 を調べてみたよ
8zca
0
41
Other Decks in Technology
See All in Technology
検証からプロダクトへ: シームレスなLLM開発の ためのしくみ作り
nunukim
1
160
エバンジェリスト活動を7年やってきて見えてきた、コミュニティとエバンジェリストの関係
soracom
PRO
1
200
実務への応用例から考える 変更に強いオブジェクト指向設計 / 20240324-ooc2024
bengo4com
7
5.2k
ビジネスロジックを「型」で表現するOOPのための関数型DDD / Functional And Type-Safe DDD for OOP
yuitosato
29
11k
生成AI・LLM時代における 機械学習エンジニアとしてのキャリア戦略・開発戦略 / my-career-and-development-strategies-for-ml-engineer-2024
yuya4
3
220
プッシュ型子育てサービスを、先行プロジェクト実施自治体において開始します
govtechtokyo
0
240
10分でわかるfreeeのQA
freee
0
230
単回帰分析について数式を追いながら実装してみた
kentaitakura
0
500
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
7
100k
家族アルバム みてねで直面してきた技術的負債 / MIXI KAG 2024
isaoshimizu
17
7.7k
AWS アーキテクチャクイズ
yuu26
2
700
エンジニアブランディングチームの KPI / KPI's of engineer branding team
chaspy
1
140
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
75
4.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
319
23k
Building Flexible Design Systems
yeseniaperezcruz
317
37k
10 Git Anti Patterns You Should be Aware of
lemiorhan
644
57k
How To Stay Up To Date on Web Technology
chriscoyier
781
250k
KATA
mclloyd
14
11k
The Pragmatic Product Professional
lauravandoore
24
5.7k
Happy Clients
brianwarren
91
6.3k
RailsConf 2023
tenderlove
0
510
In The Pink: A Labor of Love
frogandcode
137
21k
We Have a Design System, Now What?
morganepeng
42
6.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.2k
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