Jetpack Compose

ネイティブ Android UI を開発するための最新のツールキット「Compose」について学習します。

 

チュートリアル: Jetpack Compose の基本

省略可

Compose の基本と、宣言型の関数を使用してシンプルな UI コンポーネントを作成する方法を学びます。コンポーズ可能な関数、基本的なレイアウト、Compose でマテリアル デザイン、リスト、アニメーションがどのように機能するかについて説明します。

Jetpack Compose の概要

動画 省略可

Jetpack Compose の概要を確認し、宣言型 UI ツールキットの概要、Compose を使用して美しい UI を作成する方法について学びます。

Compose の思想

省略可

Compose の宣言型アプローチが従来のビューベースのアプローチと異なる点について確認します。

Jetpack Compose の基本

コードラボ

状態、レイアウト、テーマ設定を操作して、宣言型 UI の基礎を実践的に学びます。コンポーザブルと修飾子の概要、Row や Column などの基本的な UI 要素を操作する方法、アプリに状態を割り当てる方法について説明しています。

Jetpack Compose への移行

コードラボ

ビューベースのアプリを Jetpack Compose に実際に移行する方法を学習して、Compose を段階的に導入する方法を理解し、アーキテクチャとテストへの影響を確認します。

Compose の基本レイアウト

コードラボ

Jetpack Compose でレイアウトがどのように機能するか(組み込みのレイアウト、修飾子、独自のカスタム レイアウトの作成方法など)を学びます。

Compose の遅延レイアウト

動画 省略可

Compose でスクロール リストを作成する方法と、RecyclerView を使用するよりもシンプルである理由について説明します。スクロール リストのネストが許可されない理由とネストするための別の方法、アイテムのサイズを 0 ピクセルに設定しない理由、一意のキーの指定が重要である理由、アイテムのアニメーションの動作について、詳しく解説します。最後に、グリッドの表示方法と、カスタム レイアウト マネージャーを使用する方法、パフォーマンスの最適化を改善してスクロールを高速化する方法について説明します。

Jetpack Compose のテーマ設定

コードラボ

Compose のマテリアル デザインを実際に体験して、アプリの色、タイポグラフィ、シェイプのテーマを設定し、ライトモードとダークモードをサポートする方法を理解します。

Jetpack Compose でのアニメーション

コードラボ

Compose Animation API の使用方法を学習します。最もシンプルな値のアニメーションから始め、いくつかの一般的なアニメーション パターンを通じて他の API を学びます。また、アニメーションのカスタマイズやタップ操作によるアニメーションなど、より高度なトピックについてもご紹介します。

Jetpack Compose の状態

コードラボ

Jetpack Compose での状態の使用に関する主要コンセプトを学習し、リッチでインタラクティブな Android アプリを作成します。

Jetpack Compose の高度な状態と副作用

コードラボ

Jetpack Compose の状態と副作用の API に関する高度なコンセプトについて学習します。複雑なステートフル コンポーザブルの状態ホルダーを作成する方法、コルーチンを作成して Compose コードから suspend 関数を呼び出す方法、さまざまなユースケースを対象に副作用をトリガーする方法をご確認ください。

Jetpack Compose の Navigation

コードラボ

Compose で Jetpack Navigation ライブラリを使用する方法、アプリ内を移動する方法、引数を使用して移動する方法、ディープリンクをサポートする方法、ナビゲーションをテストする方法を学びます。

Jetpack Compose の一般的なパフォーマンスの問題

動画 省略可

Jetpack Compose は魔法のように感じられるかもしれませんが、魔法が期待どおりのパフォーマンスを発揮しない場合はどうすればよいでしょうか。このセッションでは、パフォーマンス、よくある間違い、それらを回避する方法について、Jetpack Compose に関するベスト プラクティスを紹介します。

Jetpack Compose でのテスト

コードラボ

Jetpack Compose UI のテストについて学びます。最初のテストを作成し、単独でのテスト、デバッグテスト、セマンティクス ツリー、テスト同期について学習します。

Jetpack Compose のユーザー補助

コードラボ

特に障がいを持つユーザーのために、アプリのユーザビリティを改善する方法を学びます。タップ ターゲットのサイズの拡大、内容説明の追加、カスタム操作の作成などについて説明します。

Jetpack Compose に関するテスト

Compose に関する知識をテストして、Jetpack Compose バッジを獲得しましょう。