SwiftUI チュートリアルをやった

WWDC 2019 で発表された SwiftUI のチュートリアルをずっとやりたいなと思っていたのですが、ようやく先ほど1つだけやったので書き残します。

SwiftUI チュートリアル

Introducing SwiftUI | Apple Developer Documentation

Apple が公開しているチュートリアルで、ざっくり
・観光地がリストで表示されて、いいねができる旅行アプリ的なもの
・グラフなどのアニメーション
・複雑なデザインやレイアウト
の3つに分かれていて、私は最初の旅行アプリ的なものを少しだけやりました。

それぞれにおおよその所要時間が書いてあって、全部やろうとすると10時間くらいかかりそうな感じです。（逆にいうと10時間で基礎はできる）

成果物

今回私がやったのは「Creating and Combining Views」という、プロジェクト作成から始まって観光地の詳細画面的なものを作るようなチュートリアルをやりました。

Creating and combining views | Apple Developer Documentation

ページには所要時間40分とありましたが、 github にリポジトリ作ったりチュートリアル手順にないこともやっていたので1時間くらいかかりました。

完成したアプリはこちら。

差分は Pull Request で見れます。+1100行とかってなってますが、ほとんどはプロジェクト作ったときに自動生成されたコードで、自分で書いたのは実質100行くらいです。

Creating and Combining Views by kojoma 揃 Pull Request #1 揃 kojoma/swiftui-tutorial

環境

SwiftUI を使って開発するには対応しているバージョンの Xcode が必要です。また、 SwiftUI を使って開発する場合、ライブプレビューと言ってコードの変更をリアルタイムで反映してプレビューするみたいなことができるのですが、これをやりたい場合は macOS も Catalina にする必要があるみたいです。（ WWDC から数ヶ月間、私がチュートリアルをやらなかったのも、自分の mac に Catalina beta を入れるのを躊躇したせいでした）

私はそれぞれ以下のバージョンでやりました。
・Xcode Version 11.1 (11A1027)
・macOS Catalina Version 10.15 (19A602)

やってみた感想

これまで UI の実装には storyboard を使ってたのですが、下記の課題を感じていました。
・コードから UI が分からない
・実質コードレビューも難しい
・同じ画面を複数人で触るとほぼコンフリクトする

SwiftUI を使えば、単純にコードの量が減るのでこれらの問題は解決、しかもメソッドも直感的で例えばこれまでは画像を丸く切り出す場合は

UIImageView (画像)を丸くする処理 - Qiita

こんなことをやってたのですが、 SwiftUI だとこれだけ。

Image("image-name")
    .clipShape(Circle())

ただまあ、またいろいろ覚えないといけないのか…とか SwiftUI を使ったアプリは iOS 13 以上じゃないと動かないみたいなので仕事で使えそうなのは実質1〜2年後だろうな…とかいろいろあるにはあります。

とはいえ、趣味プロジェクトだったら iOS バージョンとか気にしなくていいし、新しくていいものに出会って普通にワクワクしてますw

watchOS App のチュートリアルもあったので、そろそろ作ってみたいなー