「COMPOSE を用いた ANDROID アプリ開発の基礎」の学習支援⑧　-ユニット２パスウェイ3

皆さん、こんにちは！又はこんばんは！初めての方は初めまして！
Google Codelabsの「COMPOSE を用いた ANDROID アプリ開発の基礎」コースのお手伝いをする「りおん」です。
今回は、ユニット２「アプリ UI を作成する」の中のパスウェイ3「UIと状態を操作する」です。

Compose を用いた Android アプリ開発の基礎 - UI と状態を操作する  |  Android Developers

補足なので、「COMPOSE を用いた ANDROID アプリ開発の基礎」コースで心配になった時、エラーが起きて詰まった時や、分からないことがあった時、軽く復習したい時に見てください！
また、目次を見て、自分に必要なところだけ見るのをお勧めします！

この記事を作成するにあたり使用しているAndroid StudioのバージョンはGiraffeです。バージョンによってはUIが違ったりもするのでご了承ください。
また、2024年2月13日現在の「COMPOSE を用いた ANDROID アプリ開発の基礎」コースを参考にしています。

学習内容

いつも通り①、②は動画でした。

③Composeの状態の概要

「状態」に関する内容でした。
そもそもの状態の意味として、時間とともに変化する可能性がある値であることを学び、その後この状態の変更を監視するためのState 型と MutableState 型を学び、再コンポーズしても値を保持できるようにするremember関数を学んだと思います。
次に、状態を複数のコンポーズ可能な関数と共有するための操作として状態ホイスティングを学んだと思います。

③Composeの状態の概要で学んだ内容（状態ホイスティングを除く）

④カスタムのチップ金額を計算する

ここでは、アクションボタンの設定法とスイッチを追加する方法を主に学んだと思います。
余談ですが、個人情報を書く時などに、Doneアクションボタン（下の画像の青い✓ボタン）を押して「記入漏れがございます」というメッセージが出てきたことはあると思います。適切なところでNextボタンとDoneボタンを使い分けれたらそれだけでもユーザーエクスペリエンスは向上するので意識することをお勧めします。

④カスタムのチップ金額を計算するで学んだ内容

⑤自動テストを作成する

自動テストには、関数,クラス,プロパティをテストするローカルテストと、UI をテストするインストルメンテーションテストの二種類で分類されていることを学んだ後、ローカルテスト、インストルメンテーションテストそれぞれの作成法を学んだと思います。

アプリがmain > java > com.example.tiptimeなら、テストもtest > java > com.example.tiptime
つまり、テストは、アプリコードのディレクトリと同じパッケージ構造にする

ローカルテスト

インストルメンテーションテスト

用語

③Composeの状態の概要

mutable

日本語訳すると「可変」です。
mutableState（=可変+状態）のようにmutable+名詞は今後も出てくるので知っておくと便利です。

ハードコード、ハードコーディング

二つとも同じ意味で、IT用語辞典さんによれば「コンピュータプログラムを開発する際に、特定の動作環境を決め打ちして、その環境を前提としたデータをソースコードの中に直に記述すること。」
ここでは、定数や決まった文字列のように固定されたものをコード中に記述することです。下のコードの様に"0"という具体的な値を変数に入れることがハードコードの例です。

val amountInput = "0"

トラッキング

一般的には追跡するという意味ですが、この分野では、トラッキングは「監視する」という意味だと考えてください。
そのため、Codelabsの「Compose はトラッキングする状態を認識している必要があります。」は「Compose は監視する状態を認識している必要があります。」と訳してください。

監視

監視自体の意味は誰しもが知っていますが、状態が変更されたかどうか知るためには状態を監視する必要があります。
Codelabsで習った下のコードでは、amountInputを監視しています。キーボードで値を入力したら（＝変数 amountInputが変わったら）OnVlueChangeコールバックが呼び出されテキストボックスに更新後の値が入ります。

//Codelabsより
@Composable
fun EditNumberField(modifier: Modifier = Modifier) {
   var amountInput by remember { mutableStateOf("") }
   TextField(
       value = amountInput,
       onValueChange = { amountInput = it },
       modifier = modifier
   )
}

ラップする

