「Compose を用いた Android アプリ開発の基礎」は、最新のベスト プラクティスに基づいて Android アプリを作成するための自習形式のオンライン コースです。このコースでは、Jetpack Compose を使用してアプリを作成するための基礎について説明しています。Jetpack Compose は、Android でユーザー インターフェースを作成するための推奨ツールキットです。

コースの目標

  • Kotlin と Jetpack Compose の基礎を理解する
  • 一連の基本的な Android アプリを作成する
  • Android アプリのアーキテクチャに基づいて Jetpack ライブラリを使用し、最新の Android 開発手法に従ってデータを処理する

前提条件

  • パソコンに関する基本的なスキル
  • 数学に関する基本的なスキル
  • Android Studio を実行できるパソコン(システム要件を参照)
  • (省略可)Android デバイス
ユニット 1: 初めての Android アプリ

3 つのパスウェイ | 所要時間: 10 時間

プログラミングの基礎を学習し、初めての Android アプリを作成します。
  • テキスト出力を表示するシンプルな Kotlin プログラムを作成します。
  • Android Studio をダウンロードしてインストールします。
  • テキストと画像を表示するシンプルなユーザー インターフェースを備えた Android アプリを作成します。
  • デバイスまたはエミュレータでアプリを実行します。
Kotlin の概要

パスウェイ 1 | 所要時間: 3 時間
Kotlin による初歩的なプログラミングのコンセプトについて学習します。

始める前に
Codelab
「Compose での Android の基礎」へようこそ!
動画
初めての Kotlin プログラム
Codelab
Kotlin で変数を作成して使用する
Codelab
Kotlin で関数を作成して使用する
Codelab
演習: Kotlin の基礎
Codelab
次のステップ
動画
クイズ
Android Studio をセットアップする

パスウェイ 2 | 所要時間: 4 時間
Android Studio をインストールしてセットアップし、初めてのプロジェクトを作成して、デバイスまたはエミュレータで実行します。

Android Studio の概要
動画
Android Studio のダウンロードとインストール
Codelab
初めての Android アプリを作成する
Codelab
Android Emulator で初めてのアプリを実行する
Codelab
Android Emulator を接続する方法
Codelab
次のステップ
動画
クイズ
基本的なレイアウトを作成する

パスウェイ 3 | 所要時間: 3 時間
テキストと画像を表示するシンプルなユーザー インターフェースを備えた Android アプリを作成します。

Jetpack Compose の概要
動画
誕生日カードアプリを設計する
動画
テキスト コンポーザブルを使用してシンプルなアプリを作成する
Codelab
Android アプリに画像を追加する
Codelab
練習問題: Compose の基本
Codelab
プロジェクト: 名刺アプリを作成する
Codelab
次のステップ
動画
クイズ
ユニット 2: アプリ UI を作成する

3 つのパスウェイ | 所要時間: 21 時間

引き続き Kotlin の基礎を学習し、よりインタラクティブなアプリを作成します。
  • Kotlin で条件、関数型、クラス、ラムダ式を使用します。
  • コンポジションと再コンポーズの仕組みを理解します。
  • アプリの UI にボタンを追加し、ユーザーがタップした際に応答するようにします。
  • ユーザーが入力したデータを処理するアプリを作成します。
  • 状態に基づいてデータを表示し、データが更新されると変更を自動的に反映する方法について学習します。
  • 個別の関数をテストする単体テストを作成します。
Kotlin の基礎

パスウェイ 1 | 所要時間: 8 時間
Kotlin、オブジェクト指向プログラミング、ラムダのその他の基礎について学習します。

Kotlin の基礎
動画
Kotlin で条件を記述する
Codelab
Kotlin で null 可能性を使用する
Codelab
Kotlin でクラスとオブジェクトを使用する
Codelab
Kotlin で関数型とラムダ式を使用する
Codelab
演習: Kotlin の基礎
Codelab
次のステップ
動画
クイズ
アプリにボタンを追加する

