【Swift/Xcode超入門】BMIを計算するアプリを作ってみよう！

YouTube動画で見る

前回の講座

【Swift/Xcode超入門】Storyboardファイルとプログラムファイルの関係

サトリク

この講座では、BMIを計算するアプリを作ってみます！

動作環境

item	Version
Swift	5.3
Xcode	12.0.1

バージョンの確認方法

この講座の完成イメージ

身長と体重を入力して計算ボタンを押すと、痩せ型か肥満かを判断するBMIを計算で割り出すという簡単なアプリを作成します。

ボディマス指数(BMI)とは？

ボディマス指数（ボディマスしすう）とは、体重と身長の関係から算出される、ヒトの肥満度を表す体格指数である。

引用元：Wikipedia – (ボディマス指数)

アプリ開発手順

プロジェクトを作成

まずは、プロジェクトを作成していきましょう。

STEP.1

Xcodeを起動

下のDockからXcodeを起動しましょう。

STEP.1

新規作成

「Create a new Xcode project」を選択

もうすでにXcodeを開いていてこの画面が開けない方は、command + shift + 1を押しましょう。そうするとこの画面が開けます。

STEP.2

テンプレート選択

①「App」を選択

②「Next」をクリック

STEP.3

プロジェクトの設定

①「Product Name」にBMICalculatorと入力

②「Interface」でStoryboardを選択

③「Language」はSwiftを選択

④全てチェックなし

⑤「Next」をクリック

（そのほかは任意）

STEP.4

プロジェクトの保存

Practiceフォルダを選択しましょう。

完了

これで、プロジェクトの作成は完了です。

storyboard(画面レイアウト)の編集

まずは、見た目の部分を作っていきます。

STEP.1

labelを配置

①Main.storyboardを選択

②右上のプラスボタンをクリック

③Labelを画面の上らへんにドラッグ&ドロップ

STEP.2

TextFieldを配置

TextFieldは、文字を入力するフォームです。今回は自分の身長と体重を入力するために使います。

①右上のプラスボタンをクリック

②Text FieldをLabelの下にドラッグ&ドロップ

STEP.3

広げる

TextFieldを少し横に広げてください。

STEP.4

複製

optionを押しながら、TextFieldをドラッグ&ドロップすると、複製できます。

STEP.5

ButtonとLabelを配置

新たにButtonとLabelを追加してください。

①右上のプラスボタンをクリック

②Labelをドラッグ&ドロップ

③Buttonをドラッグ&ドロップ

STEP.6

Labelの文言を変更

①一番上のLabelを選択

② (show the Attributes inspector)を選択

③身長と体重を入力してください。と入力

STEP.7

Labelのレイアウトを変更

①下のLabelの範囲を広げる

② (show the Attributes inspector)を選択

③「Font」をSystem20.0に変更

④中央揃えにする

STEP.8

Buttonの文言を変更

①Buttonを選択

② (show the Attributes inspector)を選択

③「Title」に計算と入力、「Font」をSystem 25.0に変更

STEP.8

Buttonの色を変更

①計算を選択

② (show the Attributes inspector)を選択

③「Text Color」をWhite Colorに変更

③「Background」を任意の色に変更

STEP.8

Buttonの範囲を変更

ボタンの範囲を広げる

STEP.9

実行して確認

iPhone11に変更して、左上の再生ボタンで実行しましょう。

このようなレイアウトになっていたら成功です。

完了

これで、BMIアプリのレイアウトが一通り完成しました。

コードと紐付け

では、次はオブジェクトとコードを紐付けしていきましょう。

STEP.1

画面を2分割

①上のバーをクリック

②command + option + control + enterで2分割

STEP.2

TextFieldを紐付け

controlを押しながら、10行目と11行目の間にドラッグ&ドロップ

①身長を入力するTextFieldなので、「Name」にheightTextFieldと入力

②「Connect」をクリック

STEP.3

もう一つのTextFieldを紐付け

controlを押しながら、11行目と12行目の間にドラッグ&ドロップ

①体重を入力するTextFieldなので、「Name」にweightTextFieldと入力

②「Connect」をクリック

STEP.4

Labelを紐付け

