常連

### 実現したいこと
マルチプラットフォームアプリを作成する際に関数型UIというXMLとは違う方法でUIを作ると思いますが、従来の方法と異なっており良いやり方がわからずにいます。
自分はkotlinのjetpackを使用していますが、flutter/dartに影響を受けているようなので、一般的な考え方で大丈夫なのでよい方法があれば教えていただきたいと思っています。
Reactなどもバインディングを扱うと思いますが、それらの開発経験がないので助言をいただけると幸いです。

### 考え方について
オブジェクト指向と関数型プログラミング双方とも完璧にできるわけではないのと、
従来のネイティブアプリやHTMLではnameのようなidが各入力要素に紐づけられておりそこから値をとるという方式をとっていて、私はこれにもメリットを感じていましたが、関数型UIは完全に入力要素とレイアウト要素が埋め込まれており更新ロジックをUI側に書かなければならない状態にある種困惑しています。(入力要素って関数じゃなくてオブジェクトじゃないの。。。と)
ただ、関数型のメリットとしてもわかっているつもりで、引数に取った値から常に同じ状況を再現できるということでこの長所を生かした設計にしたいです。(例えば状態をログに書き込み再現しやすくするなど)
また、レイアウトと入力要素を分離するのが当面の目標になっています。

### 前提
まず、初めに入力要素を定義し従来のnameのようなアクセス方法に近いやり方でやりたいと思いまして、下記のようなコードを作りました。

ベースクラス
```kt
// 共通のベースクラス
open class InputState {

    private var _inputValue = mutableStateOf("")
    val inputValue: State<String> = _inputValue

    // 値を更新する共通のメソッド
    open fun updateInputValue(value: String) {
        _inputValue.value = value
    }
}
```

入力要素の紐づけ
```kt
// バリデーションが必要であれば継承とインタフェースを用いて拡張してください
class LoginIdState : InputState() {
    // ここに特別なロジックが必要な場合は追加できますが、現状はそのままです
}

// 引数の型を強要する
@Composable
fun LoginIdTextField(state: LoginIdState ) {
    Column(modifier = Modifier.padding(16.dp)) {
        TextField(
            value = state.inputValue.value,
            onValueChange = { state.updateInputValue(it) },
            label = { Text("Login ID") }
        )
    }
}

class LoginPasswordState : InputState() {
}

@Composable
fun PasswordTextField(state: LoginPasswordState) {
    Column(modifier = Modifier.padding(16.dp)) {
        TextField(
            value = state.inputValue.value,
            onValueChange = { state.updateInputValue(it) },
            label = { Text("Password") },
            visualTransformation = PasswordVisualTransformation()  // パスワードを隠す
        )
    }
}
```

uiのパーツとしては一旦としてログイン画面として、ログインIDとログインパスワードがあると仮定しています。
また質問にさしあたりコメントにて拡張方法を補足しています。

それぞれのパーツは様々な画面で様々な方法で扱われると思うので、画面事にグループ化し管理しやすくしたいと思っており、最終的には以下のような構成要素を定義しています。

そのほかの構成要素

グループ化
```kt
// TODO: この画面特有の処理を実装する
// info: あるパーツが別の画面で意味としては同じでも機能としては違うケースを考慮してください
class Screen1State(){
    val loginIdState = LoginIdState()
    val loginPasswordTextField = LoginPasswordState()
}
```

UI
```kt
@Composable
fun TestScreen1(
    screenState: Screen1State = viewModel<MyViewModel>().screen1State
) {
    Column(modifier = Modifier.padding(16.dp)) {
        LoginIdTextField(screenState.loginIdState)
        PasswordTextField(screenState.loginPasswordTextField)
    }
}
```

ViewModel
```kt
class MyViewModel : ViewModel() {
    val screen1State = Screen1State()
}
```

### 発生している問題
単刀直入に言って、皆さまはこの関数型UIという制約の中でどのように開発を進めているのでしょうか？
また、私のやり方だと致命的な弱点があったりしますか？
パフォーマンスの影響や拡張性の観点から言って、どのようにコーディングしていくのが正しいのでしょうか。

また、具体的な質問としてもう一つ
これらのUI要素は
TestScreen1とあるように実際にはUIとクラスの紐づけだけをして
別のスクリーンで定義されているであろうレイアウトに単に埋め込む方法として使いたいです。
その場合、コンポーザブルな要素(TestScreen1)はmapなどを返すようにするしかないのでしょうか？

また、各要素は
UIの拡張性などを考えるとそれぞれの具体的な実装は書かずにカリー化すべきなのでしょうか？
(オブジェクト指向の考えに強く引っ張られている。。。)

