編集履歴

回答編集履歴

回答の内容を編集

2025/03/29 13:38

投稿

スコア676

test CHANGED Viewed

@@ -2,13 +2,57 @@
 考え方としては
 xmlで記述していて見えない何かがインフレートやレンダリングを担っていたのを、コンポーザブル関数を使って明示的に行うと考えることですっきりしました。
 htmlやxmlのような別言語で書かれたプロパティではなくてオブジェクトとして一度定義しそれを使って関数に何かを任せるという発想で問題が解決できそうです。
+やはりxmlのような別言語で書いていた部分がオブジェクトとなるのは若干違和感がありますが、そういうものだという認識で問題なさそうです。
+そうすることで、
+1の問題は若干解決しました。
+コンポーザブルな関数がhtmlの役割ではなく、クラスがhtmlの役割を担っている。
+2の問題についても、
-若干違和感がありますが、classがxmlの代替で、コンポーズ関数は今まで見えないところでしていたインフレートであるととらえると、フレームワークチックになりますが、以下のようなコードが出来上がりました。
+関数にデータを渡すだけでよくって、入力要素をパーツとして考える必要がなくなり、見やすさを担保できるようになりました。(time pickerなどの実装はまた一考必要かもしれない)
+3についても完全に解決したました。
-(違和感も慣れ+フレームワークとしてそういうものだと解釈することで特に引きずるところはなさそう)
+4については若干コンテキストが違うが、下記のコードでは従来と同じような動作を担保できている。
+また、stateについてはリストなどはまた違ってくるだろうが、その時その時で適切なstateを選ぶ方向でよいのではないかという結論に至りました。
 data classを用いて、
 TextFieldに必要な引数をすべて定義しておく
