詳解 Jetpack Compose
── 基礎から学ぶAndroidアプリの宣言的UI

書籍の概要

この本の概要

Jetpack ComposeはGoogleが開発し,モダンな宣言的UIの開発体験を推進するAndroid公式のUIライブラリです。本書はJetpack Composeの基本から応用までを解説し,宣言的UIの特徴を活かしたAndroidアプリのUI開発を後押しします。

本書は次のような悩みを解消するために書かれました。

  • Composeの公式ガイドを読んでみたけれど,いまいち理解できていない
  • Composeの概念を理解できておらず,目的にあいそうなサンプルコードをよくわからないまま流用し,なんとなく動かしている
  • 複雑なデータ構造や状態管理を伴うプロダクトレベルのアプリの作り方がわからない

第1部では,初めてComposeに触れる人が宣言的UIの考え方に慣れ親しむことができるように,基本的なUIの作り方をわかりやすく説明します。

第2部では,Composeをより深く理解して使いこなせるように,Composeを構成する概念やUIの設計パターン,ビジネスロジックとの接続方法,テストの方法などを解説します。

こんな方におすすめ

  • AndroidアプリのUI開発の知識を最新にアップデートしたい開発者
  • レガシーViewのAndroidアプリ開発経験はあるがComposeは未経験の方

この書籍に関連する記事があります!

はじめに

本書のサンプル

本書の紙面イメージは次のとおりです。画像をクリックすることで拡大して確認することができます。

サンプル画像1

サンプル画像2

サンプル画像3

サンプル画像4

サンプル画像5

サンプル画像6

目次

[第1部 Composeに親しむ]

第1章 なぜ宣言的UIなのか ── Composeを採用するメリットを理解しよう

  • 1.1 宣言的UIの世界へようこそ
    • Composeのコードを見てみよう
    • Viewと比較してみよう
    • 宣言的UIと命令的UIの比較
    • Note:本書におけるComposeの呼称
    • Note:本書におけるViewの呼称
  • 1.2 命令的UIから宣言的UIへ
    • 命令的UIと宣言的UIの両面を持つView
    • Viewの課題
    • 純粋な宣言的UIのCompose
  • 1.3 少ないコードでUIを記述できる
    • XMLリソースファイルが不要になる
    • ViewやFragmentの継承が不要になる
    • コードの比較
  • 1.4 UIの状態管理が容易になる
    • 引数が決まれば表示が決まる
    • 状態を1か所で管理できる
    • KotlinのFlowとの相性が良い
  • 1.5 従来のViewから段階的に移行できる
    • 小さく始められる
    • Viewの資産を活用できる
  • 1.6 今後の発展が期待できる
    • 進化が速く後方互換性も確保される
    • マルチプラットフォーム対応が進められている
    • コラム:Composeのロードマップ
  • 1.7 Composeの課題
    • プログラミング初心者にとってのハードル
    • パフォーマンスの改善
    • API変更の可能性
  • 1.8 まとめ

第2章 宣言的UIとComposeの基本 ── 基本的なUIの作り方を学び,宣言的UIの考え方に慣れよう

  • 2.1 Android JetpackとComposeライブラリの位置付け
    • Androidを支えるJetpack
    • Composeライブラリの紹介
    • コラム:Kotlin 2.0への移行
  • 2.2 はじめてのCompose
    • Hello, Compose!
    • Composeのエントリーポイント
    • コンポーザブル関数 ── UIを宣言する関数
    • プレビューで表示を確認する
    • Note:自動生成されるコードの違い
  • 2.3 コンポーザブルの表示
    • 文字列を表示する
    • 画像を表示する
    • 注意:色の指定とテーマの関係
  • 2.4 コンポーザブルの見た目や振る舞いのカスタマイズ
    • modifier引数の役割
    • 自由度の高いカスタマイズを可能にする
    • Modifierチェーン
    • 見た目をカスタマイズするModifier
    • Modifierの順番
    • 振る舞いを定義するModifier
    • コラム:dpとsp ── Composeの大きさの単位
  • 2.5 簡単なレイアウト
    • レイアウトのためのコンポーザブル
    • サイズを指定する
    • スペースを空ける
    • 位置を揃える
    • レイアウトをネストする
    • 注意:言語とRowの向き
  • 2.6 動的な表示の変更
    • クリックにより表示を変更する
    • 宣言的UIにおける表示更新の仕組みを理解する
    • テキストフィールドを作る
    • スクロール可能にする
  • 2.7 UIの階層化と構造化
    • コンポーザブル関数を階層化する
    • 関数によりUIを定義するメリット
    • UIの構造化 ── 繰り返し
    • データを下位階層に渡す
    • イベントを上位階層に返す
    • UIの構造化 ── 条件分岐
    • modifier引数で汎用性を確保
    • コラム:非表示状態のComposeとViewの違い
  • 2.8 プレビューの活用
    • プレビューを表示する
  • 2.9 まとめ