カリー化の例
```kt
// 引数の型を強要する
@Composable
fun LoginIdTextField(
    state: LoginIdState
): @Composable (callback:  @Composable (LoginIdState) -> Unit) -> Unit {

    return { callback ->
        callback(state) 
    }
}

@Composable
fun TestScreen1(
    screenState: Screen1State = viewModel<MyViewModel>().screen1State
) {

    val loginIdTextField = LoginIdTextField(screenState.loginIdState)

    Column(modifier = Modifier.padding(16.dp)) {
        loginIdTextField{ state ->
            // 分けたことで柔軟にパディング調整などをできる
            Column(modifier = Modifier.padding(16.dp)) {
                TextField(
                    value = state.inputValue.value,
                    onValueChange = { state.updateInputValue(it) },
                    label = { Text("Login ID") },
                )
            }
        }
    }
}

```

すみません。それともう一つなのですが、
Stateの公開方法についても皆様がどうしているのかを伺いたいです。
現状のソース例であれば先に挙げたようにしてあり、カプセル化の観点からmutableStateofが別のstateに指し変わっても公開可能なようにStatenにしていますが、正直に言うとmutableState一択で問題ないのではないかと思っています。

```kt
// 共通のベースクラス
open class InputState {

    private var inputValue by mutableStateOf("")
        private set

    // 値を更新する共通のメソッド
    open fun updateInputValue(value: String) {
        inputValue = value
    }
}
```

最終的にはInputState以外にもCheckBoxStateやButtonState(Command?Action?)も適宜追加する必要はあると思っています。


### 試したこと
時間をかけて解決することもありますので、かれこれずっと考えています。(調べてもピンとくるものが正直ない気がします。。。)
その中でファイルごとにパーツを管理してクラス定義とUI要素をその中に固めて書いて、バリデーションように継承したクラスなどをそこに記述していけば整理がつくのでは？という発想が出てきたのでこれが問題なさそうか知識の共有をしたいと思い至りました。

### 補足情報（FW/ツールのバージョンなど）

Kotlin 
jetpack compose for multplatform

# 最後に質問を整理します

1. 今までのXMLやHTML、ネイティブアプリではnameのような一つの要素に紐づいたキーワードを使って、値の取得やセットを行っていました。ボタンであればクリックイベントの処理などもそこで行っていました。そのような感覚に近いやり方として、皆さまはどのように開発しているのでしょうか。

2. 各入力要素は変数との紐づけをする処理と、レイアウトに埋め込む処理の二つのことをしなければなりません。これらを分離する方法はあるのでしょうか。mapを使うのであれば、直接レイアウトに埋め込むほうがマシだと思っています。

3. UIの各要素をパーツ化すると、TextFieldのようなコンポーザブル関数が自由に引数をとれるとしてもそこにアクセスする手段がありません。これはカリー化などで状態を変更できるようにすべきなのでしょうか。(オブジェクトの考えに引っ張られているのでよくなさそう)

4. 入力の管理に使うStateに関して、StateやMutableStateの基本挙動とベストな設計が正直にいうとよくわかりません。いったんはStateとして公開しておいたほうが安全そうではありますが、これは本当に必要なのでしょうか。皆さんはどうしているのでしょうか。


質問が複雑になっており大変申し訳ございませんが、情報交換お力添えいただけると幸いです。
内容が不足していましたら、追記等致しますのでよろしくお願いいたします。

---
情報の追記

junerさんよりコメントをいただきました。
以下、ツールの詳細に記載した内容の補足及びやり取りとなります

> 関数型UI はどこ由来の用語でしょうか……？

すみません。コメント意図が今分かりました。用語の由来というか、要は私の開発体制が何から発せられているのかという話を聞きたいという意図ですね。
以下にルーツとなるリンクを貼ります。

Androidデベロッパー
(最も役に立たない、今回コメント返信に差し当たり参照)
https://developer.android.com/kotlin/multiplatform?hl=ja

Jet Brains ブログ
(次に役に立たない、今回コメント返信に差し当たり参照)
https://blog.jetbrains.com/ja/kotlin/2023/11/kotlin-multiplatform-stable/

Compose For Multiplatform
(最も有益だが、Web上のコミュニティの動向(ナレッジシェア)が追えない)
https://www.jetbrains.com/ja-jp/compose-multiplatform/

もっと詳細
https://www.jetbrains.com/help/kotlin-multiplatform-dev/compose-multiplatform-explore-composables.html


宣言的UIの入力要素の考え方について知りたい

## iOSで□の中に×があるような記号（☒）の文字化け発生する
先日、iOSのでWebページを確認したところ、以下の画像のような□の中に×があるような記号（☒）があることがわかりました。
![![文字化け](4cdfb4e98278a354611656da0c91bc05.png)]
他のブラウザ、OSで確認しましたが、やはりiOS特有の事象のようでした。
■Mac
　・Safari　問題なし
　・Chrome　問題なし
■Windows
　・Chrome　問題なし
■Android
　・Chrome　問題なし
■iOS
　・Safari　文字化け
　・Chrome　文字化け

どなたかデザインに詳しい方、原因と解決法を教えていただけないでしょうか。