パスウェイ 2 | 所要時間: 6 時間
Android アプリでボタンのクリックに応答する方法について学習します。

Dice Roller アプリの概要
動画
インタラクティブな Dice Roller アプリを作成する
Codelab
Android Studio のデバッガを使用する
Codelab
演習: クリック動作
Codelab
次のステップ
動画
クイズ
UI と状態を操作する

パスウェイ 3 | 所要時間: 7 時間
ユーザー入力からチップを計算するチップ計算アプリを作成します。

Compose の状態を理解する
動画
チップ計算アプリの概要
動画
Compose の状態の概要
Codelab
カスタムのチップを計算する
Codelab
自動テストを作成する
Codelab
プロジェクト: アートスペース アプリを作成する
Codelab
次のステップ
動画
クイズ
ユニット 3: リストの表示とマテリアル デザインの使用

3 つの pathway | 所要時間: 15 時間

データのリストを表示するアプリを作成し、マテリアル デザインでアプリをより美しくする方法を学びます。
  • Kotlin でデータクラス、関数、コレクションを使用します。
  • テキストと画像の両方を表示するアプリでスクロール可能なリストを作成します。
  • リストアイテムを操作するクリック リスナーを追加します。
  • アプリにアプリバーを追加し、アプリのテーマを変更します。
  • マテリアル デザインに基づき、色、シェイプ、タイポグラフィを駆使して、直感的な最新のユーザー インターフェースを構築します。
Kotlin の基礎(その他)

pathway 1 | 所要時間: 8 時間
より面白くて楽しい Android アプリを作成できる、その他の Kotlin プログラミングのコンセプトについて学びます。

Kotlin の基礎(その他)
動画
ジェネリック、オブジェクト、拡張機能
Codelab
Kotlin でコレクションを使用する
Codelab
コレクションを操作する高階関数
Codelab
演習: クラスとコレクション
Codelab
クイズ
スクロール可能なリストを作成する

pathway 2 | 所要時間: 4 時間
Compose を使用して、テキストと画像のスクロール可能なリストを表示するアプリを作成します。

Affirmations アプリの概要
動画
スクロール可能なリストを追加する
Codelab
アプリアイコンを変更する
Codelab
演習: グリッドを作成する
Codelab
次のステップ
動画
クイズ
美しいアプリを作成する

pathway 3 | 所要時間: 3 時間
マテリアル デザイン、アニメーション、ユーザー補助に関するおすすめの方法を用いて、アプリをより美しく直感的に操作できるようにします。

Compose でのマテリアル デザインの概要
動画
Jetpack Compose でのマテリアル テーマ設定
Codelab
Jetpack Compose でのシンプルなアニメーション
Codelab
ユーザー補助機能のテスト
Codelab
演習: スーパーヒーローのアプリを作成する
Codelab
プロジェクト: 30 日間アプリの作成
Codelab
次のステップ
動画
クイズ
ユニット 4: ナビゲーションとアプリ アーキテクチャ

3 つのパスウェイ | 所要時間: 27 時間

より複雑なアプリを作成するためのアプリ アーキテクチャのベスト プラクティスについて学習します。一貫性があり予測可能なユーザー エクスペリエンスを実現するため、アプリ内でさまざまな画面間を移動できるようにします。
  • アクティビティとそれらのライフサイクルについて説明します。
  • 最新の Android アーキテクチャについて理解します。
  • StateFlow と UDF パターンを使用して、状態とイベントを処理します。
  • ViewModel を追加してデータと状態を保存します。
  • Compose で Navigation コンポーネントをセットアップして使用します。
  • レスポンシブ UI とは何かを理解します。
  • ウィンドウ クラスのサイズを使用して、さまざまな画面サイズに適応したアプリを作成します。
  • ナビゲーション ドロワーをアプリに追加します。
アーキテクチャ コンポーネント

パスウェイ 1 | 所要時間: 9 時間
アプリ アーキテクチャと、ViewModel、UI の状態、StateFlow を使用してより複雑なアプリを作成する方法を学習します。

