導入に向けたステップ
Jetpack Composeは、ViewベースのUIツールキットとは全く異なる思想のフレームワークです。導入前に入念な準備をしておく必要があると考えました。
Jetpack Composeの学習環境
Jetpack ComposeはこれまでのViewベースのUIフレームワークとは全く異なる思想のもと作られていますので、アプリ開発における考え方を大きく変える必要があります。
そのためか、公式サイト上で手厚い学習環境が用意されています。GoogleのAndroid開発者向けサイトには、Jetpack Composeの学習ステップが紹介されており、このステップに沿って学習することで、Jetpack Composeの考え方から既存のアプリの移行方法までを体系的に学べるようになっています。
特に多く用意されているCodelabでは、状態の管理方法やアニメーションの実装方法などの実践的な内容をコードを触りながら理解できるため、とても有用でした。また、アーキテクチャについてはDroidKaigi 2021のアプリも参考になります。プロジェクト全体の構成は、Kotlinマルチプラットフォームのために一般的なアプリとは少し異なるものとなっていますが、ViewModelの実装をみると、とてもシンプルな作りになっていることがわかると思います。
サンプルアプリの作成
アーキテクチャを検討し、それが使いものになるのかを確認するためには、実際のプロダクトでのユースケースに基づいたサンプルを作のが一番です。
PayPayフリマにとって特に確認しておく必要があったのは、商品を検索したときのページングリスト、商品情報画面などでの複数のデータソースから取得される値を組み合わせて複雑に変わる画面表示、それに項目の多い入力フォームとバリデーションでした。
実際にやってみると、アーキテクチャよりもレイアウト面で問題が起きることがわかりました。現在のデザインをそのまま再現しようとすると、少し困る場合があります。たとえば文字列の入力にはTextField()関数を使用しますが、これはViewでいうとTextInputLayoutのようなもので、labelパラメータでヒントテキストを設定できますが、フォーカスがあたると自動的に小さくなって上にアニメーションされるだけで、消えることはありません。つまり、小さくなったあとのlabelのサイズ分、余分に高さを確保しないといけないのです。これはPayPayフリマで使用しているEditTextの挙動とは異なります。
そのため、もし現在のPayPayフリマのデザインを維持するならば、Text()とTextField()のComposable関数を組み合わせた独自の関数を作るか、デザインを再検討する必要があることがわかりました。こうした例はTextField()に限りません。
ただ、もともとViewベースのUIフレームワークであっても、カスタムのViewウィジェットを作成することはよくあることです。PayPayフリマにもかなり多くのカスタムViewクラスが存在します。まさかただのEditTextの挙動でカスタマイズする必要があるとは思っていませんでしたが、それでもアーキテクチャの面での困難がないのであれば容易に解決できる部分ですので、このまま導入を進めることにしました。