controlを押しながら、12行目と13行目の間にドラッグ&ドロップ

①「Name」にbmiLabelと入力

②「Connect」をクリック

STEP.5

Buttonの紐付け

controlを押しながら、19行目と20行目の間にドラッグ&ドロップ

①計算するButtonなので、「Name」にcalculationBtnActionと入力

②Connectをクリック

完了

コーディング

では、いよいよ、計算の処理を書いていきます。

STEP.1

ViewControllerを選択

まずは、コードの画面を開きます。

左のメニューからViewController.swiftを選択

STEP.2

プレースフォルダーに文字を入れる

18行目あたりに、以下のコードを追記してください。

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
    heightTextField.placeholder = "身長をcmで入力してください。"
    weightTextField.placeholder = "体重をkgで入力してください。"
}

コードを追記する場所

このひとかたまりのコードにふりがなをふるとこんな感じです。

override func viewDidLoad() {（画面を表示したときに）
    super.viewDidLoad()
    heightTextField（身長のテキストフィールド）.placeholder（のヒント） =（代入） “身長をcmで入力してください。”
    weightTextField（体重のテキストフィールド）.placeholder（のヒント） =（代入） “体重をkgで入力してください。”
}

つまり、テキストフィールドのヒントに「身長をcmで入力してください。」を代入しているということです。

STEP.3

実行してみる

実行してみてみましょう。

このように、入力フォームに薄く文字が表示されると思います。

これが、TextFieldのplaceholderです。

これはユーザーに何を入力するといいのかヒントを出す役割があります。当然ヒントなので文字を打つと消えます。

STEP.4

計算のロジック

次は、計算のロジックを書きます。

25行目あたりに以下のコードを記述してください。

func calculation(height: Double, weight: Double) -> String {
    let h = height / 100
    let w = weight
    var result = w / (h * h)
    result = floor(result * 10) / 10

    return result.description
}

コードを追記する場所

この7行でBMIを計算しています。

BMIの計算式は、

体重(kg) ÷ 身長(m)²

この計算式をコードで表しています。

func（関数） calculation（計算する）(height（身長を受け取る）: Double（不動小数点型）, weight（体重を受け取る）: Double（不動小数点型）) -> String（文字列を返す） {
    let（定数） h（hという箱） =（代入） height / 100（身長 ÷ 100(cmをmに変換)）
    let（定数） w（wという箱） =（代入） weight（体重）
    var（変数） result（resultという箱） =（代入） w / (h * h)（体重 ÷ (体重 × 身長)）
    result（resultという箱） =（代入） floor(result * 10) / 10（計算結果を小数第二位の切り上げ）
    return（返す） result.description（計算結果）
}

まぁ、初心者の方は、ここら辺で計算してるんだなー程度の理解で大丈夫です。

STEP.5

ボタンを押した時の処理

23行目あたりに以下のコードを追記してください。

@IBAction func calculationBtnAction(_ sender: Any) {
    let doubleH = Double(heightTextField.text!)
    let doubleW = Double(weightTextField.text!)
    bmiLabel.text = calculation(height: doubleH!, weight: doubleW!)
}

コードを追記する場所

ここでは、簡単にいうと、TextFieldに書かれた内容を計算して、bmiLabelの文字に代入しています。

STEP.6

確認

ここまでの全コード

//
//  ViewController.swift
//  BMICalculator
//
//  Created by RikutoSato on 2020/10/30.
//

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var heightTextField: UITextField!
    @IBOutlet weak var weightTextField: UITextField!
    @IBOutlet weak var bmiLabel: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        heightTextField.placeholder = "身長をcmで入力してください。"
        weightTextField.placeholder = "体重をkgで入力してください。"
    }

    @IBAction func calculationBtnAction(_ sender: Any) {
        let doubleH = Double(heightTextField.text!)
        let doubleW = Double(weightTextField.text!)
        bmiLabel.text = calculation(height: doubleH!, weight: doubleW!)
    }
    
    func calculation(height: Double, weight: Double) -> String {
        let h = height / 100
        let w = weight
        var result = w / (h * h)
        result = floor(result * 10) / 10
        return result.description
    }
    
}