【初心者向け】iOSアプリ開発 カウントアプリ

#カウントアプリを作ろう
今回は、カウントアプリを作成します！！
楽しみながら実際にアプリを作ってみましょう！

　↓↓　完成図　↓↓
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629694/7b537309-32ac-1d3c-3b56-7aaed647c056.png" width=30%>

#開発環境
**Swift 5**
**Xcode 12.4**
<img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F302458%2Fc25b4844-147d-2de1-a9a6-5f9425e055ab.png?ixlib=rb-1.2.2&auto=format&gif-q=60&q=75&s=75044c23b28a393730aca212951f1227" width=50%>

#開発準備
Xcodeを開き、下記の順番でファイルを作成します！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629694/ab229480-0928-0c08-f093-9ef0f70d46a0.png" width=70%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629694/f5077ea7-f918-af7e-d01e-e002d9842914.png" width=70%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629694/eb6d2f3b-2090-b160-fd36-73ed8423d783.png" width=70%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629694/0a55edee-ae31-8512-9eae-ffdce5944e56.png" width=70%>
↓**この画面が出てきたらアプリを作成できました！いぇい✌️**↓
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629694/14c53767-42a3-bedd-47c4-743b60b43aac.png" width=70%>
下の画像の①「Main.storyboard」を選択して移動し、②と③の機種を揃えてあげましょう！
※機種は自分が使ってるものや好きな機種を選んでね！
※②はシュミレーターの機種。③はstoryboardの機種。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629694/68a17a63-9e9b-6634-ea3c-44febe626f81.png" width=70%>
ここまでできたら、**command＋R**を押して、シュミレーターを立ち上げてみよう！
自分のパソコン内にiPhoneが出てくるからワクワクすっぞ^^
####これで開発準備は終了です！！

#Let's 開発！
##見た目
まずはアプリの見た目から作成していきます！
Codeを書こうとしているそこのあなた！ちょっと待ちぃや〜。そんな急がんでも！
実は...Xcodeを使えば、アプリの見た目を<font color="red">ドラック＆ドロップ</font>で作れるのです！いぇい✌️
主に**Main.storyboard**を使って作成していきます！

**右上の「＋」を押すと「Object」といった、いわゆる<font color="red">ボタンやテキストを入れる部分</font>を選ぶツールが開きます！**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629694/20afa8c9-83ea-8a5c-8ed2-586b6a9ade35.png" width=70%>

**ではさっそく、テキストを表示できる「Label」を検索し、それをスマホのような画面（storyboard）にドラック＆ドロップで配置しましょう！！**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629694/e0864c54-9e59-6e7e-b4e9-61af149078a7.png" width=70%>

**「Label」が配置できたら、右上の三本線を選択して、Labelの詳細設定を行いましょう！**
>テキスト内容を変えたい：Labelとなっているところを変更する。
フォントを変えたい：Fontのところを選択し、変更する。
背景色を変えたい：Backgroundから色を選択する。
中央や左右に揃えたい：Alignmentから選択し、変更する。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629694/d167e163-2e23-f77b-d12d-db5f5704e412.png" width=70%>

**<font color="red">やってみよう！</font>下の画像のようにボタンを３つ配置して、色やテキストを変更しよう！**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629694/87859fb9-661c-d3cd-4c5d-6cb98f6d8a6c.png" width=70%>

####これで見た目は完成です！いぇい✌️

##コードを書こう！
見た目の部分ができたので、これからコードを書いていきます！！
コードの役目というと、「ボタンを押した時にLabelのテキストが変更する」といったパーツにアクションを加える役目があります。
それでは、コードを書いていくぞぉぉぉ！！！

**ここでは「ViewController.swift」を選択し、コードを書いていきますぅ**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629694/a8fec408-2277-0b08-901b-bd94360e8c5f.png" width=70%>


**①変数を宣言する**
公式：<font color="red">(＠IBOutlet) var (変数名): (型名) = (初期値)</font>
↓例↓
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629694/bba018cc-017e-2bcd-8c14-009959417f4a.png" width=70%>

**②Labelのテキストの初期値を設定する**
<font color="red">viewDidLoad( ) { }内に書いていく</font>
↓例↓
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629694/ae60213b-6b24-4da5-df89-ac688511f6a2.png" width=70%>
※プログラミングにおいて「＝」は「等しい」という意味ではない！
「右辺を左辺に<font color="red">代入する</font>」という意味になるんだ！
（ちなみに「等しい」を意味するのは、「＝＝」だよ！）

**③ボタンを押した時の動作（アクション）を設定する**
公式：<font color="red">＠IBAction func (関数名) {(動きのコード)}</font>
↓例↓
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629694/fe8cf5f0-52ec-f490-7b22-16b16ba99158.png" width=70%>
**↓並べるとこんな感じ↓**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629694/bb686a13-992c-93c8-4c8f-96e7612f1c10.png" width=70%>

