[Swift]カウントアップアプリを作ってSwiftを触ってみよう

# 今回のチュートリアルで想定している人

- スマホアプリを作ってみたい！
- Swiftをやってみたかった！
- 1人で始める自信がない・・・
- 何か新しい言語に触れてみたい！

**みんなウェルカム:grinning:**

---

# 今回のチュートリアルで学べること

<img src= "https://user-images.githubusercontent.com/35694946/89296918-08db7b80-d69e-11ea-9760-2fc0b0e73bfd.gif" width="300"> <img src= "https://user-images.githubusercontent.com/35694946/89493229-aa71e280-d7ee-11ea-84da-6b0a71058fec.gif" width="300">

- ボタンをタップしてカウントアップ
- if文
- メソッド
- StoryBoardの基本的な使い方
- 画面遷移 v1
- 通知機能 v2


##ソースコードはこちらから
https://github.com/techiro/CountUpAppForBeginners

---

#早速Xcodeを開いて新規プロジェクトを作成

`Xcodeを起動`　→　`Create New Xcode Project` → `Single View App` を指定して次へ。

Product Name とOrganization Nameは、**任意の名前**を指定。

Languageは `Swift`、User Interface は `Storyboard` を指定して次へ。


---


# ボタンとラベルをStoryBoardに置いてみる

まず画面を作成していきます。

`Main.StoryBoard`を開くとiPhoneの画面がポツンと表示されています。

ここにボタンやラベルを置いていきます。

<img width="1680" alt="スクリーンショット 2020-08-04 19.16.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240708/337bb7f3-b46f-c86d-e4aa-e0a524482ff2.png">

---

#UIパーツの配置方法

1. `Main.StoryBoard`を選択
2. 右上の＋ボタンをクリック
3. UIパーツ一覧が表示される
4. １つのLabelと2つのボタンを画面に配置

<img width="1682" alt="スクリーンショット_2020-08-07_9_09_43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240708/f937541c-a02c-336e-004e-5a67d4d45248.png">



# ボタンに画像を反映

1. `Main.storyboard`を開く
2. ボタンを選択

画面右の**Attribute Inspector**をクリック

<img width="256" alt="スクリーンショット_2020_08_07_13_24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240708/6e7350c1-bc62-253d-e6a9-7b43d6384cf2.png">

## Attribute Inspectorについて

UIのいろんな設定ができる

ボタンの例

- ボタンの色
- ボタンの大きさ
- ボタンの画像

などを変更できる。

## 画像をプロジェクトに追加する(Attribute Inspectorを触ってみる)

