Swiftでユーザー名の登録画面と遷移画面とエラー処理を作ってみた。

# 読んで欲しい人
・色々忘れた未来の自分
・詳しい方🙇‍♀️

# 今回のゴール　
・決定ボタンを押したら遷移画面先にユーザー名が登録できた風App
・ユーザー名を登録する画面
・エラーメッセージの機能

https://twitter.com/megcom3/status/1712017210577912099

# 学んだこと
・モーダルのような画面遷移の作り方
・.TextField()に記入された文字列のデフォルトを小文字にする方法
・.TextField()に記入された文字列が未記入の場合、エラーメッセージを出力する。
・.padding()の```.leading```と```.trailing```がLeft、Rightでない理由

# 書いたコード && 解説してみた
```swift
//
//  ContentView.swift
//  TextfieldApp
//
//  Created by emi oiso on 2023/10/10.
//

import SwiftUI

struct ContentView: View {
    //キーボード等の外部入力から値の初期値
    @State var inputText = ""
    //遷移画面に遷移するタイミングの初期値
    @State var helloUserView = false
    // エラーメッセージの状態
    @State var errorMessage = ""
    
    var body: some View {
        //出力したい文字列や、TextFieldの枠、Buttonの位置を縦並びにする。
        VStack {
            Text("ユーザー名を記入してください。")
            //TextFieldの枠内に表示させたい文字を枠内に記述させる。
            TextField(
                "ユーザー名を記入",
                //キーボード等の外部入力から値を受け取り、TextFieldの枠内に表示させる。
                text:$inputText
            )
                //キーボード等の外部入力から英字を入力する際、小文字で入力できるようにしている。
                .autocapitalization(.none)
                //TextFieldの枠のコーナーを丸くなるようにしている。
                .textFieldStyle(.roundedBorder)
                //Text()、TextField()、Button()の間隔をいい感じに調節してくれる。
                .padding()
            // エラーメッセージを表示
            Text(errorMessage)
            //エラーメッセージの色を赤に設定
                .foregroundColor(.red)
            //決定ボタンの動作や設定を決める。
            Button(action: {
                //決定ボタンが機能しているか確認したいからユーザー画面には出力されないが、
                //コンソールで確認ができるようにデバックしている。
                print("button pressed")
                //決定ボタンがクリックされたら、遷移画面が遷移しても良いという印をつけてる。
                helloUserView = true
                //でもユーザー名が未記入の場合、エラーメッセージを出力するよという処理。
                if inputText.isEmpty {
                    //ユーザー名が空の場合、エラーメッセージを設定
                    errorMessage = "※ユーザー名が未記入です。"
                    //ユーザー名が空の場合、遷移画面に遷移はさせないという印をつける。
                    helloUserView = false
                }
            },label:  {
                //ボタンの名前を決めてる。
                Text("決定")
                    .frame(width: 100,height: 50)
                    //決定の文字の色は白にしたよ。
                    .foregroundColor(Color.white)
                    //ボタンの色はオレンジにしたよ。
                    .background(Color.orange)
                    //ボタンの角の丸の半径を10に設定したよ。
                    .cornerRadius(10)
            })
            .sheet(isPresented: $helloUserView) {
                //遷移先のページにキーボード等の外部入力から受け取った値を渡すよ。
                TextfieldApp.helloUserView(username: inputText)
            }
        }
        .padding()
    }
}
//遷移先のシートの設定だよ
struct helloUserView: View {
    //ユーザー名は文字型で入力されるよ、だから文字型で準備していてね。
    var username: String
    var body:some View {
        //入力された文字 + さん、こんにちは。で出力するよ。
        Text("\(username)さん、こんにちは。")
    }
}
#Preview {
    ContentView()
}
```

# 書いたコード && 解説なし
```swift
//
//  ContentView.swift
//  TextfieldApp
//
//  Created by emi oiso on 2023/10/10.
//

import SwiftUI

struct ContentView: View {
    @State var inputText = ""
    @State var helloUserView = false
    @State var errorMessage = ""
    
    var body: some View {
        VStack {
            Text("ユーザー名を記入してください。")
            TextField(
                "ユーザー名を記入",
                text:$inputText
            )
                .autocapitalization(.none)
                .textFieldStyle(.roundedBorder)
                .padding()
            Text(errorMessage)
                .foregroundColor(.red)
            Button(action: {
                print("button pressed")
                helloUserView = true
                if inputText.isEmpty {
                    errorMessage = "※ユーザー名が未記入です。"
                    helloUserView = false
                }
            },label:  {
                Text("決定")
                    .frame(width: 100,height: 50)
                    .foregroundColor(Color.white)
                    .background(Color.orange) 
                    .cornerRadius(10)
            })
            .sheet(isPresented: $helloUserView) {
                TextfieldApp.helloUserView(username: inputText)
            }
        }
        .padding()
    }
}
struct helloUserView: View {
    var username: String
    var body:some View {
        Text("\(username)さん、こんにちは。")
    }
}
#Preview {
    ContentView()
}
```


# 参考にした動画や記事
▼ 基本のコード

https://youtu.be/Y9ykaX9HDjI?si=o7eKQhWqf2U9Tu3c

▼ 色の心理効果

https://www.leadplus.co.jp/blog/science-of-color.html

▼ Amazonのサイト
![スクリーンショット 2023-10-11 15.32.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823837/42901fab-4cee-8fbb-6263-9846fb0752b6.png)

▼ .TextField()の先頭の英数字を小文字で入力できるようにする。

https://qiita.com/fluith/items/3cfc54bc0d4db6a7e5b1

▼ .padding()の```.leading```と```.trailing```がLeft、Rightでない理由

https://capibara1969.com/3895/

▼　.padding()に初期値はあるのか

https://stackoverflow.com/questions/65368402/what-is-the-default-value-of-the-padding-modifier-in-swift