第3章 知っておきたいKotlinの文法や用法 ── Kotlinの文法を正しく理解してComposeの理解を深めよう

  • 3.1 アノテーションによる機能定義
    • Composeの例 ── @Composable
  • 3.2 デフォルト引数による汎用性と可読性の両立
    • 名前付き引数
    • デフォルト引数
    • コラム:modifier引数の順序
  • 3.3 ラムダのいろいろな書き方
    • ラムダの定義方法
    • ラムダを関数の引数に渡す方法
    • Composeにおける2種類のラムダ
  • 3.4 拡張関数による機能追加
    • 拡張関数の定義方法
    • レシーバオブジェクト
    • クラス内拡張関数
    • レシーバを受け取るラムダ
    • Composeの例 ── RowScopeとModifier.weight
  • 3.5 委譲による実装の分離
    • 委譲プロパティの利用方法
    • 委譲先クラスの実装イメージ
    • 委譲プロパティのメリット
    • Composeの例 ── MutableState
  • 3.6 まとめ

第4章 ComposeによるさまざまなUIの実現方法 ── よく利用するUIの作り方を学び,実践的なUIを作れるようになろう

  • 4.1 サンプルアプリの紹介
  • 4.2 Scaffold ── ベースとなるレイアウト
    • Scaffoldの定義
    • Scaffoldの利用例
  • 4.3 Lazyコンポーザブルによるリスト表示
    • リストの記述方法
    • LazyColumnの利用例
    • いろいろなLazyコンポーザブル
  • 4.4 ダイアログによるメッセージの表示
    • AlertDialogの定義
    • AlertDialogの利用例
    • ダイアログの表示と結果の取得
  • 4.5 表示切り替えのアニメーション
    • アニメーションの利用例
    • Animate*AsStateによる値の変更のアニメーション
    • AnimatedVisibilityによる表示と非表示のアニメーション
  • 4.6 Viewとの共存
    • WebViewをComposeで利用する例
  • 4.7 ナビゲーションによる画面遷移
    • 準備
    • ナビゲーショングラフによる画面遷移とバックスタック
    • ルートの定義
    • ナビゲーションの実装
    • 画面遷移のアニメーション
  • 4.8 テーマの活用
    • マテリアルデザインとテーマの概要
    • テーマの適用
    • テーマの定義とカスタマイズ
    • テーマの値の利用
    • コンポーネントのデフォルト値の変更
  • 4.9 アクセシビリティ ── 読み上げ内容の改善
    • トークバックの確認方法
    • アイコンや画像の読み上げ
    • 動作の説明の読み上げ
  • 4.10 まとめ

[第2部 Composeを使いこなす]

第5章 ComposeがUIを構築する仕組み ── UIの木構造や再コンポーズを理解して応用力をつけよう

  • 5.1 コンポジション ── コンポーザブルの木構造
    • コンポーザブル関数の役割
    • コンポジションのルートノード
    • コンポジションの生存期間
    • Note:よく似た言葉の定義
  • 5.2 再コンポーズ ── コンポジションの更新
    • 再コンポーズの起点と範囲
    • 再コンポーズのスキップ
    • コンポジションの構造の変更
  • 5.3 型の安定とスキップの条件
    • 安定した型は変化が明確
    • スキップの条件
  • 5.4 コンポーザブルの状態の保持
    • 再コンポーズを超えた状態の保持
    • Stateとrememberの関係
    • 構成変更を超えた状態保持
  • 5.5 コルーチンによる非同期処理
    • suspend関数 ── コルーチンの実体
    • launchでコルーチンを起動する
    • CoroutineScopeでコルーチンの実行環境を用意する
    • Composeにおけるコルーチン
    • コラム:コルーチンについてもっと知りたい方は
  • 5.6 コンポーザブルの副作用
    • 副作用の定義
    • SideEffect ── 毎回実行
    • LaunchedEffect ── 条件が変化したときに実行
    • DisposableEffect ── 後片付けが必要な処理
    • コールバック関数内に副作用を記述
    • コンポーザブル関数に副作用を直接記述(非推奨)
    • rememberCoroutineScope ── 副作用でsuspend関数を実行
    • rememberUpdatedState ── 副作用で参照する値を更新
    • Composeの作用と副作用の境界
  • 5.7 コンポジション内のデータ共有
    • 引数による単方向データフロー
    • CompositionLocalによるデータの共有
  • 5.8 まとめ