+ベースとなるクラスでインスタンスを持つ。
+また、関数ではベースとなるクラスを引数に取ることで、紐づけを行う
+// 構造体 + 関数のやり方みたい。やっぱりkotlinはこういう結論に至るのか
+表示関連
+(オブジェクトの型により表示状態を持つことで、LoginIdTextFieldなどのUI要素は不要になった)
+LoginFormModelはインスタンスをdata classと保持することでログの出力や状態の比較が簡単になりそう(未検証)。
+考えをブラッシュアップしてソースコードに反映し以下ような構成になりました。
+フレームワークとしての考えが提唱されていないのでModelだらけになっていますが。。。
+textFieldのベース
-```kt
+```kt
+open class TextFieldModel {
+    var state: TextFieldState by mutableStateOf(TextFieldState(""))
+        protected set
+    open var action: TextFieldAction by mutableStateOf(
+        TextFieldAction(
+            onValueChange = ::updateInputValue)
+    )
+        protected set
+    open var style: TextFieldStyle by mutableStateOf(
+        TextFieldStyle()
+    )
+        protected set
+    fun updateInputValue(value: String) {
+        state = state.copy(inputValue = value)
+    }
+}
-data class TextFieldParams(
+data class TextFieldStyle(
     val modifier: Modifier = Modifier,
     val enabled: Boolean = true,
     val readOnly: Boolean = false,
@@ -31,126 +75,161 @@
 }
-```
-ベースとなるクラスでインスタンスを持つ。
-また、関数ではベースとなるクラスを引数に取ることで、紐づけを行う
-// 構造体 + 関数のやり方みたい。やっぱりkotlinはこういう結論に至るのか
-```kt
-open class InputStateBase {
+data class TextFieldState(
-    open protected var _inputValue = mutableStateOf("")
-    val inputValue: State<String> = _inputValue
-    open fun updateInputValue(value: String) {
-        _inputValue.value = value
+    val inputValue: String ,
-    }
-    open var textFieldParams: TextFieldParams by mutableStateOf(
-        TextFieldParams()
-    )
+)
-        protected set
+data class TextFieldAction(
+    val onValueChange: (String) -> Unit ,
-}
+)
 @Composable
 fun AppTextFiled(
-    state: InputStateBase
+    textFieldModel: TextFieldModel
 ) {
     TextField(
-        value = state.inputValue.value,
-        onValueChange = {state.updateInputValue(it)},
-        modifier = state.textFieldParams.modifier,
-        enabled = state.textFieldParams.enabled,
-        readOnly = state.textFieldParams.readOnly,
-        textStyle = state.textFieldParams.textStyle(),
-        label = state.textFieldParams.label,
-        placeholder = state.textFieldParams.placeholder,
-        leadingIcon = state.textFieldParams.leadingIcon,
-        trailingIcon = state.textFieldParams.trailingIcon,
-        isError = state.textFieldParams.isError,
-        visualTransformation = state.textFieldParams.visualTransformation,
-        keyboardOptions = state.textFieldParams.keyboardOptions,
-        keyboardActions = state.textFieldParams.keyboardActions,
-        singleLine = state.textFieldParams.singleLine,
-        maxLines = state.textFieldParams.maxLines,
-        minLines = state.textFieldParams.minLines,
-        interactionSource = state.textFieldParams.interactionSource,
-        shape = state.textFieldParams.shape(),
-        colors = state.textFieldParams.colors()
-    )
-}
-```
-こうすることで、
-1の問題は若干解決しました。
-コンポーザブルな関数がhtmlの役割ではなく、クラスがhtmlの役割を担っている。
-2の問題についても、
-関数にデータを渡すだけでよくって、入力要素をパーツとして考える必要がなくなり、見やすさを担保できるようになった。(time pickerなどの実装はまた一考必要かもしれない)
-3についても完全に解決した。
-4については若干コンテキストが違う。またこの変更によりかくつきが発生するようになった気がするため少し調整が必要か。
-そのほかの構成要素の修正
-state関連
-```kt
-// バリデーションが必要であれば継承とインタフェースを用いて拡張してください
-class LoginIdState : InputStateBase() {
-    override var textFieldParams: TextFieldParams by mutableStateOf(
-        TextFieldParams(
-            label = { Text("Login ID") }
-        )
-    )
-}
-class LoginPasswordState : InputStateBase() {
-    override var textFieldParams: TextFieldParams by mutableStateOf(
-        TextFieldParams(
-            label =  { Text("Password") },
-            visualTransformation = PasswordVisualTransformation(),  // パスワードを隠す
-        )
-    )
-}
-```
-表示関連
-(オブジェクトの型により表示状態を持つことで、LoginIdTextFieldなどのUI要素は不要になった)
+        value = textFieldModel.state.inputValue,
+        onValueChange = {textFieldModel.action.onValueChange(it)},
+        modifier = textFieldModel.style.modifier,
+        enabled = textFieldModel.style.enabled,
+        readOnly = textFieldModel.style.readOnly,
+        textStyle = textFieldModel.style.textStyle(),
+        label = textFieldModel.style.label,
+        placeholder = textFieldModel.style.placeholder,
+        leadingIcon = textFieldModel.style.leadingIcon,
+        trailingIcon = textFieldModel.style.trailingIcon,
+        isError = textFieldModel.style.isError,
+        visualTransformation = textFieldModel.style.visualTransformation,
+        keyboardOptions = textFieldModel.style.keyboardOptions,
+        keyboardActions = textFieldModel.style.keyboardActions,
+        singleLine = textFieldModel.style.singleLine,
+        maxLines = textFieldModel.style.maxLines,
+        minLines = textFieldModel.style.minLines,
+        interactionSource = textFieldModel.style.interactionSource,
+        shape = textFieldModel.style.shape(),
+        colors = textFieldModel.style.colors()
+    )
+}
+```
+buttonのベース
+```kt
+open class ButtonModel {
+    open var action: ButtonAction by mutableStateOf(
+        ButtonAction(
+            onClick = ::onClick)
+    )
+        protected set
+    open var style: ButtonStyle by mutableStateOf(
+        ButtonStyle()
+    )
+        protected set
+    open fun onClick() {
+        println("on click")
+    }
+}
+data class ButtonStyle(
+    val modifier: Modifier = Modifier,
+    val enabled: Boolean = true,
+    val interactionSource: MutableInteractionSource? = null,
+    val elevation: @Composable () -> ButtonElevation? = { ButtonDefaults.elevation() },
+    val shape: @Composable () -> Shape = { MaterialTheme.shapes.small },
+    val border: BorderStroke? = null,
+    val colors:@Composable () -> ButtonColors = { ButtonDefaults.buttonColors() },
+    val contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
+)
+data class ButtonAction(
+    val onClick: () -> Unit,
+)
+@Composable
+fun AppButton(
+    buttonModel: ButtonModel,
+    content:@Composable RowScope.() -> Unit
+) {
+    Button(
+        onClick = buttonModel.action.onClick,
+        modifier = buttonModel.style.modifier,
+        enabled = buttonModel.style.enabled,
+        interactionSource = buttonModel.style.interactionSource,
+        elevation = buttonModel.style.elevation(),
+        shape = buttonModel.style.shape(),
+        border = buttonModel.style.border,
+        colors = buttonModel.style.colors(),
+        contentPadding = buttonModel.style.contentPadding,
+        content = content
+    )
+}
+```
+loginButtonModel
+```kt
+class LoginButtonModel(
+    private val onDelegate: () -> Unit
+): ButtonModel() {
+    override var action: ButtonAction by mutableStateOf(
+        ButtonAction(
+            onClick = onDelegate)
+    )
+        protected set
+}
+```
+Loginに際するビジネスロジックの集約(これはサービスなのか？ドメインなのか？ViewModelなのか？アプリケーション的にはViewModelのスコープがないとスレッド的に問題ありそうだし、ドメインが状態を持っていいのかもわからない)
+```kt
+class LoginFormModel(){
+    val loginIdModel = LoginIdStateModel()
+    val loginPasswordModel = LoginPasswordStateModel()
+    val loginButtonModel = LoginButtonModel(::submitLogin)
+    private fun submitLogin(){
+        // 入力をすべてリセット
+        clearForm()
+    }
+    private fun clearForm(){
+        loginIdModel.action.onValueChange("")
+        loginPasswordModel.action.onValueChange("")
+    }
+}
+```
+当然インスタンスはviewModelが持つ
+```kt
+class LoginViewModel () : ViewModel() {
+    val loginFormModel = LoginFormModel()
+}
+```
+UI
 ```kt
 @Composable
 fun LoginScreen(
     viewModel: LoginViewModel = viewModel<LoginViewModel>()
 ) {
-    val screenState =  viewModel.loginFormState
+    val loginFormModel =  viewModel.loginFormModel
     Column(modifier = Modifier.padding(16.dp)) {
-        AppTextFiled(screenState.loginIdState)
+        AppTextFiled(loginFormModel.loginIdModel)
-        AppTextFiled(screenState.loginPasswordState)
+        AppTextFiled(loginFormModel.loginPasswordModel)
+        AppButton(loginFormModel.loginButtonModel){
-    }
+        }
-}
+    }
+}
-```
+```
-そのほかの構成は変更なし
+UIの状態は依存注入できるようにすべきなのか疑問
----
-追記
-そのほかの構成要素に変化なしと書きましたが以下のようなクラスはdata classと定義して状態の比較や取得を簡単に出来るようにした方がいいかも、などと思考していたのが抜けていました。
+ログをだして、テストをかけるようにすべきなら注入できたほうがいいが、そもそも予期できないような外部リソースの取得がないので、セットする処理を淡々と書けばいい気もする。。。
-まだ、実験できていません。
-```kt
-class Screen1State(){
-    val loginIdState = LoginIdState()
+TextFieldStateなどは処理ではなくて状態のラッパーでしかないので。。。
-    val loginPasswordTextField = LoginPasswordState()
+また、MVVMやMVCの観点からいってModelがアプリケーション内での状態を持つのはなんとなく不自然かもしれないので、用語を整理できればしたい。
-}
-```
+*回答を編集しました。文字数の関係から一部コードを削除しました。

考えを追記

2025/03/28 08:31

投稿

utm.

スコア676

test CHANGED Viewed

@@ -141,4 +141,16 @@
 そのほかの構成は変更なし
+---
+追記
+そのほかの構成要素に変化なしと書きましたが以下のようなクラスはdata classと定義して状態の比較や取得を簡単に出来るようにした方がいいかも、などと思考していたのが抜けていました。
+まだ、実験できていません。
+```kt
+class Screen1State(){
+    val loginIdState = LoginIdState()
+    val loginPasswordTextField = LoginPasswordState()
+}
+```