電卓アプリの作成をしてみる4

SwiftUIの電卓アプリのサンプルを探してみた

画面の構成を終えてデザインもある程度固まってはきてきましたが、ロジックをどうしようかなと。。今まで電卓のアプリケーションを作っていたのであれば悩むことはなかったとは思うのですが、作った経験はなかったので電卓の作り方を探していました。電卓の作り方と同時並行でSwiftUIの記事でよさそうな記事がないかなぁと探して見ると、やはりSwiftUIに関しての記事は今の所情報が少ない印象でした。ただ、日本語の記事が少ないというだけで英語の記事を探せば色々見つかるのではないかと、検索してみるとyoutubeにまさにほしいと思っていた電卓の作り方を載せている動画がありましてびっくりしました。参考動画を載せておきます。

参考動画

SwiftUI Calculator #1: Less than 300 Lines of Code

サンプルを作成

見つけたあとはすぐにサンプルの作成に移りました。基本的には動画に載っている情報を見て作成していくだけで電卓アプリが作成できる内容になってるので、全部で7つの動画を見ることをおすすめします。電卓の作り方以外にもプロパティラッパーの使い方(@Stateや@Binder等)の使い方が学べますし、ソースコードも見やすいので初心者におすすめな動画ではと思いました。

プログラムについては、一つのファイルで構成されているので簡易的に終わらせるのであればそのまま模写するだけでよいかなと思います。ただ自分の作成する電卓アプリでは、部品ごとにファイルを分けたりビジネスロジックをViewのクラスから分けたりしてみたいので、参考にしたサイトをもとに新しく構成を考え直していきます。一応私がこのサイトを見て作成したものを動画で載せておきます。

どうでしょうか、、見た目は参考にした動画と同じですがタップの動作でボタンの浮き沈みを変えてみたりしています。タップの動作を@stateのbool値で状態管理しておき、押されたタイミングでboolの値を変更する。そうすることによって押されたタイミングでのボタンの色変化やボタンを上下させたりしています。処理自体は参考にした動画を見ていただければすぐに分かりますので、ぜひ見てみてください。以上で電卓サンプルの作成自体は終了にして明日からは、画面の構成を再構築してこちらのサンプルの処理を組み込めるようにしていきます。

ちょっと困りごと

こちらのサンプルを作成している最中に困ることが起こりまして、XcodeでCanvasが急に開かなくなる現象に遭遇してしまいました。。。。

CanvasというのはXcodeのソースと隣合わせで端末画面をみることができまして、それが見れなくなるとソースを変更した際のホットリロードで画面が変わっているかのチェックがすぐにできなくなるという状態です。

色々調査をしていまして、再起動してみたりXcodeのバージョンを確認してみたりしてるのですが手がかりがつかめません。(泣) なので、仕方なく毎回シュミレータで画面の更新がされているのかを確認しています。。直し方が分かり次第記事に載せようかと思いますが、理由が全くわからない。。Swiftの開発をしていた際には、なにかキャッシュが残っていたりして再起動したら治ったとかあったのでそうなのかなぁとかもおもったのですが、違うようで謎です。