Claude3.5で巻き紙電卓を作り直す過程をさらす（Swift UI)

mobazou

　知る人ぞ知る20万ダウンロードの我が巻き紙電卓(iOS App）ですが（w）、初期のObjective-Cで作って以来、なんどか中身を１０進演算にしたいとトライしてきましたが、途中SwiftやSwiftUIといったアーキテクチャの見直しもあり、なかなか手付かずでいました（１５年以上？？）。

　最近になり生成AIが隆盛となりChat GPTを使ってどうにかならないか手をだしてきましたが、あまりいいコードが生成されず手こずっていました。

　ここ直近でClaude3.5 Sonnetが話題となっていましたので、課金してコードを生成させていたら、なんと形になってきました。といっても一発で生成できるわけではなく、次回作る時の健忘録としてその過程を記録しておきます。

１.まずはテーブルの生成から

巻き紙電卓の特徴は、演算過程がロール紙に記録されるようにテーブル上に表示されるものです。これ、高校の文化祭でポケットコンピュータを使って作っていたものなんですね。それをiOSアプリとして再現したというものなのです。

ということで、まず基本のテーブルの生成を依頼しました。

XcodeのSuift UIで、画面全体に列が１つのテーブルを表示するコードを生成して

これで生成されたコードがこれ

import SwiftUI

struct ContentView: View { let items = ["項目1", "項目2", "項目3", "項目4", "項目5"]

var body: some View {
     List(items, id: \.self) { item in 
        Text(item) 
    }
　 }
}

struct ContentView_Previews: PreviewProvider {
 static var previews: some View {
　 ContentView()
 } 
}

SwiftUIですね。まったく触ったこともないので、ここまでいくのも手間がかかったでしょうに、一発でここまできました。

しかし最後の構造体は現在では使われておらず、修正を依頼しました。

コードが古いいですね。PreviewProviderの記述は#Prevewで代替できるようになったかと思いますが

で生成したのがこれ

import SwiftUI

struct ContentView: View { let items = ["項目1", "項目2", "項目3", "項目4", "項目5"]

var body: some View {
     List(items, id: \.self) { item in 
        Text(item) 
    }
　 }
}

#Preview {
 ContentView()
 }

学習した情報には古いものがあるので、古いタイプのコードが生成されることが多いです。そういったところはこちらで見つけて指摘してあげる必要があります。

このあと、次のような指示でコードをすこしずつ改善していきました。

  • 画面いっぱいのテーブルになっていない

  • 行がはみ出ないように調整して

  • テーブルへ文字を表示する処理を切り出して

  • テーブルへの表示の指示を配列のIncexではなく文字そのものを受け渡すようにして

  • 冗長な処理の削除を依頼

  • コンパイルエラーを指摘

  • 表示がおかしいのでおかしいところを指摘し、具体的なコードの修正を依頼

  • 表示順が逆になっていることを指摘

  • 実装処理が正しいか確認すため、表示する項目の追加を指示

  • 一番下の業から表示させ１行ずつ上にずらすように指示

  • なかなか指示が受け入れられないので、要件を一度に入力

  • テーブル行に区切り線を設けることを指示

修正をすすめるなかで、後半ではコードが元にもどってしまったり、失敗したコードをもとに修正がすすむなど、どのコードをもとに修正をやっているかがわからなくなりましたので、都度コードをいれながら、修正指示をするようになりました。

Projectの導入

改修対象のコードがわからなくなってしまい、毎回最新のコードをコピペするのが面倒になってきたところで、なんと、GPTsに相当するProjektがリリースされました。

ProjectとはローカルのファイルやテキストをINPUTとしてLLMを動作させることができるという機能で、古い学習内容を上書きしたり、何回も同じ情報を入力して指示したりせずに済む機能です。Chat GPTのGPTsの場合は、インターネット情報を参照できたりするのですが、コーディングではとくに不要なので、この機能で十分です。

さらにコードを右手のウィンドウに表示させるArtifactという機能も提供されるようになり、コーディングがめちゃくちゃ簡単になってきました。

とはいっても、一旦完成とおもった改善のベースとなるコードをいちいち入れ替えなくていけないことに変わりはないのですが、毎回貼り付けるよりはめちゃくちゃ便利です。

１０キーの導入

ということで、テーブルへの読み書きコードが安定してきたところで、Projectも使いながら、10キーでのテーブルへの書き込み機能を実装することにしました。

数字の入力を受け付ける機能の追加を要求したところ、１０キーの入力ボタンを配置してくれました。特に要求はしていませんでしたが、ここは賢いところですね。

テーブルの位置の調整を何回かしてようやく１０キーでの入力ができるようになりました。

１０進演算の導入

ここが今回のキモになるのですが、１０進演算の関数を独立して実装させて、その後に＋、ー、x、／、＝のキーの追加を要求しました。

その後、演算子を入力したときの行表示の動作や、演算子の表示、入力時専用のディスプレイの追加などを行い、だんだんと形になってきた感じです。


Claude3.5によるSwiftUIでの電卓実装状況

総評

見返してみるとかなりのやり取りがあり、細かいコード修正や構造体の分離実施など、中身の具体的指示もあり、それがなかなか通らなかったりと、思うように動くまでに意外と多くのやりとりをしていました。

しかし今でもコードが読みきれないところもあり、今のスキルでは絶対に実装できないところを実装できているのは明らかです。

Claude3.5では、複雑なアプリケーションであってもパーツごとに実装を進め、少しずつ追加していくことで実装できる印象です。

アーキテクチャや言語の変更でコーディングにハードルがあり、文法も覚えきれないし、という人であっても、かなりの部分をClaude3.5でおぎなってくれますので、利用をお勧めしたいと思います。

とはいっても巻き紙電卓はこれ以上の多くの機能をもっていますので、実装にはまだまだ時間がかかるかと思います。ただ、Claude3.5を使いここまでもってこれましたので、実現はまじかかと思います。思いもかけず救世主登場という感じですね。

この記事が気に入ったらサポートをしてみませんか？