このPartでは、以下のような消費税計算アプリを開発していきたいと思います。
TextFieldに価格を入力してボタンを押すとその消費税の8%と10%が表示されるという簡単なアプリです。

プロジェクト作成

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

1. 新規作成
   
   Create a new Xcode projectを選択してください。
   もしこの画面が開かない場合は、command + shift + 1を押してください。
   
   
2. テンプレートを選択
   
   ①iOSを選択
   ②Appを選択
   ③Nextをクリック
   
   
3. プロジェクトの設定
   
   ①プロジェクト名にTaxCalculatorと入力
   ②InterfaceはSwiftUI
   ③LanguageはSwift
   ④全てチェックなし
   ⑤Nextをクリック
   
   
4. 保存するフォルダを選択
   
   上のところがPracticeフォルダになっていることを確認してNextをクリック

これで、プロジェクトの作成ができました。
では次にレイアウトを作っていきましょう。

レイアウト作成

次にレイアウトを実装していきましょう。と言ってもTextFieldとButtonと3つのTextを配置するだけです。

1. オブジェクトを配置
   まずは、TextField以外のオブジェクトを配置します。以下のコードをContentViewのvar bodyの中に記載してください。

   VStack {
       Button("計算") {
   
       }
       Text("価格：")
       Text("消費税8%：")
       Text("消費税10%：")
   }
   .padding()
   

   変更する場所

   

   
   
2. TextFieldに使う値を宣言
   次に、TextFieldを配置していきます。
   ですが、その前に、TextFieldに入力された値を保持する変数を宣言します。
   以下のコードをstruct ContentViewの下に記述してください。

   @State var inputText = ""
   

   追記する場所

   

   
   
3. TextFieldを配置
   以下のコードを、Buttonの上に記述してください。

   TextField("ここに文字を入力", text: $inputText)
   

   追記する場所

   

   
   
4. 位置調整
   次に、オブジェクトとオブジェクトの距離が近いので、少しスペースを空けましょう。
   VStackを以下のように変更してください。

   VStack(spacing: 20) {
   

   追記する場所

   

   これでオブジェクトの間隔が広がりました。

現状、以下のようなレイアウトになっていればOKです！

計算の処理を実装

では、次に計算の処理を実装していきましょう。

1. 価格を表示する
   価格を表示しているTextを以下のように変更してください。
   ちなみに、バックスラッシュ()は、option + vで打てます。

   Text("価格：\(inputText)")
   

   追記する場所

   

   
   
2. 実行して確認
   これで動作確認すると、TextFieldに打った文字が価格の隣に表示されるはずです。
   
   
   
3. 消費税の変数を定義
   次に、ボタンを押したら消費税を表示させる処理を実装します。消費税を表示させるためには新しい変数を宣言しなければなりません。今回は8%と、10%の二つの消費税表示させたいので、二つの変数を定義します。
   struct ContentViewの下に、以下のように変数を宣言してください。

   @State var tax8 = 0.0
   @State var tax10 = 0.0
   

   追記する場所

   

   型は、初期値を0.0にしているので、少数が入るDouble型になります。
   
   
4. ボタンを押したら計算
   次に、ボタンを押したら入力した価格から消費税を割り出してあげましょう。
   価格から消費税を割り出す計算式は、消費税8%の場合は、価格÷0.08です。10%の場合は、価格÷0.1です。
   では、そのようにコードを記述していきましょう。Buttonを以下のように変更してください。

   Button("計算") {
       tax8 = Double(inputText)! * 0.08
   }
   

   追記する場所

   

   
   
5. 消費税10%も計算
   消費税10%の方も同じように処理を追加してください。

   Button("計算") {
       tax8 = Double(inputText)! * 0.08
       tax10 = Double(inputText)! * 0.1
   }
   

   追記する場所

   

   
   
6. 計算結果をTextに表示
   現時点ではただ計算しただけなので、画面には何も表示されません。Textを以下のように変更しましょう。

   Text("消費税8%：\(tax8)")
   Text("消費税10%：\(tax10)")
   

   追記する場所

   

   
   
7. 実行して確認
   これで実行してみると、TextFieldに値を入力して計算ボタンを押すと消費税8%と10%が計算されて表示されます。
   

バグ修正

現状バグが一点あります。
それは、TextFieldに数字以外の文字を入力して計算ボタンを押すと、エラーになることです。
エラーになるということは実際にリリースするとアプリがクラッシュしてしまいます。クラッシュは絶対によくないのでなるべくクラッシュしないアプリを作りましょう。

0を代用として使う

現状、、数字以外の文字を入れて計算ボタンを押すとエラーになってしまいます。
原因は、tax8 = Double(inputText)! * 0.08の部分です。
ここで計算していて、このinputTextという文字列を少数型に変換しています。inputTextが数字だと問題なく少数型に変換できるのですが、数字以外の文字列だと変換に失敗してしまいます。なのでエラーになるということです。
以下のように変更しましょう。

Button("計算") {
    tax8 = (Double(inputText) ?? 0) * 0.08
    tax10 = (Double(inputText) ?? 0) * 0.1
}

数字以外入力させない

上記の対応で、数字以外の文字列を入力してもエラーにならなくなりました。
しかし、そもそもこのアプリで数字以外の文字列を入力する必要はあるのでしょうか？数字さえ打てれば良いので、数字のみ打てるようにしましょう。

TextFieldに対して、.keyboardType(.numberPad)というモディファイアをつけてください。

TextField("ここに文字を入力", text: $inputText)
    .keyboardType(.numberPad)

こうすることで、数字のキーボードしか使えなくなります。
左上の再生ボタンか、command + rで実行してください。そして、テキストフィールドにカーソルを合わせて見てください。数字のキーボードが表示されるはずです。
もし表示されない場合は、Mac入力になっているので、command + shift + Kを押してください。そうするとキーボードが出てくると思います。

これでそもそも数字しか打てなくなったので、エラーを未然に防げるようになりました。
アプリ開発はこのように色々なエラーに対応していかなければなりません。

全てのコード

import SwiftUI

struct ContentView: View {
    @State var inputText = ""
    @State var tax8 = 0.0
    @State var tax10 = 0.0
    
    var body: some View {
        VStack(spacing: 20) {
            TextField("ここに文字を入力", text: $inputText)
                .keyboardType(.numberPad)
            Button("計算") {
                tax8 = (Double(inputText) ?? 0) * 0.08
                tax10 = (Double(inputText) ?? 0) * 0.1
            }
            Text("価格：\(inputText)")
            Text("消費税8%：\(tax8)")
            Text("消費税10%：\(tax10)")
        }
        .padding()
    }
}