第6章 Composeアプリの設計パターン ── コンポーザブル関数が利用する状態の定義方法と,データの流れを理解しよう

  • 6.1 状態を定義する場所
    • ステートフルなコンポーザブル関数
    • ステートレスなコンポーザブル関数
    • 状態ホイスティング ── 状態を上位のコンポーザブルに移動する
    • 再利用可能なコンポーザブル関数
    • 共通の親コンポーザブルに状態を定義
  • 6.2 複雑な状態のカプセル化
    • UIロジックのコンポーザブル外への分離
    • remember関数の自作
  • 6.3 Flowによるデータの受け渡し
    • SharedFlow ── 外部からemitできるFlow
    • StateFlow ── 常に値を持つFlow
  • 6.4 画面の状態を定義するUiState
    • data classを使う書き方
    • sealed interfaceを使う書き方
  • 6.5 ViewModelによるUiStateの保持と更新
    • MVVMパターンの適用
    • Flowを使ってUiStateを更新する
    • コンポーザブル関数でUiStateを利用する
  • 6.6 MVVMアーキテクチャのデータフロー
    • suspend関数を利用したModelの定義
    • UiStateへの変換
    • 宣言的なデータフロー
    • コラム:Flowを公開するModelクラス
  • 6.7 データの更新処理の呼び出し
    • イベントの伝達
    • 状態とロジックを定義する場所
  • 6.8 まとめ

第7章 パフォーマンスの測定と改善 ── 不要な再コンポーズを抑制してスムーズな表示を実現しよう

  • 7.1 パフォーマンスを追求する前に
    • パフォーマンス悪化の原因
    • 最新バージョンのComposeの使用
    • Strong Skipping Modeの有効化
    • Releaseビルドで確認
    • 完璧を求めすぎない
  • 7.2 パフォーマンスの測定
    • Layout Inspectorによる再コンポーズの発生状況の確認
    • Profilerによるコンポーザブル関数のトレース
    • コラム:Perfettoのビューアーの利用
  • 7.3 パフォーマンスの改善
    • 処理を実行するフェーズの変更
    • derivedStateOfで状態を変換
    • アノテーションによる型の安定化
    • keyの利用
    • Lazyコンポーザブルの利用
    • コラム:Baseline Profile
  • 7.4 まとめ

第8章 Composeのテスト ── UIコンポーネントのテストを書いて信頼性の高いUIを構築しよう

  • 8.1 テストの目的
    • UIコンポーネントの動作を保証する
    • さまざまな環境での表示を検証する
  • 8.2 Composeのテストの構成
  • 8.3 テスト対象のコンポーザブル
  • 8.4 UIロジックの検証
    • UIロジックのテストコード
    • テストの実行
    • JUnit4による単体テスト
    • Truthによる可読性向上
    • ロジック分離の恩恵
  • 8.5 コンポーザブルの振る舞いの検証
    • Robolectricの導入
    • ComposeTestRuleの利用
    • テストコードの大枠
    • テストケースのコード
  • 8.6 コンポーザブルの表示の検証
    • 状態ごとの表示結果をプレビューする
    • 状態ホイスティングの恩恵
    • さまざまな環境でテストする
    • スクリーンショットテストによる差分検出
  • 8.7 まとめ

著者プロフィール

臼井篤志(うすいあつし)

UI開発が好きなAndroidアプリエンジニア。音響機器メーカーで組み込みソフトウェアエンジニアとして働きながら,個人でAndroidアプリ開発に取り組んでいたときにJetpack Composeに出会い,のめり込む。2023年よりサイボウズ株式会社。グループウェアのAndroidアプリ開発を担当している。個人ではComposeで画像をズーム可能にするライブラリを開発。OSSとして公開している。DroidKaigi 2024登壇。Composeのジェスチャーについて発表した。

[Blog]https://engawapg.net/
[X]@usuiat