Android ViewからJetpack Composeへ〜Jetpack Compose移行のすゝめ〜

Android Viewはメンテナンスモードになり、Jetpack Composeも正式リリースされてから3年ほど経過しておりJetpack Composeを導入するアプリも増えてきていると思います。しかし、古くから提供し続けているアプリでは未だAndroid Viewからの移行の腰が重かったり、開発リソースが足りなかったりなどで移行を進められていないアプリもあるのではないでしょうか。 Jetpack Composeは導入自体は簡単ですが、コードの書き方の自由度が高く、いざチームで開発しようと思うと、どのようなルールを決めるべきなのか、どの単位でComposableを切るべきなのか、Composable関数にどのように引数を渡すべきなのか、プレビューもどこまで書けば良いのか、移行や実装の進め方に迷うことがたくさんあると思います。私が業務委託としてお手伝いをしている株式会社mikanでも以前からJetpack Compose化を進めており、導入からしばらく経過して試行錯誤を重ねた結果、ようやくこういった書き方やルールがいいんじゃないだろうかという方針が確立してきました。本セッションでは、mikanにおけるJetpack Compose移行の進め方と、実際の移行タスクを例にしたJetpack Composeを使ったレイアウトの実装方法や、プレビューを活用して実際の動作に近い画面の動きを再現する方法などを解説します。目次案 ■ Jetpack Composeの導入 - Jetpack Composeの依存関係を追加する - Compose関連のファイルの置き場を決める - ファイルやComposable関数などの命名規則を決める - コンポーネント単位だけでなく画面までプレビューを表示できる設計にする ■ Jetpack Composeへの移行 ~ オンボーディング画面をJetpack Composeに移行する ~ （説明に使う画面は変わる可能性があります） - 移行対象の画面のレイアウトを確認する - 移行対象の画面のレイアウトをコンポーネント単位に分割する - 移行に必要なタスクを洗い出す - UIを実装する - UiStateを定義する - プレビューで実際の動作に近い画面の動きを実現する - ロジックを実装する - 画面とロジックを結合する