今回からは、とうとうアプリを作っていきます。と言ってもいきなりとてもすごいものを作るのも無理だし、どういうふうにすればいいのかもわからないので、まずは入力した文字を表示するプログラムを作ります。まずプロジェクトを作成してください。詳しくはこちら

-
STEP1ボタンを作る入力するためのボタンを作りましょう。
-
STEP2テキストフィールドをつくるテキストを入力するための箱を作りましょう。
-
STEP3テキストを表示させる実際に入れた文字を表示させます。
-
STEP4ビルドしてみるシミュレーターを使ってビルドしてみましょう。
ボタンを作る
まず入力した後確認用のボタンを作ります。ライブラリから追加する詳しい方法はこちら

追加していきます。

もともと最初にHelloworldのテキストがあったので、下に追加すると、縦に二つ並びます。
次にテキストフィールドを追加します。
テキストフィールドの追加
ライブラリから
TextFieldをTextとButtonの真ん中に入れます。

そうすると今こんな感じになっているはずです。

実際に動かしていきましょう。
プログラムを作る
まず、入力した文字を入れておく変数を作成します。変数は箱のようなものです。
@State var text:String = ""
これは、
struct ContentView: View {
のすぐ下に書きます。@Stateをつけることで、textという変数は変更可能な変数になります。Stringという型は、もじや数字、記号なんかも入れられる万能な型です。
ボタンなどのデザインも少し変えましょう。
まずボタンです。今このようなコードになっているはずです。
Button(action: {}) { Text("Button") }
これを次のように変えます。
Button(action: {}) { Text("押して!!") .foregroundColor(.green) .font(.largeTitle) .frame(width: 240, height: 70, alignment: .center) .background(Color.orange) }
「.」から始まるコードがデザインです。foregroundColorは文字色、fontはフォント、frameは大きさ、backgroundはテキストの下の設定です。今回はカラーを設定しています。
Textのデザイン
Textはこのようにしました。
Text("Hello, World!") .foregroundColor(.blue) .font(.largeTitle) .frame(width: 240, height: 70, alignment: .center) .background(Color.gray)
先ほどのと同じように設定しています。
TextFieldのデザイン
TextDieldはこんな感じ
TextField("何か入力してください。", text: $text) .frame(width: 240, height: 30, alignment: .center) .textFieldStyle(RoundedBorderTextFieldStyle())
text:のところを$textに変えてください。
それでは、本当にプログラムをしていきます。
プログラム
Buttonのところを見てください。actionと書かれたあとに大括弧があると思います。{}
それにプログラムを書いていきます。このボタンはキーボードを閉じることにします。
まず先にimport SwiftUIのすぐ下にこう書きます。
extension UIApplication { func Keyend() { sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil) }
キーボードを下ろすようにします。先ほどのButtonに戻り、こう書きます。
UIApplication.shared.Keyend()
こうすれば下ろすことができます。次にTextが変数を表示できるようにします。こう書きます。
Text("\(text)")
この逆スラッシュはoptionと¥を同時に押すことで入れることができます。こうすればもう完成です。ビルドしてみましょう。ウィンドウの左上にある再生ボタンでビルドできます。ビルドが完了するとシミュレーターが立ち上がり、作ったアプリを使えます。

お疲れ様でした。
Swiftを始める時にインターネットだけでの独学は難しい!!と考える人もいると思います。「SwiftUI iPhoneアプリ開発入門ノート」は丁寧に解説してくれるのでとても便利です。