Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Using react at Startup

8zca
December 19, 2019

Using react at Startup

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

8zca

December 19, 2019
Tweet

More Decks by 8zca

Other Decks in Technology

Transcript

  1. 〜2018
 
 
 2019〜
 名前
 経歴
 2 自己紹介 決済PFのバックエンド 


    加盟店管理システム 
 プロダクトの開発全般 
 (以前から副業で手伝っていました) 
 FEエンジニアの方が入ってきたので今はBE を主に開発しています 
 /チームマネジメント 
 もりわきかずや

  2. • モノリシックなRailsアプリケーション 
 ◦ 肥大化するcontroller
 • 性質上グラフが多くなる
 ◦ 肥大化するJS, JQuery


    ◦ JSファイル単位で管理・開発
 • 各種更新処理が多様化
 ◦ 従来どおりformでsubmitする
 ◦ ajaxでpostする(APIを作る)
 10 抱えていた課題
  3. 課題へのアプローチ • SPA化
 ◦ モノリシックなプリケーションの保守運用は大変だという のはわかりきっていた
 • BEはRailsのまま。APIを提供するだけ(BFF的)
 ◦ Decorator,

    Presenter, ViewModel … みたいな概念はフ ロントで持つことでロジックに専念できる
 ◦ 既存のモジュールを使い回せる
 • じゃあFEは?
 11
  4. Reactにした • Vueはわかりやすい、開発立ち上がりもはやく、ドキュメントも 充実している
 • 開発貢献では 「Fさん > 週1の自分」
 ◦

    Reactにしたほうが速度出る
 13 ユーザに届ける価値が変わらないならどちらでもよい(もちろん比較はします) 
 速度が遅くなる=プロダクトリリースが送れる=PMFが遠くなる 
 

  5. その他のメリット • TypeScriptを一緒に導入した
 ◦ 相性がよい
 ◦ テストが無くてもビルドの時点でこけるので変更に強い (=影響範囲の特定が楽)
 • Web

    Developer Roadmap
 • コンポーネント指向、再利用性、パフォーマンス
 ◦ HTMLは長くてもいいけどコードになると分割しなくちゃと いう気になる(という謎の思考)
 14
  6. 16 src/ services/ state/ ducks/ state単位/ views/ components/ atoms/ molecules/

    containers/ organisms/ pages/ ディレクトリ構成 定数クラス APIリクエストクラス actions, operations, reducersに分けて管理 organismsとpagesはコンテ ナになるだろうという予想の もと決めた
  7. 開発パフォーマンスを出すために • 難しいことはしない
 ◦ どこでAPIリクエスト投げればよいのか?
 ▪ middlewareを入れてaction creatorからコールするの が正攻法
 ▪

    よくわかんなかった…
 ◦ componentからaxiosで取得しreduxに入れる
 ▪ accessTokenなどの認証ヘッダはインターセプター ではさみこむ
 17
  8. 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 }) })
  9. 開発パフォーマンスを出すために • state管理はOSSから学ぶ
 ◦ re-ducksパターンを採用
 • AtomicDesignの採用
 ◦ styled-componentsが便利すぎる
 ◦

    propsで渡さずにコンポーネントを継承して作れる
 19 const RoundButton = styled(DefaultButton)` width: 40px; height: 40px; border-radius: 50%; `
  10. 失敗 • organismsとpagesがもはやcomponentのレベルに
 • AtomicDesignは後付け
 ◦ 先にデザインがあがっていた
 ◦ 開発効率化のために取り入れたが、同じようで微妙に異 なるパーツが多く無理やり合わせた


    ◦ 設計段階から協業しましょう
 • UIはすべて自作
 ◦ 時間かかった
 20 ココ重要! 実際にユーザに使ってもらえるよう になったのは1月中旬