🍏
GitHub Copilot for Xcode Chatで何か作る②

2025/02/18に公開
iOS
 Note(ノート)GitHub Copilot for Xcode Chatを使用してどれほどのものが作れるのか最近実験をしてみようと思いました。指示を出すと英語で回答されるのですが、日本語の指示は理解できるみたい。
第2弾は電卓を作ってみようと思います。想像してたよりうまくいかなかった。レイアウトはやはり自分で微調整が必要なのかも？

ロジックは作ってくれた。
この後も何度か指示は出した。
import SwiftUI

struct ContentView: View {
    @State private var display = "0"
    @State private var currentNumber = 0.0
    @State private var previousNumber = 0.0
    @State private var operation: String? = nil

    var body: some View {
        VStack(spacing: 10) {
            Text(display)
                .font(.largeTitle)
                .padding()
                .frame(maxWidth: .infinity, alignment: .trailing)
                .background(Color.gray.opacity(0.2))

            ForEach(buttons, id: \.self) { row in
                HStack(spacing: 10) {
                    ForEach(row, id: \.self) { button in
                        Button(action: {
                            self.buttonTapped(button)
                        }) {
                            Text(button)
                                .font(.title)
                                .frame(width: self.buttonWidth(button), height: self.buttonHeight())
                                .background(Color.blue)
                                .foregroundColor(.white)
                                .cornerRadius(10)
                        }
                    }
                }
            }
        }
        .padding()
    }

    private let buttons: [[String]] = [
        ["7", "8", "9", "/"],
        ["4", "5", "6", "*"],
        ["1", "2", "3", "-"],
        ["0", ".", "=", "+"],
        ["C", "⌫"]
    ]

    private func buttonTapped(_ button: String) {
        switch button {
        case "0"..."9", ".":
            if display == "0" || (operation != nil && currentNumber == 0) {
                display = button
            } else {
                display += button
            }
            currentNumber = Double(display) ?? 0
        case "+", "-", "*", "/":
            operation = button
            previousNumber = currentNumber
            currentNumber = 0
        case "=":
            if let operation = operation {
                switch operation {
                case "+":
                    currentNumber = previousNumber + currentNumber
                case "-":
                    currentNumber = previousNumber - currentNumber
                case "*":
                    currentNumber = previousNumber * currentNumber
                case "/":
                    currentNumber = previousNumber / currentNumber
                default:
                    break
                }
                display = "\(currentNumber)"
                self.operation = nil
            }
        case "C":
            display = "0"
            currentNumber = 0
            previousNumber = 0
            operation = nil
        case "⌫":
            if !display.isEmpty {
                display.removeLast()
                if display.isEmpty {
                    display = "0"
                }
                currentNumber = Double(display) ?? 0
            }
        default:
            break
        }
    }

    private func buttonWidth(_ button: String) -> CGFloat {
        return button == "0" ? 150 : 70
    }

    private func buttonHeight() -> CGFloat {
        return 70
    }
}

#Preview {
    ContentView()
}

 Que（きっかけ）GitHub Copilot for Xcode Chatが使えるようになり世の中の人が注目していたので試してみた。

https://zenn.dev/joo_hashi/articles/52ef04563f0728
電卓だと思ったよりいい感じのは作れなかった。CursorでFigmaの画像を読み込ませるとイメージ通りに作れるかもしれない。
あるいはチュートリアルの電卓の作り方を真似した方が綺麗に作れそう。

 Summary（要約）電卓のロジックについては下記の通りです👇

 シンプルな電卓アプリの実装解説このコードはSwiftUIを使用してシンプルな電卓アプリを実装しています。基本的な四則演算、小数点の入力、クリア機能、バックスペース機能を備えています。

 状態管理アプリケーションは4つの状態を管理しています：

display: 画面に表示される文字列（初期値: "0"）

currentNumber: 現在入力中または計算結果の数値（初期値: 0.0）

previousNumber: 演算子入力前の数値を保持（初期値: 0.0）

operation: 選択された演算子を保持（初期値: nil）

 UIの構成画面レイアウトは以下の要素で構成されています：
数値表示エリア：入力された数値や計算結果を表示
ボタン配列：5行4列のグリッドレイアウトで、以下のボタンを配置
数字（0-9）
演算子（+、-、*、/）
特殊機能（C：クリア、⌫：バックスペース、=：計算実行、.：小数点）


 ボタン操作の処理buttonTapped関数では、押されたボタンに応じて以下の処理を実行します：
数字または小数点の入力
表示が"0"の場合や新しい数値の入力開始時は置き換え
それ以外は既存の表示に追加
演算子の入力
現在の数値をpreviousNumberとして保存
新しい数値入力の準備
イコール（=）の処理
保存された演算子に基づいて計算を実行
結果を表示し、演算子をクリア
クリア（C）の処理
すべての状態を初期値にリセット
バックスペース（⌫）の処理
表示されている数値の最後の桁を削除
空になった場合は"0"を表示

 ボタンのレイアウト調整ボタンのサイズは以下のように設定されています：
通常のボタン：幅70、高さ70
"0"ボタン：幅150（他のボタンの約2倍）、高さ70
このように、基本的な電卓の機能を、SwiftUIの宣言的なUI構築の特徴を活かしながら実装しています。状態管理とユーザー入力の処理を明確に分離し、メンテナンス性の高いコードとなっています。
Note(ノート)

Que（きっかけ）

Summary（要約）

シンプルな電卓アプリの実装解説

状態管理

UIの構成

ボタン操作の処理

ボタンのレイアウト調整

Discussion
