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

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

takahi5
February 27, 2019

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

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

takahi5

February 27, 2019
Tweet

More Decks by takahi5

Other Decks in Programming

Transcript

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

    View full-size slide

  2. 2
    和田崇彦(ワダタカヒコ)
    twitter: @takahi5
    DeNAでソシャゲ・コミュニティ系アプリ立ち上げ

    花嫁向けコミュニティサービスmaricuruの立ち上げ

    View full-size slide

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

    View full-size slide

  4. 4
    システム構成

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. 建て替え or お掃除
    12

    View full-size slide

  13. 大掃除 or ゴミ拾い
    13

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide