【Swift入門】初心者必見！タイマーアプリの作り方を丁寧に解説！~誰でも簡単に作れる~

Create a new Xcode project→Appでプロジェクトを作成します。

①「Product Name」に、TimerAppと入力

②「Interface」は、Storyboardを選択

③「Language」はSwiftを選択

④全てチェックなし

⑤「Next」をクリック

①保存先のフォルダを選択

②「Create」をクリック

①ボードの上のバーをクリック

② (Embed In)をクリック

③Navigation Controllerをクリック

ナビゲーションバーの設定が完了

①ナビゲーションバーのTitle付近をクリック

② (Show the Attributes inspector)をクリック

③Bar Tintをお好みの色に設定

④Title Colorを見やすい色に設定

①ナビゲーションバーの中央をクリック

② (Show the Attributes inspector)をクリック

③のタイトルに任意の名前を入力

① (Library)をクリック

②LabelとButtonをstoryboardへドラッグ&ドロップ

①Labelを選択(表示は上記(STEP.4)の画像の初期状態のLabel)

② (Show the Attributes inspector)をクリック

③Textを00:00:00に変更

④ をクリック

⑤Sizeを50に変更

⑥Doneをクリック

①Labelを選択

② (Align)をクリック

③2箇所 ✅ を入れる

④Add 2 Constraints をクリック

①shiftを押しながらButtonを3つ選択

② (Show the Attributes inspector)をクリック

③Text Colorを見やすい色に変更

④Backgroundをお好みの色に変更

⑤TitleはButtonを1個ずつ選択し、左から[Start]、[Stop]、[Reset]に変更

①shiftを押しながらButtonを3つ選択

② (Embed In)をクリック

③Stack Viewを選択

①shiftを押しながらButtonを3つ選択

② (Add New Constraints)をクリック

③widthとheightを50に設定

④2箇所に ✅ が入っていることを確認

⑤Add 6 Constraints をクリック

①StackViewを選択

② (Show the Attributes inspector)をクリック

③DistributionをFill Equallyに変更

①StackViewを選択

② (Align)をクリック

③1箇所 ✅ を入れる

④Add 1 Constraints をクリック

①StackViewを選択

② (Add New Constraints)をクリック

③の数字を50に変更後、数字下の縦棒が赤になっていることを確認

④Add 1 Constraints をクリック

①Buttonを選択

② (Show the identity inspector)をクリック

③ ➕ をクリック

④Key Pathにlayer.cornerRadius と記述し、TypeはNumber、Valueは15を選択

①controlを押しながらLabelをクリックし、override func viewDidLoad()の上にドラッグ&ドロップ

②のNameにtimerLabelと記述

③connectをクリック

下記画像のようにLabelが接続されます

①controlを押しながらButtonをクリックし、override func viewDidLoad()の下の } と一番下の } の間にドラッグ&ドロップ

②NameにstartButtonActonと記述

③connectをクリック

上記画像の手順を他の２つのボタンにも適用することによって、下記画像のようにLabelが接続されます

class ViewController: UIViewControllerの下に２つの変数を宣言する

import UIKit

class ViewController: UIViewController {
    
    var startTime: TimeInterval? = nil
    var timer = Timer()
    
    @IBOutlet weak var timerLabel: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }

@IBAction func startButtonAction(_ sender: Any)内に下記のコードを記述

@IBAction func startButtonAction(_ sender: Any) {
    timer.invalidate()
    self.startTime = Date.timeIntervalSinceReferenceDate
    self.timer = Timer.scheduledTimer(timeInterval: 0.01, target: self, selector: #selector(timerCounter), userInfo: nil, repeats: true)
}

上記コードのTimer.scheduledTimerには必須の関数があるので、このコードの下に下記コードを記述

@objc func timerCounter() {
    guard let startTime = self.startTime else { return }
    let time = Date.timeIntervalSinceReferenceDate - startTime
    let min = Int(time / 60)
    let sec = Int(time) % 60
    let msec = Int((time - Double(sec)) * 100.0)
    self.timerLabel.text = String(format: "%02d:%02d:%02d", min, sec, msec)
}

@IBAction func stopButtonAction(_ sender: Any)内に下記のコードを記述

@IBAction func stopButtonAction(_ sender: Any) {
    timer.invalidate()
}

@IBAction func resetButtonAction(_ sender: Any)内に下記のコードを記述

@IBAction func resetButtonAction(_ sender: Any) {
    self.startTime = nil
    self.timerLabel.text = "00:00:00"
}

下記に全体のコードを載せておきます。⌘Rで実行し、記事の前段の完成イメージと比較してみて下さい。

import UIKit

class ViewController: UIViewController {
    
    var startTime: TimeInterval? = nil
    var timer = Timer()
    
    @IBOutlet weak var timerLabel: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    @IBAction func startButtonAction(_ sender: Any) {
        timer.invalidate()
        self.startTime = Date.timeIntervalSinceReferenceDate
        self.timer = Timer.scheduledTimer(timeInterval: 0.01, target: self, selector: #selector(timerCounter), userInfo: nil, repeats: true)
    }
    
    @objc func timerCounter() {
        guard let startTime = self.startTime else { return }
        let time = Date.timeIntervalSinceReferenceDate - startTime
        let min = Int(time / 60)
        let sec = Int(time) % 60
        let msec = Int((time - Double(sec)) * 100.0)
        self.timerLabel.text = String(format: "%02d:%02d:%02d", min, sec, msec)
    }
    
    @IBAction func stopButtonAction(_ sender: Any) {
        timer.invalidate()
    }
    
    @IBAction func resetButtonAction(_ sender: Any) {
        self.startTime = nil
        self.timerLabel.text = "00:00:00"
    }
    
}