既存アプリからのreduction〜CustomRenderObjectの話 1

2023/08/11に公開

https://zenn.dev/flutteruniv_dev/articles/3dbf0a58910310

使える、ということ

The History of Everythingの無限伸縮目盛りを利用したい。
それが可能だと思ったのには、前日譚がある。
2021年7月、プログラミングの右も左もわからない状態でFlutter大学に飛び込んだ私は、
いきなり、大学の共同開発というイベントに参加し、お絵かき機能を実装した。
イヤ、それは言い過ぎだろう。
私はただ、ネットで紹介されていたfileをコピペした、だけ。
2022年1月、再び参加した共同開発では、前回単色だった描画を多色にグレードアップした。
これもコピペ。
何も理解していない、だけど、もらってきて、使うことはできる。

お絵かき機能、つまりCustom Painterは、
今回の無限伸縮目盛りと同じ、Render Object領域の機能だ。
だから、できるはずだ、と思った、ということ。
とはいえ今回、そんなお手軽な記事は見つからなかった。

ならば私が提供しよう

残念ながら私に、無限伸縮目盛りのコードを書く能力はない。
けれど私の手元には、無限伸縮目盛りを搭載したアプリの全codeがある。
全codeなので、目盛り以外のcodeも大量にある。
この中から、無限伸縮目盛りのcode「だけ」を切り出せれば、
あの日のお絵かきアプリと同じように、
コピペで動く伸縮目盛り、を、提供できるのではないか。
お絵かき機能ほど需要があるかどうかはちょっとわからない。
でも、これぞ、恩送り。
よし、やってみよう。

ひたすらreduction

残念ながら、ピンポイントにここを切り出す、というほど単純な話ではなかった。
なので「絶対要らないよね、ここ」という部分を外していく、という作戦をとった。
animationは要らない
項目ごとの「解説ページ」も要らない
aboutも、shareも、favoriteも要らない・・・という具合だ。
最初は順調にはずれていったが、途中から雲行きが怪しくなった。
例えばfavorite、お気に入りマークをつけた項目の描画が、微妙に周りに影響するらしい。
render objectが、さまざまな要素のサイズや動きを細かく計算しながら動いているという事実に、
とうとう直面することになった。

とはいえ、「理解」を優先したら、一歩も先に進めない。
これは外してもいいか、残さなきゃダメか、
1ブロックずつ、1行ずつ、ついには1項目ずつ、実験する日々。

外す順番も大事、ということにも気づいた。
川上で何か外すと、全体に大量の赤が出る。
でもそれで、依存関係のおおよその流れは可視化できる。
それをいったん復元して、今度は川下から少しずつ外していく。
さいごに「これは参照されていません」を外せば、比較的穏当に作業が進む。

そして残った、「わからないものたち」

いってしまえば私は、「わかったもの」を外し、「まだわからないもの」を残したことになる。
その過程でどれぐらいのcodeが減ったか。
具体的には何を指針にcodeを読み解いたか、については、次回以降。
https://zenn.dev/flutteruniv_dev/articles/92ad1ec5c7f463

Flutter大学

Discussion