【初心者向け】iOSアプリ開発 ガチャアプリ

#ガチャアプリを作ろう
今回は、ガチャアプリを作ります！
ワクワクできるアプリを作っていきましょう！

　　　　　　↓↓　完成図　↓↓
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629694/57091376-61ad-4496-2211-1d3eca903dc8.png" width=50%>

#開発環境/開発準備
開発環境や開発準備のやり方は前の記事で丁寧に説明したのでこっちを参考にしてね！！
先に下のを見ておくとスムーズに進められるよ！
[【初心者向け】iOSアプリ開発 カウントアプリ](https://qiita.com/kakecyanman/items/b1ccd6d729d0d166b93b "カウント")

#開発開始
##見た目
ではまず見た目のデザインの部分から作っていきましょう！
そう、Xcodeでは見た目の部分はコードを書く必要がないんでしゅ。
ドラック＆ドロップしていくぞーーー🔥

**Main.storyboard**に移動し、右上の「＋」ボタンを押して**Object**を開きましょう！
ここまできたらあとは**ドラック＆ドロップ**だーーー！！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629694/8f568229-39ee-efcd-a7e4-b68085de6011.png" width=70%>
####<font color="red">やってみよう！</font>上の画像のようにそれぞれ配置してみよう！
ヒント💡　ImageView, Label, Buttonの３つを使うよ
####これで見た目は完成です！いぇい✌️

##コードを書こう！
見た目の部分ができたのでこれからコードかきかきに取り掛かります！
<font color="red">ViewController.swift</font>に移動し、書いていきましょう。
今回利用するのは、<font color="red">乱数</font>と<font color="red">if文</font>です。ではまずはそれぞれの説明から。
####乱数とは...
ランダムに数字を生成させるものです。これによりガチャガチャの「何が出るかわからない」ワクワク部分を実現させます！swiftでは下のように書きます。

```
// 乱数で生成した数字を入れる箱
var number = 0

// 乱数を生成
number = Int(arc4random_uniform(数字))
```
もし０〜８の間で乱数を発生させたかった場合、**数字**の部分に**９**と書く形になります。
※プログラミングでは基本０からスタート！
####if文とは...
「もし〜だったら」といった形で条件分岐させるものです。これによって乱数の数字に合わせて表示する文字や画像を分けることができます！swiftでは下のように書きます。

```
if 条件式 {
　　 条件式があっていた時の処理  
} else {
　　 条件式が違った時の処理
}
```

###ではでは、実装していこう！
**①変数の宣言**
今回は、Main.storyboardに**Label**と**ImageView**をおいたので、この２つと**乱数**を生成した時に出てきた**数字を入れる箱**の合計３つを宣言します！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629694/d2315ff4-9116-f580-149b-3f6ba85cf1a7.png" width=100%>
こんな感じ！<font color="lightblue">水色の文字</font>の部分は変数名になるため**わかりやすい名前をつけてあげてね！**

**②画像の取り込み**
今回作成するガチャアプリでは、ボタンを押すと上の文字と画像が切り替わるようにします！
そのため画像を取り込んでいくよ👍
まず、インターネットブラウザを開いて好きな写真を５枚くらい取ってこよう！
取ってこれたらXcodeに入れ込むぞーーー🔥
<font color="red">Assets.xcassets</font>に移動し、画像を**ドラック＆ドロップ**だ！！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629694/32070cfa-bde7-698c-b875-ac7f76e08480.png" width=70%>
下のような写真になってたら、画像の取り込み完了！いぇい✌️
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629694/f2e5fbfa-8f41-dfff-c14d-c90e3ce249f0.png" width=70%>

**③ボタンを押した時の動作（アクション）を設定**
<font color="red">ViewController.swift</font>に戻ってきたら、次はボタンの設定です！
ここでさっき習った<font color="red">乱数</font>と<font color="red">if文</font>を使っていくよ！
下のような感じでボタンの宣言ができたらこの中にどんどん書いていくよ！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629694/e3dc3a44-a0fd-142c-d820-8492a4d477fa.png" width=100%>

**まずは乱数から！先ほど習ったものを思い出しながら書いてみよう！**

できたかな？僕は写真を５枚にしたのでこんな感じ！

```
number = Int(arc4random_uniform(5))
```

同じような形になってたら良きです🙆‍♂️

**次はif文！今回は<font color="red">「もしnumberが◯だったら〜する」</font>といった形で使うよ！**
こんな感じで書きます！

```
if number == 1 {
    imageView.image = UIImage(named: "doubutu1.jpeg")
    label.text = "ぎゅっ..."
} else {
    ...
}
```
これだと<font color="red">「もしnumberが１だったら、ImageViewに"doubutu1.jpeg（画像の名前）"を代入して、Labelに"ぎゅっ..."を代入する」</font>って感じになります！

**if文では、下のような形でどんどん条件分岐を増やしていけます🔥**

```
if ~ {                 //条件１
    ...
} else if ~ {          //条件２
    ...
} else if ~ {　　　　　　//条件３
    ...
} else {　　　　　　　　　//その他
    ...
}
```

####<font color="red">やってみよう！</font>上のを参考にして自分が取り込んだ画像分の条件分岐をさせてみよう！
解答例は、最後にコードの全体像を載せてるのでそこで確認してね！

コードがかけたら<font color="red">関連付け</font>を忘れないように！
何それ...初めて聞いた。って人は、これもカウントアプリ編で説明したのでこっちを見てね！
[【初心者向け】iOSアプリ開発 カウントアプリ](https://qiita.com/kakecyanman/items/b1ccd6d729d0d166b93b "カウント")

#【おまけ】 ボタンの形を変えよう！
今回作成してきたのは、**ガチャアプリ**！ということで少し遊び心を持とうと思います！
ガチャガチャのボタンを丸くしちゃうよ！

**①変数の宣言**
普段はボタンに対して変数の宣言を行うことは少ないのですが、今回は形を変えたいので行います！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629694/91c12734-3bbe-871e-f371-7da9b69d3404.png" width=100%>
こんな感じ！宣言ができたら形を変えていくよ！
**関連付け**を忘れないでね😉

**②形の変更**
形の変更は、<font color="red">viewDidLoad( ) { }内</font>に書いていきます！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629694/49cee67c-7811-4002-4d25-d3df046548a3.png" width=100%>
こんな感じ！これでボタンが丸くなりました🙆‍♂️
####これでガチャアプリが完成だーーー🔥🔥🔥

###コードの全体像

```swift:ViewController.swift
import UIKit

class ViewController: UIViewController {
    
    // 乱数の宣言
    var number = 0
    // ImageViewの宣言
    @IBOutlet var imageView: UIImageView!
    // Labelの宣言
    @IBOutlet var label: UILabel!
    
    // ボタンの宣言
    @IBOutlet var gacyaButton: UIButton!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        gacyaButton.layer.cornerRadius = 50.0
    }
    
    @IBAction func gacya(){
        
        number = Int(arc4random_uniform(5))
        
        if number == 1 {
            imageView.image = UIImage(named: "doubutu1.jpeg")
            label.text = "ぎゅっ..."
        } else if number == 2 {
            imageView.image = UIImage(named: "doubutu2.jpeg")
            label.text = "ちょこん。"
        } else if number == 3 {
            imageView.image = UIImage(named: "doubutu3.jpeg")
            label.text = "ぴとっ..."
        } else if number == 4 {
            imageView.image = UIImage(named: "doubutu4.jpeg")
            label.text = "そっ..."
        } else {
            imageView.image = UIImage(named: "doubutu5.jpeg")
            label.text = "にたぁ。"
        }

    }

}
```

####実際に「command＋R」でシュミレーターを立ち上げて遊んでみよう！

#開発終了
お疲れ様でした！ガチャアプリはしっかり動きましたか？
今回使用した**if文**は、使う場面が多いのでしっかり復習しておきましょう！
まだまだ余裕のある人は、ボタンの形を変える他にもアニメーションなどをつけたりもできるので、いろいろ調べてチャレンジしてみてください！！
ではまた👋