ユニット 4 へようこそ
動画
アクティビティのライフサイクルのステージ
Codelab
アプリ アーキテクチャの概要
動画
アーキテクチャ: UI レイヤ
動画
Compose での ViewModel と状態
Codelab
ViewModel をテストする単体テストを作成する
Codelab
演習: Dessert Clicker に ViewModel を追加する
Codelab
次のステップ
動画
クイズ
Jetpack Compose でのナビゲーション

パスウェイ 2 | 所要時間: 6 時間
Navigation コンポーネントを使用して多数の画面を備えたより複雑なアプリを作成する方法と、異なるコンポーザブル間を移動してデータを渡す方法について学習します。

ナビゲーションと Cupcake アプリの概要
動画
Codelab
Cupcake アプリをテストする
Codelab
演習: ナビゲーションを追加する
Codelab
次のステップ
動画
クイズ
さまざまな画面サイズに適応する

パスウェイ 3 | 所要時間: 13 時間
このパスウェイでは、アプリをさまざまな画面サイズに適応させてユーザー エクスペリエンスを向上させる方法と、アダプティブ UI のテスト方法について学習します。

アダプティブ レイアウト
動画
Reply アプリの概要
動画
ダイナミック ナビゲーションを使用してアダプティブ アプリを作成する
Codelab
アダプティブ レイアウトでアプリを作成する
Codelab
演習: スポーツアプリを作成する
Codelab
プロジェクト: My City アプリを作成する
Codelab
次のステップ
動画
クイズ
ユニット 5: インターネットに接続する

2 つのパスウェイ | 所要時間: 14 時間

Kotlin コルーチンを使用して複数のタスクを一度に実行し、Retrofit で HTTP と REST を使用してインターネットからデータを取得する方法を学習します。次に、Coil ライブラリを使用してアプリに画像を表示します。
  • 同時実行の基本と、Android アプリでコルーチンを使用する方法について説明します。
  • 最新の Android アプリ アーキテクチャでデータレイヤを定義して理解します。
  • データアクセスを一元管理するリポジトリを実装します。
  • Retrofit を使用してリモート サーバーからデータを取得します。
  • Coil ライブラリを使用して、画像を読み込んで表示します。
  • 依存関係インジェクションを実装してクラスを分離し、アプリのテスト、メンテナンス、スケーリングを容易にします。
インターネットからデータを取得する

パスウェイ 1 | 所要時間: 6 時間
コルーチンを実装して、アプリをブロックすることなく複数のタスクを同時に実行し、HTTP と REST を使用してインターネットからデータを取得する方法を学習します。

インターネットに接続する
動画
Kotlin プレイグラウンドのコルーチンの概要
Codelab
Android Studio のコルーチンの概要
Codelab
HTTP / REST の概要
動画
インターネットからデータを取得する
Codelab
次のステップ
動画
クイズ
インターネットから画像を読み込んで表示する

パスウェイ 2 | 所要時間: 3 時間
アーキテクチャに関するベスト プラクティスをアプリに適用し、Coil を使用して画像をダウンロードして表示します。

アーキテクチャ: データレイヤ
動画
リポジトリと手動依存関係挿入を追加する
Codelab
インターネットから画像を読み込んで表示する
Codelab
練習: Amphibians アプリを作成する
Codelab
プロジェクト: Bookshelf アプリの作成
Codelab
次のステップ
動画
クイズ
ユニット 6: データの永続化

3 つのパスウェイ | 所要時間: 10 時間

スムーズで一貫性のあるユーザー エクスペリエンスを実現するため、データをローカル デバイスに保存して、ネットワークが中断してもアプリの動作を継続できるようにする方法について学習します。
  • SQLite データベースに対するデータの挿入、更新、削除を行うための SQL の基礎を学びます。
  • Room ライブラリを使用して、Android アプリにデータベースを追加します。
  • Database Inspector を使用して、データベースの問題をテストしてデバッグします。
  • Preference DataStore を使用して、ユーザー設定を保存します。
SQL の概要

