Swift学習記＃5 「カウントアプリの開発」

#はじめに
前回の投稿で、swiftでの開発を行う上で必要な
基礎知識のアウトプットも終了しました。

とりあえずソースコードを見て、おおよそ何がしたいのか
理解できる様になってきたので、
今回からは**実際にアプリを開発しながら**
更なるレベルアップをして行きたいと思います。

もちろん知らないメソッドやプロパティなどが出てきたら、
随時アウトプットして行きます。

#カウントアプリ開発
ということで、今回は簡単なカウントアプリの開発を通して
**開発の手順**と、**Xcodeの機能の把握**を行っていこうと思います！

#開発環境
`swift5.2.2`、`Xcode(Version11.4.1)`で、
シミュレーターはiphone11で行っています。

#仕様書の作成
まずはXcodeを開く前にアプリの仕様書を作成しましょう。
最初はこんな感じで、
![スクリーンショット 2020-05-19 15.07.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477695/85894550-a741-27c0-df7b-e00c545604c1.png)

**①アプリの仕様、②作成手順、③アプリイメージ**くらいの
簡単な仕様書でいいと思います。

技術力を上げると共に仕様書の書き方もマスターしましょう！

#新規プロジェクトの作成
基礎編の投稿では`playground`を利用していましたが、
アプリの開発では`project`を利用して行きます。

新規プロジェクトを作成するには、
Xcodeを開き`Create a new Xcode project`を選択します。
![スクリーンショット 2020-05-18 11.32.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477695/5957c4bf-f3fc-d0c0-417e-d338cfeca8fe.png)
すると、こんな感じの画面に移ります。

今回作るアプリのViewページは1つなので、
`Single View App`を選択します。
![スクリーンショット 2020-05-18 11.36.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477695/84e11b1b-8a6d-af05-9bcf-8c9a1e7de3fa.png)
すると、今度はこんな感じの画面に移ります。
![スクリーンショット 2020-05-18 11.43.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477695/94cb24df-e700-8ce4-48ff-5e0141dd959a.png)

ここでは、プロジェクトの名前やドメインなどを決めて行きます。
・`Product Name`
　プロジェクトの名称を決めます。
　今回は、カウントアプリなので`CountApp`と入力しましょう。

・`Team`
　これは、実機テストをする際には設定する必要がありますが、
　今回は設定しません。

・`Organization Name`
　会社などの場合は入力が必要ですが、
　基本は入力しなくても大丈夫です。

・`Organization Identifier`
　任意の値でOKです。
　しかし、App Storeにリリースする場合はこの値で
　アプリを識別するため、重複しないものでないといけません。
　オススメは、自身のメールアドレスを逆さにする事です。

・`Language`
　使用する言語は、SwiftとObjective-Cを選べます。
　今回は、`swift`を選びましょう。

・`User Interface`
　ここでは、`Storyboard`を選択してください。 

この後、プロジェクトを保存する場所を選択して、
新規プロジェクトの作成は終了です。

次からは、いよいよ開発に入って行きます！
#アプリケーションの開発
ここからの作業は、アプリ仕様書の**作業手順２**以降の作業となります。
##作業手順２　パーツの配置
###２−１　配置
まずは、左側にある`NavigatorArea`の
`Main.storyboard`を開きます。
![スクリーンショット 2020-05-19 12.40.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477695/2e16f691-a1cd-a4f6-b24e-9c5705581586.png)
ここに、ボタンやラベルなどのパーツを付け足して行きます。

次に`Library`を開いて、「UILabel」×１、「UIButton」×２を配置します。
`Library`は右上にある「＋」のボタンから開けます。
![スクリーンショット 2020-05-19 15.11.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477695/c3e3a245-5de6-b184-3e6b-61acc422b930.png)
![スクリーンショット 2020-05-19 15.15.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477695/dde430be-52c6-07e7-34d3-404ddaa0694e.png)
今の段階では大きさや位置の調節などは行わなくて大丈夫です。
###２−２　位置、大きさ
まずは、`UILabel`の調節から行って行きます。
① Utility areaを表示させる
② UILabelのTextを「0」に、FontのSizeを「100」に変更
③ Alignmentを中央に変更
![スクリーンショット 2020-05-19 15.43.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477695/fbecc338-d449-9ab6-047c-08cb44e06d9a.png)