**※補足**
Wordpressで投稿したWebページ上で上記のような事象となっています。
また、全てに記号（☒）がつく訳ではなく、一部のみになっています。
![文字化け例2](4d8426bcf826ebcbad100a955fa75dc3.jpeg)
```html
<!DOCTYPE html>
<html>
<head>
    
    <meta charset="utf-8">
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php if(is_category() | is_archive() | is_search() | is_tag() | is_paged()): ?>
    <meta name="robots" content="noindex,follow">
    <?php endif; ?>
	
	 <?php wp_head(); ?>
    
    <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="screen" href="<?php echo get_template_directory_uri(); ?>/css/style.css">
</head>
<body>
<ul>
    <li>フロントエンド</li>
    <li>バックエンド</li>
</ul>
</body>
<style>
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Arial, メイリオ, Meiryo, sans-serif;
  background-color: #F7F7FB; 
}
ul {
    padding-top: 30px;
    padding-bottom: 30px;
    margin-bottom: 50px;
    background-color: #fdfdfd;
    border: dotted #0e9cc7 1px;
    color: #1e366a;
    word-break: break-all;
    word-wrap: break-word;
}
</style>
```

iOSのみで文字化けが発生する問題

今まで新しいAWSコンソールの表示でしたが、何かの拍子に古いコンソール表示に代わってしまいました。
戻すボタン等あったら教えていただきたいです。主に使用しているのはEC2とセキュリティグループです。

AWSコンソールのUIを新しい表示に戻したい

ダイアログを作っているのですが、OKボタンは右側でしょうか。左側でしょうか？
私は右側だとは思うのですが、いかがでしょう

[キャンセル]  [OK]

vs


[OK]  [キャンセル]

OKボタン　右側？左側？

### 前提・実現したいこと

Androidアプリを開発しており、各画面のデザインは完了したところです。

ボタンナビゲーションやナビゲーションドロワーの設置を考えて、ユーザーの画面遷移を明確にした上で、各画面同士を繋げるためのプログラムを書こうとしています。


### 発生している問題・エラーメッセージ

状態遷移図とフローチャートは、プログラムを書くために作成したことがあるのですが、アプリ開発において画面遷移を明らかにするために、適切な図やグラフがわかりません。

### 試したこと

RE図でアプリ内でデータベース構造は明らかにしました。

他の図やグラフは、まだ作成していません。

[画面遷移図が簡単に作れる！「Overflow」とはどんなツール？
](https://webdesign-trends.net/entry/5598)という記事は読みましたが、デザイナー向けで、デザイナーなしでエンジニアがアプリ開発する時には、「どのような方法で画面遷移を明らかにしているのか」教えていただきたいです。

### 補足情報（FW/ツールのバージョンなど）
各画面のデザインは、紙に書いたもので、遷移の方法を明確化するときは画像として、スキャンしてPCに取り込むことも可能です。

アプリ開発における状態遷移を明確にするためにおすすめの図やグラフについて

unityUIのボタンの画像を変えたいのですが、どのようにすればいいでしょうか？

インスペクター上のイメージを変えたい画像に変更すれば、ボタンの機能は持たせたまま、見た目を変えられますでしょうか？

よろしくお願いします。

UnityのボタンUIの画像を変更する方法について

![イメージ説明](ecc24f27be8caf6ccc51030df95f33cd.png)

![イメージ説明](d8f973fe80d135e40a494e9f98c27e09.png)

デザインカンプのみです。まだコーディングはしていません。

# 選定言語
HTML CSS Javascript
できればこれで実現したい。

このWebサイトのようなスクロールに応じて電車が線を走るようなUIの実装イメージがわきません。
スクロールに応じて単純に追従する実装ならいろいろググれば出てきますが、
こういう複雑な追従方法はググっても出てきません。

こういうUIはそもそも実現不可能なのでしょうか？
実現できるならアイデアのヒントだけでもいいのでご教示お願いできないでしょうか？

スクロールに応じて特定の線に沿うように走るUI実装のイメージが湧かない

###知りたいこと
.NETアプリのGUIのデザイン方法を知りたい

ツール系の.NETアプリを作成すること多いが、GUIのカスタマイズ方法が
いまいちよく分からない。
PhotoShopやIllustrator等を使ってデザインをあらかじめしておいて、
それを.NETアプリ側にどのようにしてデザインを反映させるのかが分からない。

例えば、ボタンをデザインする場合は、
ボタンコントロールを継承してカスタムコントロールを作成する？
それとも、ボタンの背景にPhotoshop等でデザインした画像を指定するだけ？

.NETに限らず、iOSアプリやAndroidアプリ等、
最近ではSketch?等のUIデザインをした後に、そのデザインをどのように
アプリ側に反映させるのかが知りたいです。

###開発対象(環境)
・WindowsForm
→既存のアプリがWindowsFormによって作成されている為、そのUIをカスタマイズする
・WPF
→今後作成するアプリがWPFの可能性もある為
・UWP
→今後作成するアプリがUWPの可能性もある為

###追記
詳細については自力で調べようと思いますので、
各開発対象(環境)での一般的にUIデザインのコードへの反映方法が知りたいです。

UI Design