パスウェイ 1 | 所要時間: 2 時間
SQL を使用してリレーショナル データベース内のデータを読み取って操作する方法を学習します。

データベースと SQL の概要
動画
SQL を使用してデータベースに対する読み取りと書き込みを行う
Codelab
次のステップ
動画
クイズ
Room を使用してデータを永続化する

パスウェイ 2 | 所要時間: 6 時間
Room ライブラリを使用すると、Android アプリでリレーショナル データベースを簡単に作成して使用できます。

Kotlin Flow の実践
動画
Flow のテスト
記事
Room Kotlin API を使用する
動画
Room を使用してデータを永続化する
Codelab
Room によるデータの読み取りと更新
Codelab
演習: Bus Schedule アプリを作成する
Codelab
次のステップ
動画
クイズ
DataStore でキーを使用してデータにアクセスし保存する

パスウェイ 3 | 所要時間: 2 時間
Android アプリで Preferences DataStore を使用してシンプルな Key-Value ペアデータを保存する方法を学習します。

Datastore の概要
動画
Preferences Datastore
動画
DataStore を使用して設定をローカルに保存する
Codelab
プロジェクト: フライト検索アプリを作成する
Codelab
次のステップ
動画
クイズ
ユニット 7: WorkManager

1 つのパスウェイ | 所要時間: 6 時間

Android Jetpack の WorkManager API を使用すると、アプリが終了したりデバイスが再起動したりした場合でも実行し続ける必要があるバックグラウンド処理(データ バックアップや新しいコンテンツのダウンロードなど)のスケジュールを設定できます。
  • バックグラウンド処理で実行する必要がある長時間実行タスクを定義します。
  • Android アプリに WorkManager を追加します。
  • Worker オブジェクトを作成して処理をキューに追加します。
  • WorkRequest の制約を作成します。
  • Background Task Inspector を使用して WorkManager を検査し、デバッグします。
WorkManager でタスクのスケジュールを設定する

パスウェイ 1 | 所要時間: 3 時間
WorkManager を使用するタイミングと方法について学習します。WorkManager は、アプリケーション プロセスがまだ実行中かどうかにかかわらず、実行する必要があるバックグラウンド作業を処理する API です。

WorkManager の概要
動画
WorkManager の実装
動画
WorkManager によるバックグラウンド処理
Codelab
高度な WorkManager とテスト
Codelab
演習: Water Me アプリを作成する
Codelab
クイズ
ユニット 8: Compose とビュー

2 つのパスウェイ | 所要時間: 4 時間

ビューをベースとした従来の UI ツールキットと Compose を同じアプリ内で併用する方法について学習します。このユニットでは、相互運用 API について、およびビュー内の既存のアプリに新機能を追加する場合や、ビューを使用する既存のライブラリを使用する場合、Compose 内でまだ利用できない UI コンポーネントを使用する場合のおすすめの方法についても学習します。
  • ビューベースの UI ツールキットについて理解し、XML を使用してアプリ UI を作成します。
  • ビューで作成したアプリにコンポーザブルを追加します。
  • アプリに Navigation コンポーネントを追加し、追加したコンポーネントを使用してフラグメント間を移動できるようにします。
  • AndroidView を使用してビューを表示します。
  • Compose アプリにビューベースの既存の UI コンポーネントを追加します。
ビュー内の Android ビューと Compose

パスウェイ 1 | 所要時間: 3 時間
Android ビューでアプリを作成するための基礎と、ビューで作成したアプリにコンポーザブルを追加する方法について学習します。

Android ビューシステム
動画
ビューで Android アプリを作成する
Codelab
ビュー内の Compose
動画
Compose を以前のアプリに追加する
Codelab
クイズ
Compose 内のビュー

パスウェイ 2 | 所要時間: 1 時間
Jetpack Compose で作成したアプリに既存のビューを追加して使用する方法について学習します。

Compose 内のビュー
動画
Compose のビュー相互運用機能
Codelab
Compose を以前のアプリに追加する
Codelab
クイズ