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

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

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

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

4 システム構成

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

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

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

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

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

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

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

建て替え or お掃除 12

大掃除 or ゴミ拾い 13

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

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

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

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

18 Redux Scene (Container的なもの) Component APIを呼び出してる Stateを持っている Reduxを抱えてる Stateを持ってたり Reduxを抱えてたり
再利用性が悪いテストしにくい現状

19 Redux Scene (Container的なもの) Component APIを呼び出してる Stateを持っている Reduxを抱えてる Stateを持ってたり Reduxを抱えてたり
propsのみリファクタリング Componentをstatelessに redux-thunkで副作用をactionに移動 APIを呼び出し (redux-thunk)

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

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

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

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

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

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

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

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

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

まとめ 29 • 方針 ◦ ゴミ拾いの精神でコツコツと • やったこと ◦ コンテナとコンポーネントの区別
◦ ESLintでコーディングルール統一

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

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

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

takahi5

More Decks by takahi5

Other Decks in Programming

Featured

Transcript