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

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

みんなウェルカム

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

ボタンをタップしてカウントアップ
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の画面がポツンと表示されています。

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

#UIパーツの配置方法

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

ボタンに画像を反映

Main.storyboardを開く
ボタンを選択

画面右のAttribute Inspectorをクリック

Attribute Inspectorについて

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

ボタンの例

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

などを変更できる。

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

今回使用した+ボタンと-ボタン画像はiconfinderの画像を使用しました。画像はなんでもOK！

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

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

ポイント

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

ボタンのimageを変更

ボタンを選択→Attribute Inspector→Image

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

シミュレーターで確認

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

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

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

エディタをカスタムする

Assistantエディタをクリック

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

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

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

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

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

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

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

##ボタンの設定方法

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

###注意点

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

###ボタンの名前

＋ボタン→countUpButton

-ボタン→countDownButton

コードの確認

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の文字を出力してみます。

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

    }

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

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

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

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

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

    }

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

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))でもいいが

⌥ + クリックでポップアップが出現する

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

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


@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分について触ってみる。

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

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

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

if文を書いて条件分岐

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

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

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

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

@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
        }
    }

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

#もっと深掘りしたい方
次はこのアプリをベースとして、アプリに動きをつける画面遷移と通知を送る方法を実装していきます。

##最後に
最後までご覧いただきありがとうございます。
Twitterで主にSwiftについてのツイートをしているのでのぞいてみてください！

今回はSwiftの言語についてあまり詳しく説明しませんでしたが、
ここでもっと詳しく記事を書いているのでSwiftに興味が湧いた方は参考にしてみてください！