次に`UIButton`の調節を行います。
① 左のUIButtonのUtility areaを表示させる
② UIButtonのTextを「UP」に、FontのSizeを「50」に変更
③ 右のUIButtonのUtility areaを表示させる
④ UIButtonのTextを「DOWN」に、FontのSizeを「50」に変更
![スクリーンショット 2020-05-19 15.52.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477695/499975d6-dfc0-bda4-6bee-4fe20b85969f.png)
![スクリーンショット 2020-05-19 16.02.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477695/f7a84065-c145-28a6-6cf3-cd66120c4b69.png)

最後にパーツの位置を調整して行きます。
調節にはXcodeの`AutoLayout`の機能を利用します。

#####＊AutoLayout機能
　`AutoLayout機能`とは、画面やパーツに幅や高さ、余白、位置などの
　制約を設定し、表示を調整できる機能です。

　また、ここで設定した機能は、
　縦、横の表示が変更されても自動で調節されます。

まずは、`UILabel`の余白の制約を設定します。
①右下の5つあるAutoLayout機能から`Add New Constraints`
　を選択する。
②`Add New Constraints`の上部で余白を設定できます。
＊注意：四角についている赤い点線が、直線になった時のみ
　　　　入力した値が有効になります。
③下部にる`Add3~`をクリックし、
　設定した余白がおかしくないか確認する。
![スクリーンショット 2020-05-23 10.40.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477695/668a34eb-e829-68f9-e833-e0df049103be.png)
適用後
![スクリーンショット 2020-05-23 10.56.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477695/a0c3b840-9940-e128-f140-22b3cc77431c.png)
こんな感じになっていればクリアです。

次に、今のままでは右寄りになっている`UPボタン`と`DOWNボタン`の
位置を設定して行きます。
①右下の5つあるAutoLayout機能から`Align`を選択する。
②`Horizontally in Container`と`Vertically in Container`に
　値を入力する。
　・「UPボタン」にHorizontally「-80」、Vertically「150」
　・「DOWNボタン」にHorizontally「80」、Vertically「150」

　＊Horizontally in Containerは水平方向の
　　Vertically in Containerは垂直方向の位置を定義する。

水平方向とは、
![スクリーンショット 2020-05-23 11.04.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477695/a0e244a9-e4f9-990f-860a-f92f493a3a2b.png)
垂直方向とは、
![スクリーンショット 2020-05-23 11.04.07のコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477695/cd4dd81f-43f8-5514-5e0a-2686f5386d65.png)
中央線から見て、プラス方向であればプラスの値を、
マイナス方向であればマイナスの値を入力する。

③下部にる`Add２~`をクリックし、
　設定した位置がおかしくないか確認する。
![スクリーンショット 2020-05-23 11.29.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477695/640f7d1c-5769-6b15-b997-05b4aa215b9d.png)
こんな感じになればクリア！

ここまでで、手順２は終了です。
ただ1つ注意して欲しいのが、AutoLayout機能についてです。

AutoLayout機能は便利ですが、
「値を間違った」、「思った通りの表示にならなかった」などで
調節したい時は、Utility areaの`Size Inspecter`から
行ってください。

AutoLayoutからもう一度値を入力すると、
二重で定義することとなり、エラーが起きてしまします‼︎
![スクリーンショット 2020-05-23 11.38.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477695/c57849ba-126b-799a-8802-20225e04924d.png)

##作業手順３　パーツの接続
Main.storyboard上に配置したラベルやボタンを、
ソースコードから扱えるようにOutletやActionの接続を行います。

###３−１　Outlet接続
Outlet接続とは、Storyboard上のパーツを、
ソースコード上の変数として使えるようにする仕組みです。

