AACという武器を手に1,400行のFragment2体と戦った話

by syarihu

Slide 1

Slide 1 text

AACという武器を手に 1,400行のFragment2体と戦った話 Android Reject Conference 2019/2 2019/02/13 (Wed.) @syarihu

Slide 2

Slide 2 text

Taichi Sato (@syarihu) ● Money Forward, Inc. ○ Android Engineer ● TechBooster

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

戦うことになった経緯

Slide 6

Slide 6 text

戦うことになった経緯 ● 手入力画面のデザイン改善をすることになった

Slide 7

Slide 7 text

Before

Slide 8

Slide 8 text

After

Slide 9

Slide 9 text

比較

Slide 10

Slide 10 text

入出金履歴詳細の電卓デザイン

Slide 11

Slide 11 text

戦うことになった経緯 ● 手入力画面のデザイン改善をすることになった ○ 電卓のデザインが変わった

Slide 12

Slide 12 text

戦うことになった経緯 ● 手入力画面のデザイン改善をすることになった ○ 電卓のデザインが変わった ● 入出金履歴詳細画面も新しいデザインに合わせる必要があった

Slide 13

Slide 13 text

Slide 14

Slide 14 text

戦うことになった経緯 ● 手入力画面のデザイン改善をすることになった ○ 電卓のデザインが変わった ● 入出金履歴詳細画面も新しいデザインに合わせる必要があったこれがやばい

Slide 15

Slide 15 text

戦うことになった経緯 ※よく見たら片方は1,300行だったのでタイトルと微妙に違うんですがゆるしてください TransactionDetailFragment.java TransactionEditFragment.java

Slide 16

Slide 16 text

戦うことになった経緯 ManualInputFragment.java

Slide 17

Slide 17 text

戦うことになった経緯

Slide 18

Slide 18 text

戦うことになった経緯

Slide 19

Slide 19 text

戦うことになった経緯 ● 2つのFragmentが互いに依存してる ● どっちのFragmentも色んなところに依存してる ● ちょっと修正しようとするとバグる ● とにかくやばい

Slide 20

Slide 20 text

戦いの準備

Slide 21

Slide 21 text

戦いの準備 ● 手入力改善をやることになったのが６月ごろ ○ この時期は１人で開発していたので全てを把握しやすい状況だった ○ 新卒も入ってくるしメンバーが増えると今のままだとやばい

Slide 22

Slide 22 text

アプリ全体の設計を整えよう！

Slide 23

Slide 23 text

設計を整える

Slide 24

Slide 24 text

以前の設計 ※この時点での設計をざっくりまとめただけで、色々な作り方で作られていたので　全部これ通りに整っていたわけではない

Slide 25

Slide 25 text

設計を整える ● 人によって作りがバラバラで全体的に整ってなかったけどMVVMっぽいのに寄せていくのが良さそうだった ● テストコードが書きにくいのでDIは入れたい

Slide 26

Slide 26 text

設計を整える ● あんまり設計を固めすぎても全てを移行できるとは思えない ○ 移行を推進できる人がいなくなった途端にそれが負債になる ● 既存の作りにできるだけ合う形できれいにしていきたい

Slide 27

Slide 27 text

新しい設計

Slide 28

Slide 28 text

設計を整える ● MVVM ○ AAC ■ ViewModel, LiveData ○ DataBinding ● DI ○ Dagger2

Slide 29

Slide 29 text

設計を整える ● 新しい設計をドキュメントにまとめてプロジェクトに関わる人に説明 ● 後の入出金履歴詳細画面も見据えて手入力画面の改善から新しい設計を適用することにした

Slide 30

Slide 30 text

入出金履歴詳細画面の仕様を整理する

Slide 31

Slide 31 text

仕様を整理する - 入出金履歴詳細画面（自動連携 - 出金）

Slide 32

Slide 32 text

仕様を整理する - 入出金履歴詳細画面（自動連携 - 入金）

Slide 33

Slide 33 text

仕様を整理する - 入出金履歴詳細画面（手入力）

Slide 34

Slide 34 text

仕様を整理する - レシート項目編集画面

Slide 35

Slide 35 text

仕様を整理する - ジョルテ連携

Slide 36

Slide 36 text

やること 1. 入出金履歴詳細画面のリファクタ 2. レシート項目編集画面のリファクタ 3. ジョルテ対応 4. TransactionDetailFragment.javaと TransactionEditFragment.javaを消し飛ばす

Slide 37

Slide 37 text

入出金履歴詳細画面のリファクタ

Slide 38

Slide 38 text

やること ● レイアウトを作り直す ● 表示する項目をLiveDataで宣言 ● ViewModelにロジックを実装 ● Viewに反映する ○ レイアウトにViewModelをbind ○ LiveDataをobserveする

Slide 39

Slide 39 text

やった結果

Slide 40

Slide 40 text

やった結果 - 手入力履歴 ※実際の発表ではGIF動画で再生しました

Slide 41

Slide 41 text

やった結果 - 自動連携履歴 ※実際の発表ではGIF動画で再生しました

Slide 42

Slide 42 text

やった結果 ● 表示する項目多すぎ ○ 出し分けめっちゃ多い ○ 振替とかが特にやばい ● 色々なところからデータとってきて加工しないといけないからどうしても行数が増える

Slide 43

Slide 43 text

やった結果 ● 結果約1,200行のViewModelになってしまった ● ただ設計変えたおかげでコードの見通しは良くなった ● Viewとロジックが分離できた ● 仕様がだいぶ把握できた

Slide 44

Slide 44 text

やった結果 ● エラーハンドリングをちゃんと実装したり細かいところも直せた

Slide 45

Slide 45 text

やった結果 ● アプリの設計を少し見直そうかとも思ったけどこの画面の仕様が複雑すぎるので一旦このままにすることにした

Slide 46

Slide 46 text

レシート項目編集画面のリファクタ

Slide 47

Slide 47 text

やること ● レシート項目編集画面を新しく作る ○ 振替などの出し分けが無い ○ 入金 / 出金先が財布だけ ○ 保存を押したらレシート読み取り結果画面に反映

Slide 48

Slide 48 text

やった結果

Slide 49

Slide 49 text

ジョルテ連携対応

Slide 50

Slide 50 text

やること ● レシート項目編集画面に送信機能がついた感じなので送信ボタンを押したときの挙動だけ変えて作る ● あとはジョルテ連携用の実装をごにょごにょする

Slide 51

Slide 51 text

やった結果

Slide 52

Slide 52 text

TransactionDetailFragment.javaと TransactionEditFragment.javaを消し飛ばす

Slide 53

Slide 53 text

やること ● ここまでの対応で２つのFragmentへの依存が完全に消えたので関連ファイルをすべて消し飛ばす

Slide 54

Slide 54 text

やった結果

Slide 55

Slide 55 text

戦いの終わり

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

戦いの終わり ● ４ヶ月くらいの長い戦いだった ● 当初の目的だった電卓のデザインの統一はもちろんできてよかった ● 仕様がだいぶ整理できたのは良かった

Slide 61

Slide 61 text

戦いの終わり ● リファクタしてコードも増えたけど5,337 行増えて7,312行減ったので 1,975行は減らせた ● 設計を変えたおかげでViewとロジックを分離できた

Slide 62

Slide 62 text

今後の課題 ● 改めて入出金履歴詳細画面の仕様自体が複雑すぎることが分かったのでこの画面自体の見直しが必要 ● 設計ももう少し見直したほうが良いかも

Slide 63

Slide 63 text

ありがとうございました