SwiftとXcode6でカウンターアプリを作るレシピ

gaaamiiが2015年1月1日16:12:40に投稿しました。

Swift

8

お気に入り

準備中

Views

このレシピで作るもの

プラスボタン・マイナスボタン・リセットボタンを備えたシンプルなカウンターアプリをSwiftとXcodeで作ります。iPhoneアプリを作りたいけどそもそもプログラミングわからん、Xcodeどう使えばいいのかわからん、という人に役立てれば嬉しいです。

デモページでは動画でこのレシピを実装しているので、よければそちらもご覧ください。


目次

雑でごめんなさい。反応があればスクリーンショットとか入れてもうちょっと丁寧なレシピにします。

準備するもの

今回必要なものは以下の2点です。

  • Mac
  • Xcode 6

今回編集するファイル

アプリに必要なソースコードはXcodeがいろいろ自動生成してくれます。

今回のレシピで編集するファイルは以下の2つです。

  • Main.storyboard
  • ViewController.swift

プロジェクトを作る

  1. Xcodeを起動
  2. File > New > Project をクリック
  3. 「Single View Application」というテンプレートを選択して「Next」をクリック
  4. 「Product Name」にアプリ名(例:SimpleCounter)を入力・「Language」はSwiftを選択・「Devices」にはiPhoneを選択し、「Next」をクリック
  5. 保存先を選択して「Create」をクリック

ボタンを置く

テキストでの説明が面倒なので動画をみてください(1:00あたりから)

コードと結びつける

テキストでの説明が面倒なので動画をみてください(2:00あたりから)

コードを書く

ボタンと結び付けられたアクションの中身を書きます。

    @IBAction func plusOne(sender: AnyObject) {
        // +1 する
        num += 1
        // ラベルのテキストに反映する
        // (num は数値なので、counter.textに入れる前に
        // 文字列にしてあげる必要があります)
        counter.text = String(num)
    }

同じような要領で、マイナスボタン、リセットボタンを設置・コード編集をします。

最終的には、こんな感じになります。

import UIKit

class ViewController: UIViewController {

    @IBOutlet var counter: UILabel!

    var num:Int = 0

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    func updateCounter(num: Int) {
        counter.text = String(num)
    }

    @IBAction func plusOne(sender: AnyObject) {
        num += 1
        updateCounter(num)
    }

    @IBAction func minusOne(sender: AnyObject) {
        num -= 1
        updateCounter(num)
    }

    @IBAction func resetCounter(sender: AnyObject) {
        num = 0
        updateCounter(num)
    }

}

プログラミング的なところ

とりあえず書けば動くので、動画をみて動くまで真似してみてください。
真似して動かしても「いみわからない」という人もいるかと思います。ここでは、いくつかプログラミングについて補足します。

「関数」について

プログラミングにおいて、関数というのは処理をまとめたものです。繰り返し行う処理を、一つの関数にまとめることでコードが散らかるのを防ぐことができます。
今回の例だと、updateCounterという関数を作って、カウンターの表示を更新する処理を一つの関数にまとめています。

func updateCounter(num: Int) {
  counter.text = String(num)
}

これを作っておくと、updateCounter(10)と書いてカウンターの表示を10にしたりすることができます。

「型」について

人間的には数値と文字列っていうのは区別しないでも使えるんですが、コンピュータはそれらをはっきりと違うものだと認識しています。数値をテキストとして画面に表示するようなとき、Stringという関数にその数値を与えて、変換したりします。

counter.text = String(num)

おわりに

動画もよろしくお願いします。

このレシピを書いたシェフ