IT用語辞典さんによれば「あるクラスや関数、データ型などが提供する機能やデータを含み、別の形で提供すること」です。
下の例ですと、"0"という文字列(String型)がmutableStateOf()関数によってMutableState<String>型という別の形になった（ラップされた）とみることが出来ます。

var amountInput = mutableStateOf("0")

トリガー

IT用語辞典さんによれば、トリガーとは「きっかけになる出来事が起こったら自動的に特定の処理を起動するソフトウェアの仕組みなど」のことです。
そのため、「トリガーされる」というのは引き金を引くことと同様で「発動させる」という意味です。

コールバック

IT用語辞典さんによれば、「コールバック（callback）とは、コンピュータプログラム中で、ある関数などを呼び出す際に別の関数などを途中で実行するよう指定する手法のこと」と説明されています。
関数 TextFieldのonValueChangeコールバック関数を見てみましょう。
TextField関数に対してonValueChange関数を引数として渡すことで、TextField関数の中で、TextField関数とは別の関数であるonValueChange関数が実行されています。これがコールバックです。
個人的には、意味さえ理解していれば説明を読むときにコールバックを省略しても構わないと思います。例えばonValueChangeコールバック関数ならonValueChange関数と読むようにすると文章が簡単になるかもしれません。

//Codelabsより
var amountInput = mutableStateOf("0")
   TextField(
       value = amountInput.value,
       onValueChange = { amountInput.value = it },
       modifier = modifier
   )

プロパティ委任

委任とは「仕事を任せること」という意味です。委譲とはほぼ同じ意味で一時的に任せるのは委任で永久的なのが委譲なのですが、そこはあまり考えなくても大丈夫です。Codelabsではプロパティ委任と書かれていますがプロパティ委譲の方が一般的です。
"by"を使うことにより、byの後に書かれたクラスのゲッター関数とセッター関数を再利用することが出来ます。
下の例ではamountInput プロパティでrememberクラスのゲッター関数とセッター関数を使用することが出来る様になります。

//Codelabsより
var amountInput by remember { mutableStateOf("") }

ステートレス

IT用語辞典さんによると、ステートレスとは「システムが現在の状態を表すデータなどを保持せず、入力の内容によってのみ出力が決定される方式。」という説明がされています。
そのため、ステートレスなコンポーザブルは、自身の状態を保存しないコンポーザブルという意味になります。

⑤自動テストを作成する

コードスニペット

英語のsnippetは「小片、断片、切れ端」という意味です。
IT用語辞典さんによると、コードスニペットとは「様々なプログラムに挿入して利用することができる、特定の機能を実現した短いコードのまとまりのこと」と説明されています。
具体的に、「次のコード スニペットのローカルテスト」という文が出てきたら「次の短いコードのローカルテスト」と訳したらしっくりくると思います。

ディレクトリ

ファイルを保管するための場所のことです。

パッケージ

機能ごとにファイルをまとめたものです。
下の例だとUIに関することとしてui.themeというパッケージがあり、その下にColor.ktなどUIに関することが記述されているファイルがあります。

注意点

",(カンマ)"を忘れやすい

今回のCodelabsで一番よく起こるであろうミスです。
エラーが起きたら真っ先に",(カンマ)"が抜けていないかを疑ってください。
下の画像がその例ですが、カンマがあるかないかだけに注目するとどこが間違っているか分かると思います。

KeyboardType.Numberの後にカンマがない場合

アプリを実行したいのにテストが実行される

Android Studioでアプリを実行する時は画面上側の▷ボタンですが、その▷ボタンを押してもローカルテスト又はインストルメンテーションテストを実行してしまうことがあります。
この対処法は、実行する設定を表示している所（エミュレータ名の隣にある）を押して、[app]を選びます

1.Android Studioの画面上側黄色い丸で囲まれた所を押す

2. アプリを実行したい場合は[app]を押す

さいごに

今回もCodelabsでの学習お疲れさまでした！
ユーザーからの入力を受け付けるテキストボックスの作成や、状態に関することを学んだことで作れるアプリの幅がさらに増えたと思います。最後に作成したアートスペースアプリに至っては、画像が漫画の一ページと考えると、簡易的ですが電子書籍を閲覧できるアプリを作ったのだと考えることもできます！
この後も素晴らしいアプリを作るためのツールをたくさん紹介されていますので是非進めていってください！！