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

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

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

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

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

#仕様書の作成
まずはXcodeを開く前にアプリの仕様書を作成しましょう。
最初はこんな感じで、

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

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

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

新規プロジェクトを作成するには、
Xcodeを開きCreate a new Xcode projectを選択します。

すると、こんな感じの画面に移ります。

今回作るアプリのViewページは1つなので、
Single View Appを選択します。

すると、今度はこんな感じの画面に移ります。

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

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

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

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

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

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

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

次からは、いよいよ開発に入って行きます！
#アプリケーションの開発
ここからの作業は、アプリ仕様書の作業手順２以降の作業となります。
##作業手順２　パーツの配置
###２−１　配置
まずは、左側にあるNavigatorAreaの
Main.storyboardを開きます。

ここに、ボタンやラベルなどのパーツを付け足して行きます。

次にLibraryを開いて、「UILabel」×１、「UIButton」×２を配置します。
Libraryは右上にある「＋」のボタンから開けます。

今の段階では大きさや位置の調節などは行わなくて大丈夫です。
###２−２　位置、大きさ
まずは、UILabelの調節から行って行きます。
① Utility areaを表示させる
② UILabelのTextを「0」に、FontのSizeを「100」に変更
③ Alignmentを中央に変更

次にUIButtonの調節を行います。
① 左のUIButtonのUtility areaを表示させる
② UIButtonのTextを「UP」に、FontのSizeを「50」に変更
③ 右のUIButtonのUtility areaを表示させる
④ UIButtonのTextを「DOWN」に、FontのSizeを「50」に変更

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

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

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

まずは、UILabelの余白の制約を設定します。
①右下の5つあるAutoLayout機能からAdd New Constraints
　を選択する。
②Add New Constraintsの上部で余白を設定できます。
＊注意：四角についている赤い点線が、直線になった時のみ
　　　　入力した値が有効になります。
③下部にるAdd3~をクリックし、
　設定した余白がおかしくないか確認する。

適用後

こんな感じになっていればクリアです。

次に、今のままでは右寄りになっている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は垂直方向の位置を定義する。

水平方向とは、

垂直方向とは、

中央線から見て、プラス方向であればプラスの値を、
マイナス方向であればマイナスの値を入力する。

③下部にるAdd２~をクリックし、
　設定した位置がおかしくないか確認する。

こんな感じになればクリア！

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

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

AutoLayoutからもう一度値を入力すると、
二重で定義することとなり、エラーが起きてしまします‼︎

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

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

①まずは、Assistant editorを開きます。
　Assistant editorは右上のボタンから開けます。

②次に、Storyboardの「UILabel」を選択し、
　Controlキーを押しながら、Assistant editorで開いた
　View Controllerのソースコード上にドラッグ＆ドロップします。
　Nameの部分には、「Label」と入力しておきましょう。

　するとこんな感じになるはずです。

　これで、Outlet接続は完了です。

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

①まずは、「UPボタン」をControlを押しながら、
　Assistant editorにドラッグ＆ドロップします。　
　そして、NameはUPBotton、TypeにはAnyと入力しましょう。

　「DOWNボタン」も同じ手順でドラッグ＆ドロップし、
　NameはDOWNBotton、TypeにはAnyと入力しましょう。

するとこんな感じになるはずです。

　これで、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以下にならないかは
　見ておいてください。

問題なければ完成です‼︎
エラーが出た場合は、諦めずに
エラーの箇所の解説に戻って再度挑戦しましょう‼︎

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

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

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

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