今回使用した+ボタンと-ボタン画像は[iconfinder](https://www.iconfinder.com/icons)の画像を使用しました。画像はなんでもOK！


- [+ボタン](https://www.iconfinder.com/icons/1646001/add_create_new_plus_icon)
- [-ボタン](https://www.iconfinder.com/icons/1645995/delete_minus_remove_icon)


###追記
＋ーボタンがダウンロードできないエラーが生じているので、好きなアイコンをダウンロードしてください！

画像をダウンロードしたらプロジェクトの`Assets.xcassets`にドラッグ&ドロップ

<img width="1443" alt="全画面_2020_08_04_19_38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240708/b8f1d6d1-8a22-170b-1f6b-5347e9233686.png">


### ポイント

`Assets.xcassets`フォルダはアプリ内にある画像を保存して簡単に呼び出せる場所、
積極的に使っていきましょう！



## ボタンのimageを変更
`ボタンを選択`→`Attribute Inspector`→`Image`

<img width="1440" alt="スクリーンショット 2020-08-04 19.45.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240708/514d1701-e2a7-53c2-20b0-d9725044e26f.png">


左のボタンと右のボタンにーボタン、＋ボタンをセット

---

## シミュレーターで確認

<img width="1400" alt="スクリーンショット_2020-08-04_19_47_57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240708/364f5995-069d-d785-a0d6-ff28ac5276a1.png">

画面左上再生ボタンを押すとシミュレーターが起動します。
ショートカットコマンドは`⌘ + R`

ここまで完成したら、次はUIパーツとコードを紐づける。

---

# UIパーツとコードを紐づける

## エディタをカスタムする

Assistantエディタをクリック

**三** ボタンをクリックすると出てきます。

<img width="1440" alt="スクリーンショット_2020-08-04_20_13_59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240708/b1750001-193c-637a-0cf5-962fa12f1540.png">


Assistantエディタを出現させた状態で、UIパーツのラベルをクリック
コントロールを押しながらコードのほうにドラッグ&ドロップ


<img width="1124" alt="スクリーンショット_2020_08_04_20_48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240708/61f1f5e7-b9eb-db4b-5b64-5a229a519c2a.png">


UIパーツから青い線が伸びるので`override func viewDidLoad`の上で離す。

<img width="1440" alt="スクリーンショット 2020-08-04 20.51.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240708/895c3491-245f-3c8d-4ee1-f7fd2915d10c.png">


このようにポップアップが出現します。

ここでこのラベルの名前などが設定できます。

Nameを任意の文字列に変更(今回はcountLabel)

Connectボタンを押すと`プログラムコード`と`UIパーツ`が紐付けられ,
文字を変更したりボタンを押された時の動きなどをプログラムすることができます。

---

##ボタンの設定方法

ボタンは`viewDidLoad`の下に紐付けます。

###注意点

ポップアップの1番上の項目が`Action`になっているか確認してください。`Action`になっていないと「ボタンを押された時」という条件を作ることができません。

<img width="1440" alt="スクリーンショット_2020-08-04_20_53_01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240708/2d624d64-d88c-1e4e-578e-dcbd745f521e.png">


###ボタンの名前

＋ボタン→countUpButton

-ボタン→countDownButton

---

## コードの確認

```swift
import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var countLabel: UILabel!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    @IBAction func countUpButton(_ sender: Any) {
    }
    
    @IBAction func countDounButton(_ sender: Any) {
    }
}
```

- `IBOutlet`はそのパーツに値を入れたり画面上に表示するためのものです。
- `@IBAction`はそのパーツが押された時に呼ばれるメソッドになっています。そのためカウントアップ・ダウンをする時に処理を追加すればカウントアップアプリが実現できます。

これら2つのメソッドはUIとコードの綱渡し的な存在です。

## 以上でUIの説明は終わり

---

# UIパーツとコードの繋がりを確認する

`ViewController.swift`を選択

とりあえずUIパーツとコードをつなげたので一度つながりを確認してみましょう

viewが読み込まれる際に呼ばれる関数viewDidLoad()内にUIパーツのcountLabelの文字を出力してみます。

```swift
override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        print(countLabel.text)

    }
```

Labelと出力されたはずです。

ここでUIパーツだったLabelの文字列を`countLabel.text`とプログラムを書くことで出力したり取得することができることが確認できました。

---

# カウントアップ・ダウンをする


## やりたいこと(コメント)

```swift
@IBAction func countUpButton(_ sender: Any) {
        //+ボタンを押すとラベルの文字をカウントアップ
        
        
        //10以上になったら文字の色を緑に変更
    }
    
    @IBAction func countDounButton(_ sender: Any) {
         //-ボタンを押すとラベルの文字をカウントダウン
        
	//0より小さくなったら文字の色を赤色に変更

    }
```

## カウントするために変数を準備

```swift
class ViewController: UIViewController {
//数字を格納する場所
var count = 0

}
```

var→変数
count→変数名

**countの型はInt型**

## なぜcountの型がInt型？

Swiftの特徴として型推論というものがある。代入するものの型が決まっていると代入先の型も同じになるような設計。

`0`はInt型つまり`count`もInt型

`count = 0`　勝手に型を推論してくれる。

型推論を使用せずに型を宣言する時は,`var count: Int = 0`とします。

## 型を調べる方法

`print(type(of: count))`でもいいが

`⌥ + クリック`でポップアップが出現する
<img width="560" alt="スクリーンショット_2020_08_07_13_51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240708/5e1cb3b8-6775-6ff2-5baa-48f2434dc5cc.png">

かなり便利なので使ってみてください！

---

## カウントアップ・ダウンの完成

```swift

@IBAction func countUpButton(_ sender: Any) {
        //+ボタンを押すとラベルの文字をカウントアップ
        count = count + 1   //count += 1でも可
        countLabel.text = String(count)
        //10以上になったら文字の色を緑に変更
    }
    
    @IBAction func countDounButton(_ sender: Any) {
         //-ボタンを押すとラベルの文字をカウントダウン
        count = count - 1  //count -= 1でも可
        countLabel.text = String(count)
    }
```

- ボタンを押された時にcount ±1をする。
- `String(count)`でInt型であったcountをString型に変換
- `countLabel.text` = countの値


## 実行 ⌘ + R

無事できたら次はif文を使って機能を付け加えましょう！

---

## ChangeTextColorメソッドを定義

メソッドとif分について触ってみる。

メソッドとは関数とも呼ばれプログラムを書いていく上では必須です。

```swift
//ラベルの色を変更するメソッドを定義する
    func changeTextColor() {
		//カウントにあわせて文字の色を変更
 
    }
```

---

今回はラベルの色を変更するChangeTextColorメソッドを定義してみます。

## if文を書いて条件分岐

- countの値が10以上だったら文字の色を緑に
- countの値が0より小さかったら文字の色を赤に
- その他の値だったら文字の色を青に

これを実装するためにはif文を使います。

```swift
//ラベルの色を変更するメソッドを定義する
    func changeTextColor() {
        if count >= 10 {
            countLabel.textColor = UIColor.green
        }else if count < 0 {
            countLabel.textColor = UIColor.red
        }else {
            countLabel.textColor = UIColor.blue
        }
    }
```

## 色を変更するコードの完成

```swift
@IBAction func countUpButton(_ sender: Any) {
        //+ボタンを押すとラベルの文字をカウントアップ
        count = count + 1
        countLabel.text = String(count)
        //カウントにあわせて文字の色を変更
        changeTextColor()
    }
    
    @IBAction func countDounButton(_ sender: Any) {
         //-ボタンを押すとラベルの文字をカウントダウン
        count = count - 1
        countLabel.text = String(count)
        //カウントにあわせて文字の色を変更
        changeTextColor()
    }

//ラベルの色を変更するメソッドを定義する
    func changeTextColor() {
        if count >= 10 {
            countLabel.textColor = UIColor.green
        }else if count < 0 {
            countLabel.textColor = UIColor.red
        }else {
            countLabel.textColor = UIColor.blue
        }
    }

```
---


以上でカウントアップアプリのチュートリアルは終わりです。お疲れ様でした！

#もっと深掘りしたい方
次はこのアプリをベースとして、アプリに動きをつける画面遷移と通知を送る方法を実装していきます。
- [アプリに画面遷移を追加する方法](https://qiita.com/appgrape/items/0dcb5898c05993b583e9)
- [カウントアップアプリを改造して,通知をn秒後に通知を出してみる (n>0)](https://qiita.com/tessy0901/items/c261359880f1bc2d80b5)

---

##最後に
最後までご覧いただきありがとうございます。
[Twitter](https://twitter.com/appgrape)で主にSwiftについてのツイートをしているのでのぞいてみてください！

今回はSwiftの言語についてあまり詳しく説明しませんでしたが、
[ここ](https://kacchanblog.com/category/programming/swift)でもっと詳しく記事を書いているのでSwiftに興味が湧いた方は参考にしてみてください！