①まずは、`Assistant editor`を開きます。
　Assistant editorは右上のボタンから開けます。
![スクリーンショット 2020-05-23 11.56.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477695/46313173-bb78-3115-e837-f66b0f376bcb.png)
![スクリーンショット 2020-05-23 11.59.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477695/e3039689-bb10-7c3b-30dd-310a9feeaf19.png)

②次に、Storyboardの「UILabel」を選択し、
　Controlキーを押しながら、Assistant editorで開いた
　View Controllerのソースコード上にドラッグ＆ドロップします。
　Nameの部分には、「Label」と入力しておきましょう。
![スクリーンショット 2020-05-23 12.06.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477695/09bcdde3-ca67-1097-1569-3a8b69d7f395.png)
　するとこんな感じになるはずです。
![スクリーンショット 2020-05-23 12.09.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477695/6a99985f-7829-d003-5399-0fabd47d1075.png)
　これで、Outlet接続は完了です。

###３−２　Action接続
ここでは、ボタンの押されたときにアクションが動く様に
ソースコードとの関連づけを行います。

①まずは、「UPボタン」をControlを押しながら、
　Assistant editorにドラッグ＆ドロップします。　
　そして、NameはUPBotton、TypeにはAnyと入力しましょう。
![スクリーンショット 2020-05-23 12.20.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477695/09ec4d66-e924-328d-3ab5-ca306de6ed15.png)
　「DOWNボタン」も同じ手順でドラッグ＆ドロップし、
　NameはDOWNBotton、TypeにはAnyと入力しましょう。
![スクリーンショット 2020-05-23 12.23.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477695/db9ca461-87f2-09ff-2ef2-1008661179ea.png)
 するとこんな感じになるはずです。
![スクリーンショット 2020-05-23 12.23.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477695/3572b266-2dd6-75b5-f757-03acc77a12fc.png)
　これで、Action接続は完了です。

##作業手順４
ここで、接続したアクションに処理を書いて行きます。
コードはそこまで難しくないので、この手順ではソースコードを
そのまま掲載します。

```ViewController.swift
//
//  ViewController.swift
//  CountApp
//

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
    
    @IBOutlet weak var Label: UILabel!
    
    var number = 0
    
    @IBAction func UPBotton(_ sender: Any) {
        number = number + 1
        Label.text = String(number)
    }
    
    @IBAction func DOWNBotton(_ sender: Any) {
        if number < 1 {
            return
        } else {
            number = number - 1
            Label.text = String(number)
        }
    }
}
```
これでアクションの定義は完了です。

コードの詳しい解説はしなので、わからない事があれば
自分で調べてみてください！

##作業手順５
ここまで来たらあとはテストです。
せっかく作っても動かないのでは意味がありませんからね。
シミュレーターでテストしてみましょう！

###Build手順
①まずは、左上の「▶️」のボタンを押して、アプリをBuildします。
　この手順で、シミュレーターにアプリのデータがインストールされます。
②シミュレーターが起動するとアプリが起動するので、
　期待どうりの動作をするか確認しましょう！
　特に、DOWNボタンを押して0以下にならないかは
　見ておいてください。
![スクリーンショット 2020-05-23 12.46.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477695/1362e515-f70b-6afb-54df-60befef8be1a.png)
問題なければ完成です‼︎
エラーが出た場合は、諦めずに
エラーの箇所の解説に戻って再度挑戦しましょう‼︎

今回は小規規模の開発だったため、一度しかBuildしませんでしたが、
開発の規模が大きいのであれば、こまめにBuildすることをオススメします。

#これまで
これでカウントアプリの開発は終わりです。
今回はボタンが二つだけでしたが、
複数配置して機能を増やしてみても面白いと思います‼︎

AutoLayout機能あたりは慣れないとミスすることも多いですが、
慣れてくると便利に感じてきます。
頑張って慣れましょう！

今回は初めての開発ということで、
画像を多めに使い、解説も出来るだけ詳しくすることを意識しています。
そのため、ごちゃごちゃしていて読みづらいかもしれません。
わかりにくい事があれば、コメントしてください‼︎