$30 off During Our Annual Pro Sale. View Details »

リリースから1年経った React Nativeアプリの リファクタリング

takahi5
February 27, 2019
Programming
0
430

リリースから1年経った React Nativeアプリの リファクタリング

2019/2/27
シューマツワーカー主催のイベントにて

takahi5

February 27, 2019
Tweet

More Decks by takahi5

See All by takahi5
仮説検証フェーズの開発 with React Native
takahi5
0
46
React Nativeでアニメーションを頑張る- React Native Meetup #11
takahi5
4
780
React Native x Firebaseの メリットとTips5選
takahi5
1
1.4k
怖くないexpo eject - TECH STAND #2
takahi5
0
1.3k
React Native パフォーマンス最適化 - 2020-10-15 RN Tech Blog
takahi5
1
42
リモートワーク×副業 が中心のチームづくり
takahi5
0
820
React Native + Expoなアプリを リリースして1年を”5分”で振り返る
takahi5
1
230

Other Decks in Programming

See All in Programming
AWS AppSync を利用したアプリ開発チーム視点の API 開発
sugiyu1234
0
120
E2Eテストから負荷試験シナリオを作ってみた / Why do we make a scenario of load testing from E2E testing scenarios
mackee
0
1.8k
一か月半かけて、TypeScript本を写経した話
2nofa11
0
110
Composing an API with Kotlin vol 2 (Advanced Kotlin Dev Day 2022)
zsmb
1
200
GDG DevFest2022 Songdo - KMM(Kotlin Multiplatform Mobile)
taehwandev
0
240
傾聴対話ライブラリ実装 -おうむ返し-
sadahry
0
1k
Django REST Framework はじめの一歩 〜 押さえておきたい３つのポイント 〜 / First step of Django REST Framework (stapy#87 2022)
akiyoko
0
620
AWS データベースブログの記事 「Amazon DynamoDBによる CQRSイベントストアの構築」 を勝手に読み解く
j5ik2o
0
220
レガシーフロントエンドからNext.jsへの段階移行を可能にするAWS構成
tamizuma
10
3.1k
Neo4j-Migrations: The lean way of applying database refactorings to Neo4j
michaelsimons
0
460
Hono - Ultrafast web framework for Cloudflare Workers, Deno, Bun, and Node.js
yusukebe
2
4.4k
Import Maps: The Next Evolution Step for Micro Frontends?
manfredsteyer
PRO
0
140

Featured

See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
225
130k
Designing on Purpose - Digital PM Summit 2013
jponch
107
5.8k
The Web Native Designer (August 2011)
paulrobertlloyd
76
2.1k
Code Review Best Practice
trishagee
48
11k
5 minutes of I Can Smell Your CMS
philhawksworth
197
18k
Building an army of robots
kneath
301
40k
The MySQL Ecosystem @ GitHub 2015
samlambert
239
11k
Into the Great Unknown - MozCon
thekraken
0
170
Building Better People: How to give real-time feedback that sticks.
wjessup
344
17k
Atom: Resistance is Futile
akmur
256
24k
Ruby is Unlike a Banana
tanoku
92
9.5k

Transcript

  1. リリースから1年経った React Nativeアプリの リファクタリング 2018.2.27 株式会社maricuru CTO 和田崇彦 1 @takahi5

  2. 2 和田崇彦(ワダタカヒコ) twitter: @takahi5 DeNAでソシャゲ・コミュニティ系アプリ立ち上げ ↓ 花嫁向けコミュニティサービスmaricuruの立ち上げ

  3. maricuruとは 3 花嫁向け コミュニティアプリ

  4. 4 システム構成

  5. 5 techブログやってます(Expo推し) https://tech.maricuru.com

  6. 6 リリースから1年...順調に成長中♪ アクティブユーザー数 2017/12 βリリース 2018/3 正式リリース

  7. maricuruの開発リソース 7 フルタイムx1 副業ｘ6 フルタイムx1 フルタイムx2

  8. ドヤはここまで ここからは自戒を込めて 8

  9. 9 • 初めてのReact Nativeアプリ • スピード重視という言い訳

  10. 10 • テストはない • 見た目と処理が一体化したコンポーネント • お作法がバラバラ

  11. 最近 11 • 副業中心にReact Nativeの経験値の高いメンバーが増えた スムーズな立ち上げのためコード整備が必要 React Nativeのノウハウ⬆ いざリファクタリング！

  12. 建て替え or お掃除 12

  13. 大掃除 or ゴミ拾い 13

  14. 来たときよりもキレイに！ 14

  15. ゴミ拾い？何がゴミなのか？ 15 ①明らかにゴミ(負債)なもの → UIとロジックが密結合したコンポーネントたち ②ゴミかどうか判断しにくいもの → コーディングのお作法

  16. UIとロジックが密結合したコンポーネントたち 16 • 再利用性が悪い • reduxちゃんと使えていない

  17. 17 Container Components (俗に言うコンテナ) Presentational Component (俗に言うコンポーネント) ロジックに関与 見た目を担当 Reduxと状態をやりとりする

    状態を持たない propsを受け取るだけ コンテナとコンポーネント

  18. 18 Redux Scene (Container的なもの) Component APIを呼び出してる Stateを持っている Reduxを抱えてる Stateを持ってたり Reduxを抱えてたり

    再利用性が悪い テストしにくい 現状

  19. 19 Redux Scene (Container的なもの) Component APIを呼び出してる Stateを持っている Reduxを抱えてる Stateを持ってたり Reduxを抱えてたり

    propsのみ リファクタリング Componentをstatelessに redux-thunkで副作用をactionに移動 APIを呼び出し (redux-thunk)

  20. コンポーネントのリファクタ方針 20 • 新機能はコンテナ/コンポーネント意識して • 既存機能は順次対応

  21. ゴミかどうか判断しにくいもの コーディングのお作法 21

  22. ESLint導入 22 • ルールはairbnb準拠で • lint-stagedでcommit時にチェック

  23. ESLintがチェックしてくれること 23 PropTypesをちゃんと定義しているか けっこう大変 将来的にTS化も見据えて頑張り所

  24. ESLintがチェックしてくれること 24 functionの順番(sort-comp) 見通しがよくなる

  25. ESLintがチェックしてくれること 25 先に定義すること(no-use-before-define) stylesは上に書く？下に書く？ 統一できてよい

  26. ESLintを導入してみて 26 • エラーの嵐 • それなりに慣れが必要

  27. ESLintの運用ルール 27 • 困ったら遠慮なくlint-disable • 慣れている人がプルリク時にサポート

  28. 反省, 学び 28 • ESLintはじめから入れておけばよかった ◦ 導入の手間は少ない ◦ お作法の勉強にもなる

  29. まとめ 29 • 方針 ◦ ゴミ拾いの精神でコツコツと • やったこと ◦ コンテナとコンポーネントの区別

    ◦ ESLintでコーディングルール統一

  30. いま思うと... 30 • ある程度の規模のプロジェクトを見ておけばよかった ◦ OSSのプロジェクトを見る ◦ 副業で他プロジェクトに携わる OSSプロジェクト事例： https://tech.kitchhike.com/entry/7-opensource-react-native-app-in-github

  31. 31