###コードの全体像
```swift:ViewController.swift
import UIKit

class ViewController: UIViewController {
    
    @IBOutlet var numberLabel: UILabel!
    var number: Int = 0

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        numberLabel.text = "0"  
    }
    
    // プラス
    @IBAction func plus() {
        number = number + 1
        numberLabel.text = String(number)
    }
    // マイナス
    @IBAction func minus() {
        number = number - 1
        numberLabel.text = String(number)
    }
    // リセット
    @IBAction func reset() {
        number = 0
        numberLabel.text = String(number)
    }

}
```

##関連付け
これまで見た目作りとコード書きをやってきました。
しかし、このままではそれぞれがバラバラに行っているのでしっかり動きません。
繋いであげないといけないのです。それが**「関連付け」**だーー！！
よしゃ、いっちょやっぞー💪

**「Main.storyboard」を開き、Storyboardを選択します。そして下の画像のように関連付けをしていきましょう！**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629694/a1ebff77-07da-af22-8d36-496f29986aeb.png" width=70%>

**ボタンを関連付けする時に、下の画像のようなものが出てきたら「Touch Up Inside」を選ぼう！**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629694/160d611d-2b9d-336e-d2b0-43b9cac6dcf7.png" width=70%>

**下の画像のようになれば関連付け完璧です！！**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629694/d4c600be-432e-03f3-6469-1790f9991fc8.png" width=70%>

#【発展】 画面遷移をしよう！
カウントが10になったら、写真が写っている画面に移動させて見ましょう！

**①新しい画面を作る**
Main.storyboardにいって、LabelやButtonを配置したように「ViewController」を選択して配置しよう！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629694/63754a12-97aa-d72d-0ad0-740d59d4f62d.png" width=70%>

次は、新しく作った画面に「ImageView」と「Button」を配置しよう！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629694/b173e4d3-fb0e-866d-2b1d-aa70fd000de1.png" width=70%>

**②画像の取り込み**
自分の好きな写真を選べたら、「Assets.xcassets」を選択し、画像をドラック＆ドロップで取り込もう！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629694/2e4a976d-b745-ea15-80d2-8bca2bbe5a2a.png" width=70%>

画像を取り込めたら、Main.storyboardに戻り、ImageViewを選択し、画像を入れ込みます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629694/6feccb3b-1f4b-a039-bc7c-e6c836d9dfa9.png" width=70%>

**③Segueの準備**
新しい画面が完成したら、画面遷移のために遷移したい画面どうしを**ひも**で繋ぎます。
（これをSegue（セグエ）という。）
画面上の黄色い丸を選択し、**controlキーを押しながら矢印のように次の画面へ引っ張ります**。
今回は「Present Modally」を選択しよう！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629694/a4ca59cd-4c70-f218-681f-13474b121ff2.png" width=70%>

Segueをつなぐことができたら、Identifier（IDのこと）を設定しよう！<font color="red">忘れないように！</font>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629694/86e6ea07-c3fe-e5ec-0c7d-f8e0e5e41fd7.png" width=70%>

**④新しい画面のViewControllerを作成・設定**
左側で右クリック or「Control＋クリック」して、「New File」を選択
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629694/096e7f85-fb95-d6f0-2b88-b23f2ab4defc.png" width=70%>

「Cocoa Touch Class」を選択して、Next！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629694/0c992cc3-65e1-595d-f1dd-862868d1004e.png" width=70%>

Classに新しいViewControllerの名前を記入して、Next！
（今回は「SecondViewController」にしましょう。）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629694/c11fc2ee-de1e-42c9-7616-9b9286aa0fac.png" width=70%>

ファイルの中であるか確認して、Create！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629694/d163282a-b6ad-a65e-08d0-ec1f6f86eb24.png" width=70%>

右側に「SecondViewController」が追加されていれば成功です！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629694/ea2b6819-2e79-d727-2c35-ecf7b56157a5.png" width=70%>

「SecondViewController」の追加に成功すれば、次はMain.storyboardに移り、ViewControllerとStoryboardをつなげてあげます！
Storyboardを選択し、新聞紙のようなマークから設定できます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629694/693bf745-5e9c-86f2-c6cc-9b0097b3356f.png" width=70%>

**⑤コードを書く**
ViewControllerを開き、以下のコードをplusボタンの続きに書きます。

```swift:ViewController.swift
    // プラス
    @IBAction func plus() {
        number = number + 1
        numberLabel.text = String(number)
        
        if number > 10 {
            performSegue(withIdentifier: "next", sender: nil)
        }
        
    }
```

SecondViewControllerを開き、下のようにアクションを書いてください。
（今回、Imageはコード上では扱わないので宣言しなくていいです。）

```swift:SecondViewController.swift
import UIKit

class SecondViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }
    // backボタンの設定
    @IBAction func back() {
        self.dismiss(animated: true, completion: nil)
    }

}
```

**関連付け忘れずに！**

**⑥動かしてみよう！**
command＋R でシュミレーターを立ち上げて実際に動かしてみよう！

#開発終了
お疲れ様でした！！しっかりカウントアプリは動きましたか？
まだまだ余裕のある方は、「×」や「÷」といった他の計算も付け足して見てください！
ではまた👋