2021.12.21 karita

iOSアプリってどうやって作るの？

昨日出前館で2000円クーポン使って得した気持ちと一昨日までなら3000円クーポンがあったのにという後悔がせめぎあってるかりたです。

前回予告した通りiosアプリってどうやって作るのということですがiosアプリは前提としてmacOSでないと作れないです。(正しくは作れるけどほぼ不可能)

macを立ち上げたらXcodeをインストールします。App Storeでもappleの公式サイトからでもできます。(アップデートでさえ1時間以上かかることがざらにあってつらいですが耐えましょう)

今回は足し算のみできるアプリを作成します。

Xcodeを立ち上げて、new projectを押してiOSタブのSingle View Appを選択すると以下の画面になるかと思います。

Product Nameにアプリ名を入力して、interfaceをStoryboard、LanguageをSwiftにしてNextを押します。

画像はTodoAppになってますがアプリに則した名前を付けましょう。(CalcAddApp　SumAppなど)

すると以下のような画面になります。

左側にファイル一覧があるので今回編集するファイルの説明をします。

ViewController: プログラムを書くファイル。これが全てみたいなところある。
Main: storyboardファイル。このファイルを開いてボタンとかの部品をぺちぺち貼る。

Mainを開くとiphoneの画面があると思います。

右上に＋ボタンがあるので押すとiosでよく見る部品一覧が出てきます。

この部品をiphoneにドラッグ＆ドロップ（めんどうなので以下DD）すると部品が配置できます。

今回はlabel x1、textfield x2、button x1を配置しましょう。

配置した部品を選択すると右側のタブでボタンのいろいろな設定ができます。

部品一覧のボタンの下にある横線バーってなってるボタンを押し、Assistantを押すと画面が半分に割れてプログラムファイルが表示されます。

部品を選択して右クリックしながらプログラムファイルに線をびょ～んと伸ばしてDDしましょう。

すると変数名を入力する画面が出てくるので入力しましょう。

今回はボタン以外をresultLabel, firstnumTextField, secondnumTextFieldと入力しましょう。

ボタンはviewDidLoadという関数のしたにびょーんとしてください。

そして同じようにdidTapCalcButtonと入力すると関数を作成してくれます。ここにボタンを押したときの処理を書きます。今やった作業は配置した部品とプログラムの紐づけをしました。これをしてあげないとボタンを押してもどのボタンを押したのかわからないので何も起きません。

この段階では以下のようなコードになっているかと思います。

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var resultLabel: UILabel!
    @IBOutlet weak var firstnumTextField: UITextField!
    @IBOutlet weak var secondnumTextField: UITextField!

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

    @IBAction func didTapCalcButton(_ sender: Any) {
    }
}

didTapCalcButtonの中に以下を記述します。

guard let firstNum = firstnumTextField.text, let secNum = secondnumTextField.text else {
    return
}

let result = Int(firstNum)! + Int(secNum)!
resultLabel.text = String(result)

流れとしては、テキストフィールドに入力された値をそれぞれ取得。入力がなければ何もしない。

取得した値を足し算してresultに代入。

ラベルのテキストにresultを代入。

という流れです。

右上の再生ボタンを押すとエミュレータが立ち上がってアプリが立ち上がります。

テキストフィールドに数字を入れてボタンを押すとラベルに足し算された値が表示されます。