【第２回】Swiftアプリ開発チュートリアル -Food Tracker- のお供に（Connect the UI to Code 編）

# はじめに

AppleのSwiftアプリ開発チュートリアルを進めていて出てきた関数やクラスなどについて、調べたことを残していきます。
チュートリアルを進めながら、**ざっくりと**どういうものかを把握するためのお供になればと思います。

初学者のため、間違い等あればご指摘ください。 :bow: 

第１回：[Swiftアプリ開発チュートリアル -Food Tracker- のお供に（Build a Basic UI 編）](http://qiita.com/taji-taji/items/9202d944bf403957a22e)
第２回：Swiftアプリ開発チュートリアル -Food Tracker- のお供に（Connect the UI to Code 編）←今回はここ
第３回：[Swiftアプリ開発チュートリアル -Food Tracker- のお供に（Work with View Controllers 編）](http://qiita.com/taji-taji/items/a3a103b949bb7694c8b3)
第４回：[Swiftアプリ開発チュートリアル -Food Tracker- のお供に（Implement a Custom Control 編）](http://qiita.com/taji-taji/items/1ca474a4c2d2b4d779db)
第５回：[Swiftアプリ開発チュートリアル -Food Tracker- のお供に（Define Your Data Model 編）](http://qiita.com/taji-taji/items/2f2c4367752a839e8fb7)

# チュートリアルページ
https://developer.apple.com/library/content/referencelibrary/GettingStarted/DevelopiOSAppsSwift/ConnectTheUIToCode.html#//apple_ref/doc/uid/TP40015214-CH22-SW1

以下のような構成でレッスンが進んでいくので、それに沿って進めていきます。

- Building the UI
 - Build a Basic UI
 - **Connect the UI to Code** （今回はここ）
 - Work with View Controllers
 - Implement a Custom Control
 - Define Your Data Model
- Working with Table Views
 - Create a Table View
 - Implement Navigation
 - Implement Edit and Delete Behavior
 - Persist Data


# Connect the UI to Code

今回は以下のレッスンで出てきたものについて見ていきます。

https://developer.apple.com/library/content/referencelibrary/GettingStarted/DevelopiOSAppsSwift/ConnectTheUIToCode.html#//apple_ref/doc/uid/TP40015214-CH22-SW1


## ■ UIViewController

MVCのCにあたる部分で、アプリケーションの画面や画面の遷移を管理します。



### チュートリアルでの使用例

```swift:ViewController.swift
class ViewController: UIViewController {
```

### ドキュメント

- 公式
[UIViewController](https://developer.apple.com/documentation/uikit/uiviewcontroller)

- 参考
http://matome.naver.jp/odai/2140880437092838601
http://qiita.com/edo_m18/items/189acd18f1ecc368b5b0


## ■ @IBOutlet

Interface Builderから作成したパーツをコード内のプロパティと接続する属性。
IB は Interface Builder の略。
ストーリーボードからパーツを crl を押しながらコードにドラッグすると自動的に挿入され、接続される。


### チュートリアルでの使用例

```swift:ViewController.swift
    @IBOutlet weak var nameTextField: UITextField!
    @IBOutlet weak var mealNameLabel: UILabel!
```

### ドキュメント

- 参考  
http://iphone-app-program.com/newapp/iboutlet-and-ibaction/ibbas/


## ■ UITextField

テキストフィールドを管理するクラス。
ユーザーが編集可能な文字列を表示する。


### チュートリアルでの使用例

```swift:ViewController.swift
@IBOutlet weak var nameTextField: UITextField!
```

### ドキュメント

- 公式
[UITextField](https://developer.apple.com/documentation/uikit/uitextfield)


- 参考
http://swift-salaryman.com/uitextfield.php
http://iphone-tora.sakura.ne.jp/uitextfield.html


## ■ @IBAction

メソッドの前につけると、そのメソッドを Interface builder から指定・使用することができるようになる。
@IBOutlet同様、ストーリーボードからパーツを crl を押しながらコードにドラッグすると自動的に挿入され、接続される。

### チュートリアルでの使用例

```swift:ViewController.swift
@IBAction func setDefaultLabelText(_ sender: UIButton) {
}
```

### ドキュメント

- 参考  
https://www.youtube.com/watch?v=tvZz6sJ5lXI&index=36&list=PL9keCq_8Sv07r8uM4k8lNZdvF-KnHlwvO


## ■ UITextFieldDelegate

UITextFieldに関するdelegateプロトコル。
このプロトコルを採用することでTextFieldからいろいろなメッセージを受け取ることができ、
例えば、キーボードのリターンキーを押したときにコールされる `textFieldShouldReturn` メソッド等を実装できる。

delegateとは、あるオブジェクトの処理を別のオブジェクトに任せることです。
参考：https://www.youtube.com/watch?v=Ph8d_UkQeIU


### チュートリアルでの使用例

↓ViewControllerをUITextFieldDelegateに適応させる

```swift:ViewController.swift
class ViewController: UIViewController, UITextFieldDelegate {
```

↓UITextFieldDelegateのメソッドを実装

```swift:ViewController.swift
func textFieldShouldReturn(_ textField: UITextField) -> Bool {
    // Hide the keyboard.
    textField.resignFirstResponder()
    return true
}
```

### ドキュメント

- 公式
[UITextFieldDelegate](https://developer.apple.com/documentation/uikit/uitextfielddelegate)

- 参考
https://sites.google.com/site/propicaudio/sample-code/text-field
https://www.youtube.com/watch?v=Ph8d_UkQeIU
http://www.sirochro.com/note/swift-delegate-paturn/


## ■ ViewDidLoad
ViewControllerのviewがロードされた後に呼ばれる。


### チュートリアルでの使用例

```swift:ViewController.swift
override func viewDidLoad() {
    super.viewDidLoad()
    
    // Handle the text field’s user input through delegate callbacks.
    nameTextField.delegate = self
}
```

### ドキュメント

- 公式
[viewDidLoad()](https://developer.apple.com/documentation/uikit/uiviewcontroller/1621495-viewdidload)

- 参考
http://qiita.com/mo_to_44/items/0ca628b4cc74c8c5599d#viewdidload


## ■ textFieldShouldReturn
`UITextFieldDelegate`のメソッド。
TextFieldの入力でリターンキーが押されたときに呼ばれる。


### チュートリアルでの使用例

```swift:ViewController.swift
func textFieldShouldReturn(_ textField: UITextField) -> Bool {
    // Hide the keyboard.
    textField.resignFirstResponder()
    return true
}
```

### ドキュメント

- 公式
[textFieldShouldReturn(_:)](https://developer.apple.com/documentation/uikit/uitextfielddelegate/1619603-textfieldshouldreturn)

- 参考
https://akira-watson.com/iphone/textfield.html


## ■ resignFirstResponder
TextFieldに対して実装するとキーボートをtボートを閉じることができる。


### チュートリアルでの使用例

```swift:ViewController.swift
func textFieldShouldReturn(_ textField: UITextField) -> Bool {
    // Hide the keyboard.
    textField.resignFirstResponder()
    return true
}
```

### ドキュメント

- 公式  
[resignFirstResponder()](https://developer.apple.com/documentation/uikit/uiresponder/1621097-resignfirstresponder)



## ■ textFieldDidEndEditing
TextFieldの編集が終了した直後に呼ばれる。


### チュートリアルでの使用例

```swift:ViewController.swift
func textFieldDidEndEditing(_ textField: UITextField) {
    mealNameLabel.text = textField.text
}
```

### ドキュメント

- 公式
[textFieldDidEndEditing(_:)](https://developer.apple.com/documentation/uikit/uitextfielddelegate/1619591-textfielddidendediting)

- 参考
http://iphone-tora.sakura.ne.jp/uitextfield.html

---



# 参考サイト
http://matome.naver.jp/odai/2140880437092838601
http://qiita.com/edo_m18/items/189acd18f1ecc368b5b0
http://iphone-tora.sakura.ne.jp/uitextfield.html
https://akira-watson.com/iphone/textfield.html
https://sites.google.com/site/propicaudio/sample-code/text-field
https://www.youtube.com/watch?v=Ph8d_UkQeIU
http://www.sirochro.com/note/swift-delegate-paturn/
http://iphone-app-program.com/newapp/iboutlet-and-ibaction/ibbas/
http://swift-salaryman.com/uitextfield.php
https://www.youtube.com/watch?v=tvZz6sJ5lXI&index=36&list=PL9keCq_8Sv07r8uM4k8lNZdvF-KnHlwvO
http://qiita.com/mo_to_44/items/0ca628b4cc74c8c5599d#viewdidload


# 次のレッスン

第３回：[Swiftアプリ開発チュートリアル -Food Tracker- のお供に（Work with View Controllers 編）](http://qiita.com/taji-taji/items/a3a103b949bb7694c8b3)