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

 

サトリク

この講座では、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 FieldLabelの下にドラッグ&ドロップ

STEP.3
広げる

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

STEP.4
複製

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

STEP.5
ButtonとLabelを配置

新たにButtonLabelを追加してください。

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

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
実行してみる

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

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

これが、TextFieldplaceholderです。

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

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定数 hhという箱 =代入 height / 100身長 ÷ 100(cmをmに変換)
    let定数 wwという箱 =代入 weight体重
    var変数 resultresultという箱 =代入 w / (h * h)体重 ÷ (体重 × 身長)
    resultresultという箱 =代入 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
    }
    
}

 

完了

これでアプリ完成です。

実行して確認してみましょう!

実行

STEP.1
実行

左上の再生ボタンで実行して確認しましょう。

上のTextFieldに身長をcmで入力し、下のTextFieldに体重を入力して、計算ボタンを押してみましょう。

labelというところに、BMIの数値が表示されると思います。

ちなみに、18.5未満が「低体重(やせ)」で、18.5以上25未満が「普通体重」、25以上が「肥満」です。

完了

できましたでしょうか?これでBMIアプリが完成です!

 

まとめ

うまくできましたでしょうか?

うまくできなかったらもう一度やり直してみてください。

 

サトリク

独学でアプリ開発は厳しくないですか?

このブログ(satorikublog)の筆者サトリクが、初心者の方に教えるサービスをはじめました。

気軽にご相談ください!

詳細はこちら

 

 

ゼロから学ぶiPhoneアプリ開発入門


もっとみる