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
リリースから1年経った React Nativeアプリの リファクタリング
Search
takahi5
February 27, 2019
Programming
0
600
リリースから1年経った React Nativeアプリの リファクタリング
2019/2/27
シューマツワーカー主催のイベントにて
takahi5
February 27, 2019
Tweet
Share
More Decks by takahi5
See All by takahi5
仮説検証フェーズの開発 with React Native
takahi5
0
92
React Nativeでアニメーションを頑張る- React Native Meetup #11
takahi5
4
1.3k
React Native x Firebaseの メリットとTips5選
takahi5
1
1.9k
怖くないexpo eject - TECH STAND #2
takahi5
0
1.9k
React Native パフォーマンス最適化 - 2020-10-15 RN Tech Blog
takahi5
1
90
リモートワーク×副業 が中心のチームづくり
takahi5
0
1.1k
React Native + Expoなアプリを リリースして1年を”5分”で振り返る
takahi5
1
260
Other Decks in Programming
See All in Programming
もう実家に手頃な情シス娘は不要!Bedrockでもう一人の娘を作る
komakichi
2
130
Golang と Erlang
taiyow
7
1.7k
Vaporモードを大規模サービスに最速導入して学びを共有する
kazukishimamoto
3
590
画像でわかる北島直樹
naoki0917
0
110
VS Code extension: ドラッグ&ドロップでファイルを並び替える
ttrace
0
190
実践サーバーレスパフォーマンスチューニング ~その実力に迫る~ / Practical Serverless Performance Tuning ~A Close Look at its Power~
seike460
PRO
2
230
Vue3の一歩踏み込んだパフォーマンスチューニング2024
hal_spidernight
3
1.2k
Vertical Architectures for Scalable Angular Applications
manfredsteyer
PRO
0
180
急速に利用拡大を続ける飲食店向けサービスで 店内端末同士のローカル通信を追加設定なしで実現した話
whatasoda
0
140
.NET Aspireのクラウド対応検証: Azureと他環境での実践
ymd65536
1
650
NEWTにおけるiOS18対応の進め方
ryu1sazae
0
330
4年間変わらなかった YOUTRUSTのアーキテクチャ
daiki1003
2
670
Featured
See All Featured
Building Applications with DynamoDB
mza
90
6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
GraphQLとの向き合い方2022年版
quramy
43
13k
BBQ
matthewcrist
85
9.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
40
2.1k
No one is an island. Learnings from fostering a developers community.
thoeni
19
2.9k
Designing Experiences People Love
moore
138
23k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
Side Projects
sachag
452
42k
How to Think Like a Performance Engineer
csswizardry
18
1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
Transcript
リリースから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 副業x6 フルタイム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
31