サトリク
この講座では、文字を入力するTextFieldを使ったアプリを作っていきます！
動作環境
| item | Version |
|---|---|
| Swift | 5.2.4 |
| Xcode | 11.5 |
この講座の完成イメージ
今回開発するアプリは、講座3、講座4、講座5で学んだ知識を使って、入力フォームに入力した文字を次の画面に表示させるというアプリです。
アプリ開発手順
プロジェクトを作成
下のDockからXcodeを起動しましょう。
もし、Xcodeを開いている方は、command + shift + 1を押すと、次の画面を開けます。
「Create a new Xcode project」を選択
①Single View Appを選択
②Nextをクリック
①「Product Name」にInputFormと入力
②「Language」はSwiftを選択
③「User Interface」でStoryboardを選択
④全てチェックなし
（そのほかは任意です。）
⑤「Next」をクリック
storyboard(画面レイアウト)の編集
①Main.storyboardを選択
②右上のプラスボタンをクリック
③TextFieldを中央にドラッグ&ドロップ
これで、TextFieldが配置できました。
TextFieldを横に広げます。
①プラスボタンをクリック
②Buttonを中央にドラッグ&ドロップ
①ボタンを選択
② 
（Show the Attributes inspector）をクリック
③Titleを決定に変更し、FontをSystem 25.0に変更
①ボタンの範囲を広げる
② （Show the Attributes inspector）をクリック
③Text ColorをWhite Colorに変更
④Backgroundを任意（画像は#4c84bc）の色に変更
①プラスボタンをクリック
②ViewControllerをドラッグ&ドロップ
これで、2つ目の画面ができました。
①プラスボタンをクリック
②Labelをドラッグ&ドロップ
①Labelを広げる
② （Show the Attributes inspector）をクリック
③FontをSystem 25.0に変更
storyboardがiPhone11なので、シミュレーターもiPhone11に変更します。
このようにな画面になっていれば成功です。
画面遷移
決定ボタンをcontrolを押しながら、2つ目の画面にドラッグ&ドロップ
PresentModallyを選択
ボタンを押したら、次の画面に遷移することを確認しましょう。
確認ができたら次に進みましょう。
コードと紐付け
①左の画面バーを選択
②command + option + control + enterでコード画面と2分割にする
11行目と12行目の間に、controlを押しながら、ドラッグ&ドロップ
①NameにnameTextFieldと入力
②Connectをクリック
これをすることで、コード上でTextFieldに入っている値を取得できるようになります。
2つ目の画面の処理を書くファイルを追加します。
今の状態を図解するとこんな感じです。
①Cocoa Touch Classを選択
②Nextをクリック
①ClassにNextViewControllerと入力
②Nextをクリック
Createをクリック
これで、このような状態になりました。
次は、紐付けていきます。
①Main.storyboardを選択
②右側の画面のバーをクリック
③ 
(Show the Identity inspector)を選択
④ClassをNextViewControllerを選択
これで、画面とswiftファイルが紐づきました。
①右側の画面のバーを選択
②command + option + control + enterで2分割
11行目と12行目の間にcontrolを押しながら、ドラッグ&ドロップ
①NameにgreetingLabelと入力
②Connectをクリック
①Main.storyboardを選択
②Segueを選択
③ （Show the Attributes inspector）をクリック
④identifierにtoNextと入力
これで、画面とコードの紐付けが完了です。
次は、処理を書いていきます。
コーディング
ViewControllerをダブルクリック
まずは、TextFieldにヒントを表示させます。
14行目あたりを以下のように変更してください。
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
nameTextField.placeholder = "名前を入力してください。"
}
この1行で、nameTextFieldのプレースフォルダーに「名前を入力してください。」と表示させています。
実行すると、このようにTextFieldにヒントが表示されます。
NextViewControllerをダブルクリック
13行目あたりに、以下の1行を追加しましょう。
var nameData = ""
前の画面から受け取った値を入れる箱を用意するようなイメージです。
もう一度、ViewControllerを開きます。
20行目あたりに以下のコードを追加しましょう。
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
if segue.identifier == "toNext" {
let nextView = segue.destination as! NextViewController
nextView.nameData = nameTextField.text!
}
}
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {は、Segueの実行時に呼ばれます。
if segue.identifier == "toNext" {は、segueのIDがtoNextだった場合呼ばれます。
let nextView = segue.destination as! NextViewController2つ目の画面のViewControllerを取得します。
nextView.nameData = nameTextField.text!2つ目の画面のnameDataに入力された値を渡します。
もう一度NextViewControllerを開きます。
15行目あたりを以下のように変更しましょう。
override func viewDidLoad() {
super.viewDidLoad()
greetingLabel.text = "\(nameData)さんこんにちは！"
}
これで、2つ目の画面に配置したLabelに1つ目の画面で入力した名前を表示させます。
ViewController.swift
//
// ViewController.swift
// InputForm
//
// Created by RikutoSato on 2020/07/04.
// Copyright © 2020 RikutoSato. All rights reserved.
//
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var nameTextField: UITextField!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
nameTextField.placeholder = "名前を入力してください。"
}
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
if segue.identifier == "toNext" {
let nextView = segue.destination as! NextViewController
nextView.nameData = nameTextField.text!
}
}
}
NextViewController.swift
//
// NextViewController.swift
// InputForm
//
// Created by RikutoSato on 2020/07/04.
// Copyright © 2020 RikutoSato. All rights reserved.
//
import UIKit
class NextViewController: UIViewController {
@IBOutlet weak var greetingLabel: UILabel!
var nameData = ""
override func viewDidLoad() {
super.viewDidLoad()
greetingLabel.text = "\(nameData)さんこんにちは！"
}
}
実行して確認
実行して確認してみましょう。
このようになっていれば完成です！
まとめ
うまくできましたでしょうか？
わからない部分があれば、TwitterのDMか、コメントで質問して貰えばすぐ返します。(コメントはレス遅いかも)
次の講座では、BMIを計算するアプリを作っていきます！
次の講座
【Swift/Xcode超入門】BMIを計算するアプリを作ってみよう！
本で勉強したい方はこちら
【2021年版】Swift5/Xcode/OSアプリ開発のオススメ参考書・本・書籍まとめ。初心者から上級者まで！
ゼロから学ぶiPhoneアプリ開発入門
